Настройка и применение всплывающего окна JumpOut

25.10.2016 Полезности   3 комментария

Всем, привет! В статье о наборе подписной базы с блога я упомянула о таком инструменте, как всплывающее окно JumpOut. Решила его протестировать, а заодно показать, как настроить и использовать в деле.

Этот скрипт платный, у него есть несколько тарифных планов, а также бесплатный тестовый период 15 дней. За это время вы можете применить его в своих проектах, оценить результат и решить для себя – стоит вам его использовать дальше или нет.

tarifyi-jumpout

Инструмент довольно интересный, не ограничивается только возможностью собирать подписчиков. В попап можно добавлять ссылку на веб-страницу и, к примеру, использовать его для информирования об акциях и скидках. Такой пример я вам покажу. С его помощью можно приглашать людей на вебинары или на консультации. Также можно использовать попап в качестве всплывающей формы подписки, которая будет появляться при клике на определенную ссылку (допустим, с баннера или кнопки). А еще можно сделать серию попапов (как серию писем). Например, первый собирает вам подписчиков. А для людей, совершивших целевое действие (подписавшихся), вы можете настроить второй попап через заданное время, предложив в нем свой платный продукт со скидкой.

Предлагаю посмотреть видеоурок по настройке и использованию всплывающих окон JumpOut:

Как я использую JumpOut?

Я решила поэкспериментировать, установив попапы на продающий сайт своего комплекта для набора подписчиков, а также на блог.

В первом случае окно JumpOut появляется при попытке уйти с сайта, предлагая посетителю дополнительную скидку в размере 35%. При нажатии на кнопку «Получить мою скидку» человек попадает на страницу оплаты комплекта со скидкой, которая действует ограниченное время. Ее я предварительно создала на Глопарте (именно там у меня настроен прием оплаты) в разделе «Промо-акции». Нажав на крестик или на текст «Нет, спасибо…» попап тут же закроется. Следующий его показ для этого же посетителя настроен через день.

popap-so-skidkoy-na-prodayushhem-sayte

Дизайн попапа, тип, правила показа и прочее настраивается в интерфейсе сервиса. Все очень просто и гибко, далее покажу. А затем код скрипта просто ставится в исходный код продажника.

Второй попап я поставила на блог для сбора подписчиков. В нем предлагается бесплатность и встроена форма подписки. Всплывающее окно также появляется при попытке уйти с блога. А следующий показ для того же пользователя настроен через месяц.

popap-jumpout-na-bloge

Он уже неплохо себя зарекомендовал. И как бы я не поддерживала людей, которые говорят что все это навязывание, раздражает и попапы тут же закрывают, тем не менее, он работает и собирает подписчиков. Не будь попапа, не было бы и этих подписчиков.:) Опять же, гибкие настройки позволяют свести фактор навязчивости к минимуму.

podpischiki-s-popapa-jumpout

prodazha-cherez-popap-jumpout

Для вордпресс блогов есть специальный плагин jumpout. Мы создаем попап на сайте, а далее подключаем его к блогу плагином, синхронизируя с личным кабинетом, и активируем показ.

Как создать попап и установить на сайт?

Для начала использования пробной версии вам нужно зарегистрироваться на сайте, нажав на кнопку «Попробовать бесплатно».

testovyiy-period-jumpout

Тем самым вы создадите себе виртуальный кабинет, где и сможете генерировать попапы.

Впервые зайдя в кабинет, вы увидите интерактивные подсказки, которые помогают сориентироваться. А также советую посетить раздел помощи, кликнув по иконке спасательного круга. Там вы найдете интересную информацию по использованию всплывающих окон JumpOut, как работать с группами попапов (создавать серии и проводить сплит-тесты), как отключать попапы для тех, кто уже подписался, и прочие полезности.

sozdat-novyiy-popap

Для создания попапа нажимайте на одноименную кнопку.

Укажите название своего попапа и нажмите «Создать».

nazvanie-popapa

Далее настраиваем условия работы окна – показ при попытке закрыть сайт, нажатие на ссылку или через определенное время.

pravila-rabotyi-popapa

Когда показать попап в следующий раз этому же посетителю.

Добавить/убрать крестик закрытия. А также добавление возможности закрытия при нажатии на затемненную часть.

Следующая вкладка позволяет настроить дизайн и текст вашего попапа.

tip-i-dizayn-popapa

Здесь вы можете выбрать тип всплывающего окна – с кнопкой, с несколькими кнопками «да»/«нет», с формой подписки. При выборе попапа с кнопкой, можно выбрать действие, которое будет происходить при нажатии на кнопку – открытие веб-страницы (именно этот вариант я использовала для предложения скидки) или формы подписки.

