Как создать встроенный блок
Создание встроенного блока на проекте
Для работы с данными из корзины и посещенных страниц требуется полная интеграция по инструкции.
- Перейдите в раздел Кампании → Список кампаний:
- Нажмите на «Создать кампанию» → «Встроенный блок»:
- Выберите папку и нажмите «Создать»:
- Выберите шаблон:
- Укажите сайт:
Настраиваем встроенный блок
6. Задайте название:
7. Внешний вид формы
В разделе «Встроенный блок» нажмите «Изменить», затем — «Редактировать»:
Основные настройки:
Настройте внешний вид, расположение встроенного блока:
Также на странице редактирования шаблона можно посмотреть отображения на разных гаджетах и редактировать HTML и CSS код встроенного блока, если это необходимо:
8. Таргетинг
Укажите, кому и при каких условиях показываем блок. Можно ограничить выборку сегментом, источником перехода и т.д.
Например, выводим форму только для женщин:
Подробнее о таргетинге — в статье.
9. Общие настройки:
10. Действия после заполнения формы клиентом
В разделе задается, что нужно сделать с полученными в форме данными: пополнить базу, передать в аналитику, вызвать пользовательскую операцию. Набор и наличие действий зависит от особенностей выбранного шаблона.
Подробнее — в статье.
Как добавить блок на сайт
11. Место отображения
- Встроить блок в селектор:
- где показать блок — перед/после элемента, в начало/конец блока
- селектор
- Поместить блок в нужное место самостоятельно:
копируем код и вставляем в нужное место в шаблоне сайта:
Как выбрать селектор
CSS-селектор - это элемент, к которому мы собираемся применить определенные свойства CSS.
- Установите расширение Selector Gadget для Google Chrome. Оно значительно облегчит поиск нужного селектора.
- Перейдите на сайт, куда вы хотите поставить форму, выберите место на странице, где она должна располагаться.
- Активируйте 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 в инструкции выше).
- Нажмите “Проверить на сайте”. Вставьте ссылку на сайт:
- Перейдите по ссылке:
- Если блок соответствует требованиям, запустите его:
