Как создать встроенный блок
  • 01 Aug 2022
  • 2 минуты
  • Темная тема
    Светлая тема
  • формат pdf

Как создать встроенный блок

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

Создание встроенного блока на проекте

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

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

  1. Открываем нужную кампанию:

Снимок экрана 2021-03-25 в 18.09.55.png

  1. Нажимаем Добавить —> Встроенный блок:

Снимок экрана 2021-03-25 в 18.17.59.png

  1. Выбираем шаблон:
    Снимок экрана 2021-03-25 в 18.12.42.png

Настраиваем встроенный блок

4. Задаём название:
Снимок экрана 2021-03-25 в 18.20.53.png

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

Снимок экрана 2022-08-01 в 14.08.04

6. Внешний вид формы

Основные настройки:
Настраиваем внешний вид, расположение встроенного блока:
Снимок экрана 2021-03-25 в 18.33.14.png

Также на странице редактирования шаблона можно посмотреть отображения на разных гаджетах и редактировать HTML и CSS код встроенного блока, если это необходимо:
Снимок экрана 2021-03-25 в 18.37.09.png

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

Например, выводим форму только для женщин:
Снимок экрана 2021-01-28 в 12.54.33.png

Подробнее о таргетинге — в статье.

8. Действия после заполнения формы
Снимок экрана 2021-03-26 в 14.30.22.png

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

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

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

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

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

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

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

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

Как добавить блок на сайт

9. Место отображения

  • Встроить блок в селектор:

  • где показать блок — перед/после элемента, в начало/конец блока

    • селектор
      Снимок экрана 2021-01-28 в 12.57.29.png
  • Поместить блок в нужное место самостоятельно:
    копируем код и вставляем в нужное место в шаблоне сайта:

Снимок экрана 2021-02-03 в 14.19.01.png

Как выбрать селектор

CSS-селектор - это элемент, к которому мы собираемся применить определенные свойства CSS.

  1. Установите расширение Selector Gadget для Google Chrome. Оно значительно облегчит поиск нужного селектора.
  2. Перейдите на сайт, куда вы хотите поставить форму, выберите место на странице, где она должна располагаться.
  3. Активируйте Selector Gadget, поднесите курсор мыши к этому месту и скопируйте его селектор.

Существуют селекторы:

  • .someClass — соответствует любому элементу с классом "someClass";
  • #someid — соответствует элементу с идентификатором "someid".

Детально поиске нужного селектора в статье

Если для одной формы необходимо задать разные селекторы для ПК и мобильных устройств, то в поле выбора селектора нужно использовать:

.popmechanic-desktop [selector_for_desktop], .popmechanic-mobile [selector_for_mobile]

где вместо значений [selector_for_desktop] и [selector_for_mobile] нужно вставить соответствующие селекторы.

10. Тестируем отображение на сайте

Для проверки отображения нужно либо встроить на сайт div-блок, либо выбрать показ по селектору и указать нужный селектор (пункт 9 в инструкции выше).

  • Нажимаем на знак меню -> Проверить на сайте:
    Снимок экрана 2021-03-25 в 18.59.13.png

  • Вводим название сайта и получаем ссылку для перехода:
    Снимок экрана 2021-03-25 в 18.59.28.png

  • Проверяем отображение на сайте:
    Снимок экрана 2021-03-25 в 19.07.26.png

  1. Если блок соответствует требованиям, запускаем его:
    Снимок экрана 2021-03-25 в 19.15.58.png

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