Как установить pop-up форму подписки на сайте?

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

  • 1
  • 2
  • 3
  • 4
  • 5
Всего голосов: 3 средняя оценка: 5 (рейтинг: 100%)

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

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

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

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

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

Способы установки форм 

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

Настройка поп-апа

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

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

  • SUMO

  • GetSale

  • OptiMonk

  • Hello Bar

  • PopMechanic

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

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

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

 

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

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

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

Регистрация в Popmechanic

Оставляйте при регистарции на сайте 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

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

Добавить комментарий

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