Как поставить поп-ап форму подписки в eSputnik

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

Но самые частые вопросы, которые можно услышать от тех, кто делает первые шаги в емейл-маркетинге: как же быстро поставить форму подписки на свой сайт и можно ли потом её редактировать?

На эти вопросы нам сегодня ответит Юлия Повх - email-маркетолог Modoza.com и маркетинг-консультант Popmechanic.io.

Варианты установки pop-up формы подписки на сайте

Есть несколько способов поставить поп-ап форму:

Давайте рассмотрим каждый из этих вариантов подробнее, их плюсы и минусы.

1. Модуль сервиса рассылок

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

✔ этот функционал обычно бесплатен;

✔ не нужно интегрироваться с сервисом рассылок;

✔ быстрое изменение и управление формами;

✔ возможность показа форм по сегментам сервиса.

Но есть недостатки:

✖ ограниченный выбор форм;

✖ не во всех сервисах есть;

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

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

2.Модуль CMS или CRM-системы, конструктора сайтов

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

В конструкторах сайтов тоже чаще всего есть простые формы подписки.

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

✖ нельзя задавать детальный таргетинг: по страницам, источникам трафика, меткам;

✖ можно использовать только встроенные интеграции с сервисами рассылок, а вашего сервиса может не быть;

✖ выбор дизайнов форм небольшой.

Зато такой функционал бесплатен.

Посмотрите сами или уточните в поддержке вашей CMS/CRM-системы/конструктора сайтов есть ли у них отдельный модуль для форм подписки и какие есть готовые интеграции с сервисами рассылок

3. Собственная разработка модуля поп-ап окон для сайта

Чем хороша собственная разработка форм:

• отсутствие ежемесячной оплаты за сервис

• вы можете создать любой дизайн и интерактивность

• не нужно устанавливать сторонние скрипты на сайт

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

Однако в таком подходе есть очень много нюансов.

Например, помимо самого показа окна для корректной работы также придется разработать:

• модуль статистики показов/закрытий/заполнений поп-апа

• модуль для быстрого изменения/замены поп-ап окон

• отдельную интеграцию с сервисом рассылок, который используется

• отдельную интеграцию с системами аналитики

• валидацию форм

• систему хранения, дедубликации и обновления данных

• управление повторными показами - хранение кук для исключения показа тем, кто ранее был на сайте

• таргетинг: показ формы в определенное время, на определенных страницах, при определенных источниках трафика или географии

• мобильный, десктопный дизайн формы в 3 видах: при заполнении, при ошибке заполнения, экрана после подписки

То есть, если вы планируете собственную разработку форм, то вам придется задействовать минимум 3 специалистов:

• дизайнера, который сможет прорисовать эти формы

• верстальщика, который их заверстает

• разработчика, который создаст модуль для управления ими и передачи данных во внутренние базы и сервис рассылок
   

4. Отдельный сервис по работе с поп-ап формами

Существуют отдельные сервисы, которые полностью закрывают задачи по установке, настройке, тестированию форм подписки.

Чем это удобно:

✔ гибкие настройки таргетинга

✔ большой каталог форм

✔ готовые интеграции с популярными сервисами рассылок

✔ А/В-тесты и быстрое изменение форм

Но есть нюансы:

✖ отдельная оплата за сервис

✖ нужно выбирать сервис, который интегрируется с вашим сервисом рассылок

Как работают такие сервисы?

То есть, достаточно 1 раз поставить скрипт на свой сайт и в дальнейшем можно управлять всеми формами на сайте в личном кабинете сервиса.

Какие сервисы по установке форм подписки существуют?

• SUMO

• GetSale

• OptiMonk

• Hello Bar

• PopMechanic

• и многие другие.

Из представленных сервисов готовая интеграция с eSputnik есть только у сервиса Popmechanic. 

Рассмотрим детальнее настройку форм и их интеграцию с eSputnik c помощью сервиса PopMechanic.

Инструкция: как создать поп-ап форму подписки в Popmechanic и интегрировать её с eSputnik

Пошаговая настройка формы: от регистрации до первого письма.

1. Регистрируемся в сервисе

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

2. Выбираем тип формы, который хотим использовать на своем сайте

Правим тексты на свой вкус, добавляем свои изображения или картинки из галереи Unsplash.

После выбора картинок и текста получается такая милая форма:

3. Настраиваем условия показа

Сохраняем изменения и переходим на следующий этап - условия показа.

Есть 4 основных варианта условий показа:

• увел мышку за пределы окна

• прочитал страницу на Н%

• провел на странице N секунд

• посетил N страниц

Можно запускать несколько сразу или ставить на тестирование условия показа. Рекомендуем настраивать показ после нескольких страниц на сайте или времени. Посмотрите среднее время, которое проводят пользователи на сайте и отталкивайтесь от этих показателей.

Поставим пока условием просмотр страницы на 65%, чтобы не показывать форму сразу, но и не упустить момент, когда пользователь уйдет с сайта:

4. Настраиваем таргетинг - кому и в какое время будет показываться форма

Тут есть несколько характеристик таргетинга:

1) Страницы показа

