Тригери

Створення автоматичних попапів, оверлеїв та панелей сповіщень на основі правил поведінки відвідувачів

​

Огляд

Вкладка Triggers дозволяє створювати автоматичні дії, які спрацьовують на основі поведінки відвідувачів. Коли відвідувач відповідає конкретним умовам — час на сторінці, глибина прокрутки, UTM-джерело, тип пристрою тощо — тригер показує модальне вікно, тост-сповіщення або перенаправляє на URL. Тригери — потужний спосіб залучення відвідувачів у потрібний момент без програмування.

​

Список тригерів

Таблиця тригерів показує всі визначені тригери з ключовими метриками:

Колонка	Опис
Name	Назва тригера
Type	Тип дії — Modal (модальне вікно по центру), Toast (кутове сповіщення) або Redirect (перенаправлення на URL)
Conditions	Підсумок умов спрацювання
Fires	Загальна кількість активацій
Status	Активний або неактивний
Actions	Редагувати або видалити тригер

---

​

Створення тригера

Натисніть Create Trigger, щоб відкрити редактор тригерів. Редактор має дві вкладки: Content для візуального контенту та Settings для правил поведінки.

---

​

Вкладка Content

Вкладка Content — це візуальний блоковий редактор, де ви створюєте контент тригера. Кожен тригер складається з контентних блоків, які ви додаєте, впорядковуєте та стилізуєте.

​

Додавання блоків

Натисніть кнопку + Add Block, щоб відкрити меню вибору блоків. Доступні типи блоків:

Блок	Опис
Image	Додайте зображення — завантажте файл або вставте URL. Чудово для фото продуктів, банерів або іконок.
Heading	Великий текст для заголовків. Підтримує вирівнювання тексту (ліворуч або по центру).
Text	Основний текст з форматуванням. Використовуйте для описів, пропозицій або інструкцій.
Feature List	Маркований список з іконками-галочками — ідеально для переліку переваг, функцій або включених елементів.
Input Field	Однорядкове текстове поле для збору даних (ім’я, email, телефон).
Textarea	Багаторядкове текстове поле для довших відповідей (повідомлення, відгуки).
Button	Кнопка з налаштовуваним текстом, кольором та дією (посилання, закриття або відправлення даних форми).
Promo Code	Стилізований блок промокоду з кнопкою копіювання. Відвідувачі натискають, щоб скопіювати код у буфер обміну.
QR Code	Вставляє QR-код кампанії безпосередньо в тригер. Відвідувачі сканують його телефоном для продовження на мобільному — з повною атрибуцією кампанії. Детальніше у розділі Кампанії — QR-код.
Divider	Горизонтальна лінія для візуального розділення секцій.

​

Налаштування блоків

Кожен тип блоку має власні редаговані властивості. Натисніть на блок, щоб вибрати та налаштувати:

Image:

Налаштування	Опис
URL	URL-адреса зображення
Alt Text	Альтернативний текст для доступності
Border Radius	Заокруглення кутів у пікселях (за замовчуванням: 0)

Heading:

Налаштування	Опис
Text	Вміст заголовка
Align	Left (за замовчуванням) або Center

Text:

Налаштування	Опис
HTML Content	Форматований текст — підтримує <b>, <i>, <u>, <a>, списки та <br>

Feature List:

Налаштування	Опис
Items	Динамічний список функцій. Кожен елемент має іконку (емодзі), заголовок та текст опису. Натисніть «Add Item», щоб додати більше.

Input Field:

Налаштування	Опис
Key	Назва поля форми (наприклад, email, phone)
Type	Text, Email, Phone або Number
Label	Мітка поля, що відображається над полем вводу
Placeholder	Текст-підказка всередині поля
Required	Чи повинно поле бути заповнене перед відправленням

Textarea:

Налаштування	Опис
Key	Назва поля форми
Rows	Кількість видимих рядків тексту (1–10, за замовчуванням: 3)
Label	Мітка поля
Placeholder	Текст-підказка
Required	Чи повинно поле бути заповнене

Button:

Налаштування	Опис
Label	Текст кнопки
Variant	Primary (суцільний акцентний колір), Secondary (легкий відтінок) або Outline (прозорий з обрамленням)
Action	Close (закрити тригер), Open Link (перейти за URL), Submit Form (відправити дані форми) або Copy Value (скопіювати текст у буфер обміну)
Value	URL для посилань або текст для дії копіювання

Promo Code:

Налаштування	Опис
Code	Текст промокоду (наприклад, SPRING20)
Label	Необов’язкова мітка над кодом

QR Code:

Налаштування	Опис
QR Data	URL або текст для кодування. Натисніть «Create QR» для генерації.
Size	Розмір QR-коду в пікселях (за замовчуванням: 160)

