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

Для создания попапа:

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

список.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

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

Таргетинг

По фильтру выберите кому и при каких условиях показывать поп-ап. Можно заранее настроить сегмент клиентов в 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](https://storage.yandexcloud.net/assets-help-mindbox-ru/images/%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202021-01-22%20%D0%B2%2012.40.12.png){height="" width=""}

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

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

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

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

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

Редактировать существующего

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

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

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

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

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

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

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

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

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

1. В Яндекс Метрике создайте цель «JavaScript-событие» по инструкции;
2. Скопируйте получившийся код цели для сайта в формате ym({номер счетчика}, 'reachGoal', '{идентификатор цели}'):

image.png
3. В «Действия после заполнения формы клиентом» выберите «Вызывать пользовательский JS»;
4. Добавьте скопированный код в подходящий раздел в зависимости от нужного времени вызова.

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

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

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

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

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

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