Перейти к основному содержимому
Документация для версии v73

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

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

Полный алгоритм создания и настройки попапа​

  • Шаг 1: Создание попапа
    Выбор типа попапа (модальное окно, плашка, всплывающее окно) и базового шаблона для быстрого старта

  • Шаг 2: Настройка контента и дизайна
    Работа с визуальным редактором: добавление текста, медиа, форм и изменение внешнего вида под бренд

  • Шаг 3: Настройка действий после отправки формы
    Отображение сообщения после заполнения формы, перенаправление пользователя и выбор формата уведомлений.

  • Шаг 4: Публикация и настройка показа
    Интеграция кода на сайт и настройка правил отображения (время, триггеры, целевая аудитория)

  • Шаг 5: Аналитика результатов
    Мониторинг ключевых метрик (конверсия, показы, клики) для оценки эффективности и принятия решений

Каждый из этих шагов мы подробно разберем ниже.

Создание попапа​

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

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

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

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

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

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

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

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

Настройка контента и дизайна​

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Настройка публикации и показа попапа​

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

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

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

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

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

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

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

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

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

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

Привязка к контейнеру​

Сохраните попап с помощью кнопки на верхней панели. После этого раздел "Появление" станет активным. Перейдите в него. Нажмите "Привязать", чтобы привязать попап к контейнеру в Менеджере тегов:

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

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

Настройка активации тега​

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

Настройка триггеров показа​

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

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

Публикация изменений​

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

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

подсказка

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

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

Вы можете самостоятельно идентифицировать посетителя сайта и передать данные о нём в платформу с помощью метода 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 базы данных" — базы данных, в которых необходимо искать профиль.

Аналитика и отслеживание результатов​

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

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