Укажите, на каких страницах форма должна всплывать. Можно задать несколько страниц или исключить показ на определенных страницах, например страницах корзины и регистрации. Поле поддерживает регулярные выражения, поэтому если нужно исключить из показа целое семейство URL, например, товары определенной категории, то можно воспользоваться "*". Например, введя в поле https://site.com/sale* мы исключаем показ на самой странице https://site.com/sale и всех вложенных страницах - https://site.com/sale/men, https://site.com/sale/men/1 и т. д.

2) Устройства

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

3) Источники трафика

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

• Реклама – любой трафик, размеченный UTM-метками

• Органический – трафик с поисковых систем 

• Прямой заход – пользователи, которые ввели адрес вашего сайта в адресную строку браузера.

• Ссылки – переходы со сторонних сайтов.

4) Повторные показы

Тут задаются условия того, нужно ли показывать форму тем пользователям, которые её уже видели и закрыли. По умолчанию форма показывается через 7 дней.

5) Геотаргетинг

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

6) Время показа формы

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

Итак, я оставила показ формы на всех страницах своего блога, на всех устройствах, при всех источниках трафика, с любых стран и в любое время. Форма будет показываться повторно не раньше, чем через 7 дней после закрытия её пользователем:

5. Устанавливаем код Popmechanic на своем сайте для показа формы

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

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

6. Настраиваем интеграцию с eSputnik

Подготовим аккаунт в eSputnik к приему данных:

1) Создаем группу типа “список”, куда будем “складывать” контакты, собранные в нашей форме: 

2) Рекомендую создать несколько дополнительных полей. Это необязательно, но лучше по максимуму использовать возможности интеграции и передавать данные, которые мы узнаем о пользователе при подписке: источник трафика, город, тип формы. Дополнительные поля создаются в аккаунте eSputnik на вкладке Настройки - Дополнительные поля. Все поля я создала с типом “текстовое поле”

3) Если вы хотите, чтобы пользователь после подписки сразу получил велкам-письмо или письмо подтверждения подписки - необходимо их подготовить заранее. В Popmechanic есть возможность отправить событие при подписке пользователя в форме, поэтому вам нужно заранее создать событие, на него повесить сценарий, а в сценарии использовать ваше подготовленное велкам-письмо. Об этом детальнее рекомендую почитать тут.

Настраиваем передачу данных с формы подписки

1) Выбираем нашу форму и нажимаем на иконку с интеграцией:

где выбираем eSputnik: 

2) Вводим свой логин и пароль от аккаунта в сервисе eSputnik, в который хотим передавать контакты

3) Выбираем группу в eSputnik, куда нужно передавать контакты (1 на скриншоте) - подтягиваются автоматически все группы типа “список”

4) Настраиваем передачу дополнительных данных в дополнительные поля контакта в eSputnik. Для этого нужно соотнести название дополнительного поля eSputnik, которое подтягивается в виде списка и заполнить, что в это поле будет передаваться (2 на скриншоте). Это могут быть статические данные или динамические, например, время заполнения формы или страница. В дополнительных данных, которые сервис будет получать, вы можете использовать следующие шаблоны:

• %email% - email

• %phone% - телефон

• %first_name% - имя

• %last_name% - фамилия

• %name% - имя + фамилия

• %id% - ID лида (число)

• %url% - URL, на котором был получен лид

• %domain% - домен, на котором был получен лид

• %form_name% - название формы, которой был собран лид

• %utm_source% - UTM source текущей сессии

• %utm_medium% - UTM medium текущей сессии

• %utm_campaign% - UTM campaign текущей сессии

• %utm_term% - UTM term текущей сессии

• %utm_content% - UTM content текущей сессии

• %geo_city_ru% - город пользователя по-русски

• %geo_city_en% - город пользователя по-английски

• %geo_country_ru% - страна пользователя по-русски

• %geo_country_en% - страна пользователя по-английски

• %geo_geoname_id% - ID города пользователя в базе GeoNames

• %created_date% - Дата создания в формате ISO (YYYY-MM-DD)

• %created_time% - Дата и время создания в формате ISO (YYYY-MM-DDTHH:mm:ssssssss+TZ)

Если вы хотите, чтобы eSputnik сразу совершал определенное действие при подписке пользователя в Popmechanic - необходимо передавать событие. Я создала в eSputnik событие типа подписка/отписка с ключом Popup-cat. К этому событию добавила сценарий, в котором контакт подтверждается, и ему отправляется первое письмо.
 

7. Тестируем форму подписки и интеграцию

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

• в разделе “Таргетинг” выбираем показывать форму только на странице и вставляем значение *test* - со звездочками. Это означает, что форма будет показываться только на страницах сайта, на которых установлен код и где в url есть test

• настраиваем простые условия показа, чтобы точно увидеть форму, например через 5 секунд на сайте

• открываем режим инкогнито для тестирования, вводим https://ваш_сайт/#test - теперь форма будет показана

• вводим в поле свой емейл

• отправляем данные и смотрим - пришел ли он в группу сервиса рассылок, добавились ли дополнительные поля, пришло ли письмо после подписки: 

Кстати, во время написания статьи Юля поставила форму подписки в виде теста на свой блог, вы её тоже можете увидеть по ссылке https://www.email-cat.com/#test

Если у вас остались вопросы по поводу интеграции, или что-то не получилось:

• поищите ответ в базе знаний Popmechanic

• напишите в поддержку на email support@popmechanic.io или в чате личного кабинета