Ниже, выбрав тот или иной дизайн, вы можете его настроить – изменить цветовую схему, текст, добавить изображение и т.д.

redaktirovanie-dizayna-popapa

Дальше идет вкладка «Подписка», если вы выбрали тип попапа «Форма подписки». Здесь вы просто добавляете код подписки со своего сервиса рассылок. Сервисы, с которыми интегрируется скрипт, обозначены на продающем сайте.

servisyi-rassyilok-podderzhivaemyie-jumpout

Есть простая и продвинутая интеграция. Я выбрала простую – это когда вы просто добавляете код формы, и подписчики собираются в ваш сервис рассылок.

dobavlenie-formyi-podpiski-v-popap

Далее выбираете «Новая форма подписки» и вставляете код своей формы. Поля, которые будут отображаться в форме, перетаскивайте мышью. Я оставила только емейл. Плейсхолдер – подсказка, которая отображается внутри этого поля.

При отправке формы можно открывать дальнейшую страницу (инструкция подтверждения подписки) в новой вкладке, либо непосредственно в попапе (тогда она должна быть адаптирована под мобильные устройства).

Во вкладке «Остальное» можно совсем отключить копирайт «Сделано с помощью JumpOut», просто убрать из него ссылку, либо заменить ее на партнерскую.

ubrat-kopirayt-v-jumpout

Когда закончите редактировать попап, сохраните его и нажмите на кнопку «Вставить на сайт».

kod-dlya-vstavki-jumpout

Если у вас простой одностраничник html, то скрипт вставляется в его исходный код. Я добавила после открывающего тега <body>. Можно также добавить между тегами <head> ваш код </head>

Для популярных сms, а также сайтов, сделанных с помощью плагинов wPPage, Optimizepress, есть свои подсказки. Просто галочкой выберите то, что вам подходит, и следуйте советам.

Например, для добавления попапа на блог Вордпресс, нужно зайти в плагины, через поиск найти, установить и активировать плагин jumpout.

dobavlenie-popapa-v-vordpress-blog

Далее зайти в него, авторизоваться в виртуальном кабинете, после чего нажать «Синхронизировать». В меню плагина появятся созданные вами попапы. Тот, что вы хотите подключить к блогу, активируете и проверяете работоспособность.

nastroyka-plagina-jumpout

Все созданные попапы отображаются списком в вашем виртуальном кабинете. Чтобы отредактировать тот или иной из них, просто кликните по названию. Под каждым есть статистика – количество показов, конверсий и процент конверсии. Обновляется эта информация в течение нескольких часов – максимум через день. Конверсия – это количество выполненных целевых действий (заполнение формы подписки или переход по ссылке из попапа). А % — это соотношение показов и целевых действий.

spisok-popapov

Также напротив каждого попапа есть иконка цепочки (позволяет сгенерировать ссылку для отключения попапа, чтобы он не показывался подписавшимся). Подробнее об этой возможности можно почитать в разделе помощи. Также есть иконка для копирования (если надо быстро скопировать настройки попапа) и крестик для удаления всплывающего окна.

Как видите, инструмент настраивается очень просто. Во время тестового периода можно устанавливать его на несколько доменов (если у вас несколько сайтов на разных доменах). В платной версии количество доменов зависит от тарифа. В минимальном – доступен только 1.

В видеоуроке я показала процесс настройки попапов более наглядно и подробно. Также, если у вас есть вопросы, буду рада ответить в комментариях. :yes:

Желаю успехов!

С уважением, Виктория Карпова

logo

Комментарии к Настройка и применение всплывающего окна JumpOut (3)

  • Денис:

    Виктория, здравствуй!
    Это очень крутой инструмент. Я его использую. Показал хорошую конверсию. Рассказал об этом на свом канале.
    Он платный, но платишь только один раз. Это плюс.

  • Игорь:

    Здравствуйте, Виктория!
    Из статьи видно, что инструмент действительно заслуживает внимание блогеров.
    А описание настройки этого скрипта выше всяких похвал — большего ничего и не надо.

    • Виктория Карпова:

      Здравствуйте, Игорь! Спасибо:)

Оставить ответ

Вы можете использовать эти HTML теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

:bye: 
:good: 
:negative: 
:scratch: 
:wacko: 
:yahoo: 
B-) 
:heart: 
:rose: 
:-) 
:whistle: 
:yes: 
:cry: 
:mail: 
:-( 
:unsure: 
;-)