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

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

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

Вводный текст

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

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

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

список.png

  1. Нажмите на «Создать кампанию» -> «Встроенный блок»:

создать-встр.png

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

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

  1. Выберите шаблон:

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

  1. Укажите сайт:

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

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

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

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

В разделе «Встроенный блок» нажмите «Изменить», затем — «Редактировать»:

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

Основные настройки:
Настройте внешний вид, расположение встроенного блока:

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

Также на странице редактирования шаблона можно посмотреть отображения на разных гаджетах и редактировать HTML и CSS код встроенного блока, если это необходимо:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    • селектор
      Снимок экрана 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] нужно вставить соответствующие селекторы.

12. Проверьте отображение на сайте

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

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

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

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

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

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