Как создать попап
  • 11 Jan 2024
  • 3 минуты
  • Темная тема
    Светлая тема
  • формат pdf

Как создать попап

  • Темная тема
    Светлая тема
  • формат pdf

Article Summary

Как добавлять формы в сервис Mindbox

Перейдите в раздел Кампании -> Список кампаний:

список.png

Нажмите на «Создать кампанию» -> «Попап»:

создать-попап.png

Выберите папку и нажмите «Создать»:

Снимок экрана 2023-01-23 в 00.09.52.png

Для работы с данными из корзины и посещенных страниц требуется полная интеграция:

нужно выполнить настройки по инструкции: https://developers.mindbox.ru/page/рекомендации-на-сайт

Выбор шаблона

Затем выбираем шаблон в зависимости от механики. С какой целью всплывает поп-ап?

  • Собрать email;
  • Показать баннер;
  • Собрать телефоны;
  • Пригласить в соц.сети;
  • Провести опрос.

Снимок экрана 2020-12-27 в 15.32.50.png

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

После выбора шаблона укажите сайт:

выбрать сайт.png

Редактирование шаблона

В разделе "Попап" нажмите "Изменить", затем - "Редактировать":

редактировать попап.png

Так выглядит окно редактирования шаблона:

Снимок экрана 2021-01-21 в 16.26.35.png

Здесь можно:

  1. Редактировать расположение поп-апа на сайте;
  2. Проверить как поп-ап будет выглядеть на сайте;
  3. Увидеть как поп-ап будет отображаться на разных устройствах;
  4. Настроить цвет фона, иконок, размеры рамки и полей ввода и все остальное для поп-апа. Для каждой выбранной формы это поле позволяет настроить свои параметры такие как таймер, политика конфиденциальности, шрифты;

Снимок экрана 2021-01-20 в 19.54.49.png

Снимок экрана 2020-12-27 в 15.48.59.png

Снимок экрана 2021-01-20 в 19.56.53.png

Снимок экрана 2020-12-27 в 15.46.13.png

  1. Выполнить настройку поп-апа в HTML-коде;
  2. Скрыть поле “Настройки”, чтобы увидеть форму в целиком;
  3. Сохранить настройки для формы;
  4. Настроить главный экран и экран после выполнения клиентом требуемого действия;
  5. Написать по вопросам работы редактора в чат поддержки Mindbox;
  6. Протестировать форму на сайте.

Таргетинг

По фильтру выберите кому и при каких условиях показывать поп-ап. Можно заранее настроить сегмент клиентов в Mindbox и выводить или не выводить форму для этих клиентов.

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

Снимок экрана 2021-01-22 в 12.43.24.png

Общие настройки

Далее переходим в “Общие настройки”. Здесь указываем:

  • Сайт;
  • Дни недели для показа формы;
  • Частоту всплывания;
  • Является ли форма приоритетной.

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

Снимок экрана 2022-08-01 в 17.48.01.png

Условие всплывания

Далее указываем условия всплывания формы:

  • уходит ли клиент со страницы,
  • при проведении какого времени на странице,
  • по количеству посещенных страниц,
  • при определенном действии на сайте.

Например, так будет выглядеть форма для показа клиенту, который посетил 2 страницы сайта за все время.

Снимок экрана 2021-01-22 в 12.40.12.png

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

Действия после заполнения формы клиентом

При добавлении попапа через наш интерфейс не требуется заводить операции.

Снимок экрана 2021-03-26 в 14.30.22.png

  • Создать нового клиента

    • Тип данных - в какое поле клиента в Mindbox вписываем данные;
    • Поле формы - откуда из формы забираем данные для записи;
    • Управление подписками - подписываем на канал и тематику.
  • Редактировать существующего

    • Тип данных - в какое поле вписываем данные. Редактировать можно пол, зону и публичные дополнительные поля.
    • поле формы - откуда из формы забираем данные для записи.

Дополнительные настройки

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

  • Передавать события в Google Analytics при просмотре, заполнении и клике в форме
    Для настройки интеграции с GA следуйте инструкции.

  • Webhook
    Настраиваем вызов вебхука:

    • ключ дополнительного поля - переменная для передачи данных;
    • значение дополнительного поля - значение, полученное из формы. Описания полей формы можно найти выше в разделе создания/редактирования клиента и в разделе “Дополнительные поля” при редактировании внешнего вида формы.
  • Вызывать пользовательский JS
    Вставляем код, который должен отрабатывать при отрисовке, показе или закрытии формы или выполнении целевого действия.

Например, так будет выглядеть настройка по созданию клиента с указанием имени, емайла и с подпиской в канале емайл на тематику “Спортивные новости”.

Снимок экрана 2021-03-22 в 14.23.34.png

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

И дополнительные настройки:

  • Передавать события в Google Analytics при просмотре, заполнении и клике в форме
  • Webhook
  • Вызывать пользовательский JS

Снимок экрана 2021-01-20 в 20.21.05.png

Как протестировать форму на сайте

Нажимаем “Проверить на сайте”. Вставляем ссылку на сайт и переходим по ссылке:

Снимок экрана 2023-01-23 в 01.40.09.png

И ее можно будет увидеть на своем сайте:

Снимок экрана 2021-01-20 в 19.52.50.png

Попапы и блоки — первый шаг автоматизации маркетинга. Подключайте новые каналы коммуникации на базе CDP

Чтобы клонировать попап, нажимаем на соответствующую кнопку:

копировать-попап.png

Клонировать можно и в другие кампании.

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


Была ли эта статья полезной?