Divider: Без налаштувань — рендерить горизонтальну лінію-розділювач.

​

Стиль тригера

Контейнер тригера має глобальні налаштування стилю, які застосовуються до всього попапу/тосту:

Налаштування	Опис
Background Color	Фон контейнера (за замовчуванням: #ffffff)
Text Color	Стандартний колір тексту для всіх блоків (за замовчуванням: #1a1a1a)
Accent Color	Колір для кнопок, іконок функцій та кнопки копіювання промокоду (за замовчуванням: #4680ff)
Border Radius	Заокруглення кутів всього тригера в пікселях (за замовчуванням: 16)
Position	Для тост-тригерів: top-right, top-left, bottom-right або bottom-left. Для модальних вікон: по центру з темним фоном.

​

Приклади контенту

Попап з привітальною знижкою

• Heading: «Отримайте 10% знижки на перше замовлення»
• Text: «Підпишіться на розсилку та отримайте ексклюзивний промокод.»
• Input Field: Email
• Button: «Отримати знижку» (дія відправлення)
• Promo Code: Відкривається після відправлення форми

Пропозиція при виході

• Image: Фото товару
• Heading: «Зачекайте! Не пропустіть це.»
• Text: «Безкоштовна доставка від замовлень понад 1500 грн — лише сьогодні.»
• Button: «За покупками» (посилання на магазин)
• Button: «Ні, дякую» (дія закриття)

QR-код для продовження на мобільному

• Heading: «Продовжіть на телефоні»
• Text: «Відскануйте QR-код, щоб поспілкуватися з AI-агентом на мобільному.»
• QR Code: QR-код кампанії з UTM-трекінгом
• Text: «Або натисніть кнопку чату нижче.»

Анонс нової функції

• Image: Скріншот функції
• Heading: «Нове: AI-рекомендації»
• Feature List: 3-4 ключові переваги
• Button: «Дізнатися більше» (посилання на сторінку функції)
• Divider
• Text: Дрібний шрифт з дисклеймером

---

​

Вкладка Settings

Вкладка Settings контролює коли, як часто та кому показується тригер.

​

Умови

Умови визначають правила, які повинні бути виконані для спрацювання тригера. Ви можете додати кілька умов та обрати режим логіки: AND (всі умови повинні бути true) або OR (достатньо будь-якої умови) для активації тригера.

Умова	Оператор	Опис
Time on page (seconds)	>=, <=, =	Спрацювати після X секунд на поточній сторінці. Приклад: показати попап після 30 секунд читання.
Pages visited	>=, <=, =	Спрацювати після перегляду X сторінок у сесії. Приклад: показати пропозицію після 3+ сторінок.
Scroll depth (%)	>=, <=, =	Спрацювати при прокрутці за відсоток сторінки. Приклад: показати CTA після 70% прокрутки.
UTM Source	=, contains	Спрацювати лише для відвідувачів з конкретного джерела. Приклад: показати акцію лише для відвідувачів з google.
UTM Medium	=, contains	Спрацювати лише для конкретного каналу. Приклад: тригер лише для cpc (платного) трафіку.
UTM Campaign	=, contains	Спрацювати лише для відвідувачів з конкретної кампанії. Приклад: показати сезонний банер лише для кампанії summer-sale.
Referral ID	=, !=	Спрацювати на основі параметра rvl_ref. Приклад: показати привітання партнера для конкретного реферала.
Referrer contains	contains	Спрацювати на основі URL рефералу. Приклад: показати порівняння для відвідувачів із сайту конкурента.
Page URL	=, contains, starts_with, matches	Спрацювати лише на конкретних сторінках. Використовуйте matches для regex-патернів. Приклад: показати попап з цінами лише на /pricing.
Device type	=	Спрацювати лише на Desktop, Mobile або Tablet. Приклад: показати банер завантаження додатку лише на мобільному.
Event fired	=	Спрацювати після конкретної трекінгової події. Приклад: показати крос-сел попап після події add_to_cart.
Day of week (0=Sun)	=, in	Спрацювати лише у конкретні дні. Приклад: показати вихідні знижки у суботу (6) та неділю (0).
Hour range [from, to]	between	Спрацювати лише у конкретні години. Приклад: показати «Зателефонуйте нам» лише у робочий час 9-18.

​

Приклади умов

Залучений читач

Показати попап розсилки для відвідувачів, які активно читають:

Умова	Оператор	Значення
Time on page	>=	30
Scroll depth	>=	50
Device type	=	desktop

Пропозиція для платного трафіку

Показати спеціальну знижку для відвідувачів Google Ads на сторінці цін:

Умова	Оператор	Значення
UTM Source	=	google
UTM Medium	=	cpc
Page URL	contains	/pricing

Покинутий кошик

Показати нагадування після події додавання в кошик з затримкою:

Умова	Оператор	Значення
Event fired	=	add_to_cart
Time on page	>=	60
Pages visited	>=	2

Лише робочі години

Показати «Зателефонуйте нам» лише у робочі години в будні:

Умова	Оператор	Значення
Hour range	between	[9, 18]
Day of week	in	[1, 2, 3, 4, 5]
Device type	=	desktop

​

Частота (Frequency)

Контролює як часто тригер показується одному відвідувачу:

Опція	Опис
Once per session	Показати один раз протягом поточної сесії браузерної вкладки. Тригер не з’явиться навіть після перезавантаження чи переходу на іншу сторінку — тільки закриття вкладки скидає його.
Once per day	Показати раз на календарний день. Відвідувач не побачить його знову до завтра, незалежно від кількості сесій сьогодні.
Once per visitor (ever)	Показати лише один раз — назавжди. Після того як відвідувач побачив тригер, він більше ніколи не з’явиться (відстежується через токен браузера). Ідеально для одноразових оголошень.
Every visit	Показувати при кожній сесії. Тригер спрацьовує кожного разу при виконанні умов. Використовуйте обережно.

Для більшості випадків Once per session або Once per visitor — правильний вибір. «Every visit» може дратувати — використовуйте лише для критичної, термінової інформації, як-от повідомлення про технічні роботи або термінові акції.

​

Розклад (Schedule)

За бажанням обмежте тригер конкретним діапазоном дат та часу:

Поле	Опис
Start At	Дата та час активації тригера. До цього моменту тригер не спрацює, навіть якщо умови виконані.
End At	Дата та час зупинки тригера. Після цього моменту тригер автоматично деактивується.

Обидва поля необов’язкові:

• Лише початок — тригер активується на дату початку та працює необмежено
• Лише кінець — тригер працює одразу і зупиняється на дату кінця
• Обидва — тригер працює лише у вказаному вікні
• Жоден — тригер працює поки увімкнений

Сценарії використання розкладу:

Сценарій	Початок	Кінець
Попап Чорної п’ятниці	29 лист, 00:00	2 груд, 23:59
Новорічний промо-банер	25 груд, 00:00	5 січ, 23:59
Анонс запуску продукту	15 бер, 10:00	22 бер, 23:59
Повідомлення про техроботи	—	1 квіт, 06:00

---

​

Як працюють тригери

Коли скрипт трекера завантажується на вашому сайті, він отримує активні визначення тригерів та оцінює їх у фоновому режимі:

1. Завантаження активних тригерів

   Трекер отримує активні визначення тригерів з сервера. Сервер фільтрує за розкладом (дати початку/кінця) та статусом активності перед відправленням на клієнт.

2. Перевірка частоти

   Кожні 2 секунди трекер перевіряє налаштування частоти кожного тригера. Якщо відвідувач вже бачив тригер (на основі localStorage або sessionStorage), тригер пропускається.

3. Оцінка умов

   Для тригерів, що пройшли перевірку частоти, трекер оцінює всі умови — час на сторінці, глибину прокрутки, UTM-параметри, тип пристрою, відстежені події тощо. Умови використовують логіку AND або OR залежно від налаштувань.

4. Відображення тригера

   Контент тригера (модальне вікно або тост) рендериться на сторінці всередині Shadow DOM з налаштованим стилем та анімацією. Активація записується як подія trigger_shown. Для тригерів перенаправлення відвідувач переходить на цільову URL-адресу.

5. Взаємодія відвідувача

   Відвідувач може взаємодіяти з тригером — натискати кнопки, заповнювати поля, копіювати промокоди, сканувати QR-коди або закривати його. Кожна взаємодія відстежується як окрема подія (trigger_clicked, trigger_dismissed, trigger_promo_copied).

Тригери рендеряться всередині власного контейнера Shadow DOM, тому їхні стилі повністю ізольовані від вашого сайту. Жодних CSS-конфліктів.

---

​

Інтеграція тригерів та подій

Тригери автоматично створюють трекінгові події. Кожна активація тригера записується як подія trigger_shown з ID тригера та типом дії. Ви можете:

• Бачити активність тригерів у діаграмі Trigger Activity на Dashboard
• Переглядати активації тригерів у таблиці Campaign Performance
• Використовувати умову event_fired для ланцюжків тригерів — наприклад, показати Тригер Б лише після того як Тригер А був побачений
• Поєднувати з Кастомними подіями для складних потоків

Використовуйте умову Event fired для створення багатокрокових послідовностей. Наприклад: Тригер 1 показує тізер через 10 секунд. Тригер 2 показує повну пропозицію лише якщо відвідувач натиснув кнопку Тригера 1 (відстежується як кастомна подія).