Перейти к основному содержимому

Создание и публикация попапа

Шаг 1. Создание попапа​

1. Перейдите в раздел "Веб-слой" → "Попапы" и нажмите "+ Создать" в верхней части страницы:

2. Выберите тип попапа:

  • Модальное окно — всплывающее окно, которое появляется в центре экрана. Оно привлекает внимание пользователя, так как затемняет фон браузера. Обычно используется для сбора email-адресов.

  • Плавающая панель — настраиваемая панель, которая располагается в верхней или в нижней части страницы. Остаётся видимой на экране даже при прокрутке страницы. Подходит для информирования клиентов о новостях или о лимитированных предложениях.

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

  • Полноэкранный — всплывающее окно, которое занимает весь экран браузера. Это гарантирует, что посетители не пропустят представленную информацию. Однако использовать полноэкранные окна следует осторожно, так как они могут быть восприняты как навязчивая реклама и вызвать недовольство у пользователей.

3. Выберите шаблон попапа. В платформе уже есть несколько готовых шаблонов. Используйте любой из них как основу. На следующем шаге вы сможете полностью изменить шаблон (задать текст, стили, настроить поля и т. д.) и подстроить его под свои задачи.

4. Задайте системное имя попапа и при необходимости добавьте описание. Также можно установить теги для быстрого поиска и назначить группы доступа .

Шаг 2. Изменение текста и дизайна​

Внешний вид попапа задается с помощью параметров. Параметры содержат текст, изображение и CSS-стили различных элементов. Например, параметр text содержит основной текст попапа, параметр backgroundColor — его фоновый цвет.

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

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

  • Изменение HTML, CSS и JavaScript в редакторе кода. Подходит для пользователей, которые хотят работать напрямую с кодом попапа.

Любые изменения, внесенные в редакторе, отображаются в окне предпросмотра в режиме реального времени. Чтобы проверить, как попап будет выглядеть на разных устройствах, используйте кнопки в левом верхнем углу:

Визуальный редактор​

Чтобы настроить текст и изменить внешний вид всплывающего окна в визуальном редакторе, перейдите в раздел "Дизайн". В этом разделе все параметры разбиты на категории:

На вкладке "Копирайтинг" задаётся текст попапа. Доступны следующие параметры:

  • title — заголовок;
  • text — основной текст;
  • <field>Label — лейбл для полей формы.
  • <field>Placeholder — текстовая подсказка внутри поля формы.

В любой текстовый элемент можно добавить переменную </>, чтобы динамически подтягивать в попап данные профиля. Описание переменных вы найдете в этой статье.

Редактор кода​

Чтобы напрямую работать с кодом, перейдите в раздел "Настройки". Рекомендации по вёрстке попапа в редакторе собраны в этой статье.

Шаг 3. Настройка действий после заполнения формы попапа​

Перейдите в раздел "Действия". Здесь вы можете определить действия, которые надо выполнить после того, как пользователь заполнит и успешно отправит форму попапа:

  • Импорт профилей позволяет загрузить данные пользователя, заполнившего форму, в одну или несколько баз;
  • Отправка формы на email активирует отправку оповещений о заполнении формы на указанные email-адреса.
подсказка

Действия после заполнения формы попапа аналогичны действиям после заполнения стандартной веб-формы. Подробнее про настройку действий вы можете прочитать в этой статье.

Шаг 4. Публикация попапа на сайте​

Доступно два механизма показа попапа на сайте:

  • Добавление скрипта на страницу сайта вручную — этот способ используется для прямого доступа к управлению попапом. Условия показа попапа необходимо реализовывать самостоятельно.

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

Добавление скрипта вручную​

1. Сохраните все заданные настройки и убедитесь, что статус попапа "Активен". Затем нажмите кнопку "Опубликовать":

2. В меню дополнительных действий нажмите . Справа появится окно, где необходимо выбрать базы для поиска профилей. Данные для матчинга можно передать вместе с запросом данных попапа с сервера. Если профиль с такими данными будет найден в одной из выбранных баз, его данные обновятся; в противном случае — в базе будет создан новый профиль.

предупреждение

Обратите внимание, что здесь вы задаете базы для поиска существующих профилей. Данные пользователей, заполнивших форму в попапе, будут импортироваться в базу, указанную в разделе "Действия".

3. Нажмите кнопку "Показать код" внизу страницы. Скопируйте код попапа и передайте его разработчикам, чтобы они добавили его на нужные страницы сайта.

Добавление скрипта через Менеджер тегов​

1. Сохраните попап с помощью кнопки на верхней панели. После этого раздел "Появление" станет активным. Перейдите в него.

2. Нажмите "Привязать", чтобы привязать попап к контейнеру в Менеджере тегов:

3. Выберите контейнер или создайте новый.

4. Введите имя тега. Тег — это фрагмент кода, который выполняется на сайте при определенных условиях. В данном случае тег — это показ попапа.

5. Задайте настройки активации и ограничения для срабатывания тега.

6. Выберите триггеры или создайте новый. Триггер — это условие выполнения тега. Триггеры отслеживают определенные события на сайте (например, клики или загрузка страницы) и активируют теги в ответ на эти события. В данном случае триггер запустит показ попапа.

7. Чтобы задать более конкретные условия для появления попапа, используйте фильтр. Для этого в блоке "Условия активации триггера" выберите "Некоторые события" и настройте фильтр:

8. Сохраните тег. Заданное условие для показа попапа отобразится в разделе "Появление":

9. Сохраните попап и опубликуйте.

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

подсказка

Больше инфомации о том, как создать контейнер и настроить теги, триггеры и переменные в Менеджере тегов, вы найдёте в этой статье.

Матчинг профилей​

Вы можете самостоятельно идентифицировать посетителя сайта и передать данные о нём в платформу с помощью метода acDataLayer.push(). Если система найдёт профиль в базе, то обновит его данные.

Пример:

acDataLayer.push({ matching:{ matching_mode: 'email', matching: { email: 'test@example.com', db_ids: [1,2] } }})
  • matching_mode — режим поиска профиля; может принимать значения: "email", "email_profile", "phone", "profile_id" или "custom".
  • matching — объект с одним или двумя параметрами: "поле для поиска": "значение поля" и "db_id": "ID базы данных" — базы данных, в которых необходимо искать профиль.

Шаг 5. Проанализируйте результаты​

Проанализировать статистику по попапам и просмотреть результаты заполнения формы вы можете в разделе "Аналитика". Для этого нажмите на иконку в окне редактирования попапа или в общем списке попапов:

Последнее обновление