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

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

1. Перейдите в раздел Кампании:

2. Нажмите на «Создать кампанию» → «Персонализация» → «Встроенный блок»:

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

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

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

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

6. Задайте название:

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

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

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

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

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

Например, выводим форму только для женщин:

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

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

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

В разделе задается, что нужно сделать с полученными в форме данными: пополнить базу, передать в аналитику, вызвать пользовательскую операцию. Набор и наличие действий зависит от особенностей выбранного шаблона.

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

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

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

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

• Поместить блок в нужное место самостоятельно:
  копируем код и вставляем в нужное место в шаблоне сайта:

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

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 в инструкции выше).

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

• Перейдите по ссылке:

13. Если блок соответствует требованиям, запустите его: