Как создать и опубликовать pop-up на сайте

Попап (pop-up) — это элемент интерфейса, который открывается поверх содержимого веб-страницы в браузере. Он используется для привлечения новых клиентов, показа новостей или сбора данных через форму. Как правило, попап выглядит как всплывающее окно на сайте.

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

Шаг 1. Создание попапа​

Перейдите в раздел «Веб-слой» → «Попапы» и нажмите «+ Создать» в верхней части страницы:

Выберите тип попапа:

• Модальное окно — всплывающее окно, которое появляется в центре экрана. Обычно используется для сбора email-адресов.

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

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

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

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

Затем задайте системное имя попапа и при необходимости добавьте описание:

Шаг 2. Изменение текста и дизайна​

Внешний вид попапа задается с помощью параметров. Параметры содержат текст, изображения и CSS-стили различных элементов. Например, параметр text содержит основной текст попапа, параметр backgroundColor — его фоновый цвет.

Доступно два инструмента для работы с контентом попапа:

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

• Изменение HTML, CSS и JavaScript в редакторе кода. Подходит для пользователей, которые хотят работать напрямую с кодом попапа.

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

Подробные инструкции по вёрстке попапа в редакторе кода собраны на портале документации. В этой статье подробнее рассмотрим работу в визуальном редакторе.

Визуальный редактор​

Настроить текст и изменить внешний вид всплывающего окна в визуальном редакторе можно в разделе «Дизайн».

В этом разделе все параметры разбиты на категории:

• Копирайтинг — текст попапа. В любой текстовый элемент можно добавить переменную </>, чтобы динамически подгружать в попап данные профиля.

• Фон — выбор цвета фона и фонового изображения, а также фоновый цвет страницы браузера при затемнении.

• Рамка — границы всплывающего окна.

• Форма — конфигурация полей для ввода данных.

• Действия — текст кнопок и их CSS-стили.

• Кнопка «Закрыть» — внешний вид кнопки, с помощью которой пользователь может закрыть всплывающее окно.

• Изображение — на этой вкладке в попап добавляется изображение. Не все готовые шаблоны предоставляют такую возможность.

• Типографика — CSS-стили всех текстовых элементов.

Шаг 3. Настройка действий после заполнения формы попапа​

Перейдите в раздел «Действия». Здесь вы можете определить действия, которые надо выполнить после того, как пользователь заполнит и успешно отправит форму попапа:

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

• Отправка формы на email активирует отправку оповещений о заполнении формы на указанные email-адреса.

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

Шаг 4. Публикация попапа на сайте через Менеджер тегов

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

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

Введите имя тега. Тег — это фрагмент кода, который выполняется на сайте при определенных условиях. В данном случае тег — это показ попапа.

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

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

Чтобы задать более конкретные условия для появления попапа, используйте фильтр. Для этого в блоке «Условия активации триггера» выберите «Некоторые события» и настройте фильтр:

Сохраните тег. Заданное условие для показа попапа отобразится в разделе «Появление»:

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

Шаг 5. Анализ результатов​

Проанализировать статистику по попапам и просмотреть результаты заполнения формы вы можете в разделе «Аналитика». Для этого нажмите на иконку в окне редактирования попапа или в общем списке попапов:

В аналитике доступны две вкладки:

• Статистика попапа — общая сводка по попапу.

• Анализ результатов — статистика по заполнению полей в форме.

Остановимся подробнее на первой вкладке. Статистика попапа разделена на три блока: статистика за период, воронка конверсии и аналитические срезы.

Статистика за период отображает динамику изменения показателей за выбранный промежуток времени:

• Уникальные показы — количество показов попапа пользователям. Если попап показан пользователю несколько раз в рамках одной сессии, фиксируется только один уникальный показ.

• CTA — пока событие отправки формы не зарегистрировано, показатель отображает клики на любой элемент формы. Если форма была хотя бы один раз заполнена и отправлена, показатель отражает количество заполнений.

• CTA, % — (Уник. показы / CTA) * 100%.

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

• Попаданий в таргетинг — количество раз, когда были выполнены условия для появления попапа, заданные в триггере. При этом попап мог быть не показан пользователю из-за лимитов тега, заданных в блоках «Настройки активации» и «Ограничения».

• Уникальные показы — количество показов попапа пользователям.

• CTA — пока событие отправки формы не зарегистрировано, показатель отображает клики на любой элемент формы. Если форма была хотя бы один раз заполнена и отправлена, показатель отражает количество заполнений.

В аналитических срезах отчёта представлены показатели попапа, сгруппированные по следующим критериям:

• По часовому поясу;
• По городам;
• По странам;
• По языку (язык браузера);
• По ОС (операционная система на устройстве пользователя);
• По браузеру;
• По рефереру (URL страницы, на которой был показан попап);
• По UTM-меткам (content, medium, source, campaign, term).

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

Заключение

Всплывающие окна — один из наиболее распространенных инструментов digital-маркетинга. Без него невозможно представить ни одну маркетинговую стратегию в современном мире. Надеемся, что это руководство поможет вам в настройке попапов для реализации ваших идей!