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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Поставим пока условием просмотр страницы на 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) Источники трафика

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

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 на скриншоте). Это могут быть статические данные или динамические, например, время заполнения формы или страница. В дополнительных данных, которые сервис будет получать, вы можете использовать следующие шаблоны:

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

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

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

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

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

Даже если вы не нашли интересующие вас функции в списке возможностей eSputnik, мы открыты к предложениям и внедрим решения, способные повысить эффективность работы с системой.