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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Копирайтинг

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

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

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

Фон

На вкладке Фон доступны следующие параметры:

• backgroundColor — фоновый цвет попапа;
• backgroundImage URL — фоновое изображение попапа. Загрузите изображение в галерею платформы или укажите URL-адрес;
• overlay — фоновый цвет страницы браузера. При появлении попапа фон страницы затемняется, и с помощью палитры вы можете изменить цвет и прозрачность затемнения.

Рамка

На вкладке Рамка настраиваются границы всплывающего окна. Доступны следующие параметры:

• borderRadius – скругление границ попапа в пикселях. Можно задать скругление для каждого угла отдельно ;
• width — толщина границы;
• color — цвет границы.

Форма

На вкладке Форма настраиваются поля для ввода данных:

• задаётся валидация;
• указывается текст ошибки, который увидит пользователь, если введет некорректные данные;
• редактируются CSS-стили полей формы.

Валидация:

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

Стили окна:

• paddingVertical — отступ между кнопкой и нижней границей попапа;
• paddingHorizontal — отступ между полями и левой границей попапа;
• width — ширина попапа;
• fieldsGap — расстояние между полями формы, в т.ч. между полем и кнопкой;
• borderWidth — ширина границы полей для ввода;
• borderColor — цвет границы полей для ввода;
• borderRadius — скругление границ полей для ввода. Можно задать скругление для каждого угла отдельно .

Стили поля с типом input:

• inputPaddingVertical — отступ placeholder-текста от верхней и нижней границы поля для ввода;
• inputPaddingHorizontal — отступ placeholder-текста от левой границы поля для ввода;
• inputFontSize — размер шрифта placeholder-текста;
• inputBackgroundColor — фоновый цвет поля для ввода;
• inputColor — цвет текста, который пользователь вводит в поле;
• inputHoverColor — цвет границы поля для ввода при наведении курсора;
• inputActiveColor — цвет границы поля для ввода при нажатии кнопкой мыши.

Стили поля с типом checkbox:

• checkboxSize — размер шрифта чекбокса;
• checkboxLabelFormatting — форматирование текста чекбокса.

Стили сообщения об ошибке:

• errorColor — цвет сообщения об ошибке;
• errorFontSize — размер шрифта в сообщении об ошибке;
• inputErrorBorderColor — цвет границы поля для ввода при появлении сообщения об ошибке;
• inputErrorBackgroundColor — фоновый цвет поля для ввода при появлении сообщения об ошибке.

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

Действия

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

• text — текст кнопки для отправки формы;
• textFormatting — форматирование текста в кнопке;
• borderRadius — скругление границ кнопки. Можно задать скругление для каждого угла отдельно ;
• backgroundColor — фоновый цвет кнопки;
• hoverBackgroundColor — фоновый цвет кнопки при наведении;
• color — цвет текста в кнопке;
• fontSize — размер текста в кнопке;
• paddingVertical — отступ текста кнопки от верхней и нижней границы;
• paddingHorizontal — отступ текста кнопки от правой и левой границы.

Кнопка 'Закрыть'

На этой вкладке выбирается внешний вид кнопки, с помощью которой пользователь может закрыть всплывающее окно. Параметр — closeButton.

Изображение

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

• image URL — URL-адрес изображения. Доступна загрузка изображения из галереи платформы ;
• width — ширина изображения в пикселях. Высота меняется пропорционально заданной ширине.

Типографика

На вкладке Типографика вы можете изменить CSS-стили всех текстовых элементов:

Категория	Параметр	Описание
Общий шрифт	fontFamily	Семейство шрифта, которое используется во всех текстовых элементах попапа.
Заголовок	titleAlign	Выравнивание заголовка (по левому краю, по центру, по правому краю)
	titleFontSize	Размер шрифта в заголовке
	titleFormatting	Форматирование текста в заголовке (подчеркивание, курсив, жирный, перечеркнутый)
	titleColor	Цвет текста в заголовке
Основной текст	textFontSize	Размер шрифта в основном тексте попапа
	textAlign	Выравнивание основного текста (по левому краю, по центру, по правому краю)
	textFormatting	Форматирование основного текста (подчеркивание, курсив, жирный, перечеркнутый)
	textColor	Цвет основного текста
Лейбл	labelFontSize	Размер шрифта в лейбле поля
	labelFormatting	Форматирование текста в лейбле (подчеркивание, курсив, жирный, перечеркнутый)
	labelColor	Цвет лейбла

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

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

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

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

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

• Импорт профилей позволяет загрузить данные пользователя, заполнившего форму, в одну или несколько баз;
• Отправка формы на 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 базы данных" — базы данных, в которых необходимо искать профиль.

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

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