Интеграция формы в сервисе email рассылок Elastic Email в Jumpout

Здравствуйте, друзья! Наверняка Вы помните, как в 2016 году закрылся сервис email-рассылок Smartresponder.

После этой новости, все инфобизнесмены начали искать альтернативу для email-рассылок. Практически у каждого человека, который занимается инфобизом и следит за последними тенденциями инструментов для него, была статья, где он описывал сервис email-рассылки, который предпочитает в замену Smartresponder.

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

После того, как выбор остановился на сервисе Elastic Email, мы начали внедрять его в наш бизнес.

На некоторых страницах наших сайтов стоит Jumpout (всплывающее окно, которое появляется тогда, когда пользователь ведет курсор к закрытию страницы).

На самом деле этот инструмент очень полезен. Он значительно увеличивает Вашу базу подписчиков в автоматическом режиме. Пример тому, результат конверсии всплывающего окна на некоторых из наших страниц:

Проблема оказалась в том, что в настройках Jumpout не было подключения Elastic Email, а я не захотел отказываться от данного инструмента. Поэтому пришлось как-то решать эту проблему.

Решение искалось достаточно долго: писали в поддержку Jumpout, пытались встроить форму обычным кодом (там есть возможность добавить свою форму), но результата это не дало. Форма добавляется, но сервис ее обрабатывает таким образом, что она становится не рабочей.

Решение проблемы

Создаем форму в Elastic Email и копируем код формы. Как это сделать, смотрите здесь:

Теперь идем на сервис Jumpout, создаем новый попап и в настройках «Подписка», выбираем «Новая форма».

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

Даем название форме и нажимаем «Сохранить».

Таким образом, мы создали форму, в которой есть почти все нужные открытые (email) и скрытые поля, для того, чтобы она работала. Но, если Вы попробуете сохранить и протестировать этот попап, то подписка работать не будет.

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

window.onload=function(){ 

$(".jo_wr").html(' 

Сюда нужно вставить удаленный код (см. картинку выше).

 ');

 };

Обратите внимание на слэши (знак «») в строках кода. Его нужно вставлять так, как указано выше.

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

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

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

P.S.: Единственное, что Вам нужно будет менять при создании нового попапа, это данные между тегами <ul></ul>. Тогда форма будет работать правильно и подписывать человека на нужный лейбл.

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