Типи тригерів GTM — коли використовувати який
TL;DR: GTM пропонує 8 типів тригерів: Click (All Elements, Just Links), Form Submission, Element Visibility, Scroll Depth, Page View (3 підтипи), Custom Event, Timer та History Change. Використовуйте Click для кнопок/посилань, Visibility для відстеження показів, Custom Event для dataLayer-воркфлоу, Page View для тегів завантаження сторінки. GTM Event Helper обирає правильний тип тригера автоматично — просто клікніть на елемент.
Тригери — це "коли" Google Tag Manager. Кожен тег потребує щонайменше один тригер для спрацювання, і вибір неправильного типу тригера — одна з найпоширеніших причин, чому теги не працюють як очікувалося. Click-тригер на відправку форми, тригер Page View на SPA-сайті або тригер Visibility з неправильним порогом — кожний призводить до відсутніх або некоректних даних.
Цей гайд пояснює кожний тип тригера в GTM, коли використовувати кожний та підводні камені, на які натрапляють навіть досвідчені користувачі.
Що таке тригери GTM і як вони працюють?
Тригер — це умова, яка повідомляє GTM, коли запускати тег. Під капотом GTM слухає події браузера (кліки, завантаження сторінок, скрол, зміни DOM) та перевіряє ваші умови тригера щодо даних події. Коли всі умови збігаються, прикріплені теги виконуються.
Ключові концепції:
- Тип тригера визначає, яку подію браузера слухає GTM (клік, перегляд сторінки, скрол тощо)
- Умови спрацювання звужують тригер до конкретних елементів, сторінок або значень змінних
- Once per event / Once per page контролює, чи тригер спрацьовує повторно або лише один раз
- Тригери об'єднуються через OR — якщо тег має кілька тригерів, він спрацьовує, коли будь-який з них збігається (не всі)
GTM обчислює тригери в порядку подій: Container Loaded → DOM Ready → Window Loaded → потім взаємодії користувача (кліки, скрол, відправка форм). Розуміння цієї послідовності критично важливе для тегів, що залежать від завантаження інших тегів або скриптів.
Як працюють Click-тригери (All Elements vs Just Links)?
GTM має два типи click-тригерів, і різниця між ними важливіша, ніж здається.
Click — All Elements
Спрацьовує на будь-який клік будь-де на сторінці. Натиснутий елемент стає доступним через вбудовані змінні: Click Element, Click Classes, Click ID, Click Text, Click URL. Використовуйте для:
- Кнопок (
<button>) та елементів, що не є посиланнями - Кастомних UI-компонентів (вкладки, акордеони, перемикачі)
- Зображень, іконок та інтерактивних елементів
- Будь-якого елемента, що не є стандартним посиланням
<a>
Застосовуйте умови спрацювання, щоб не збігатися з кожним кліком на сторінці. Найпоширеніша умова: Click Element matches CSS selector з конкретним селектором для цільового елемента.
Click — Just Links
Спрацьовує лише при кліках на елементи <a>. Цей тип тригера додає дві функції, яких немає в All Elements:
- Wait for Tags — затримує навігацію за посиланням, поки тег не завершить виконання. Критично для відстеження зовнішніх посилань, де сторінка перейде далі до того, як GA4 надішле запит.
- Check Validation — спрацьовує лише якщо клік по посиланню дійсно призведе до навігації (враховує
event.preventDefault()). Запобігає хибним спрацюванням від скасованих JavaScript-посилань.
Що обрати: Використовуйте Just Links для відстеження зовнішніх посилань, завантажень файлів та будь-якого елемента <a>, де потрібна функція Wait for Tags. Використовуйте All Elements для всього іншого — кнопок, div, зображень, кастомних компонентів.
Як працюють тригери Form Submission?
Тригер Form Submission спрацьовує при відправці HTML-елемента <form>. GTM перехоплює подію submit форми та надає специфічні змінні форми: Form Element, Form Classes, Form ID, Form URL, Form Target та Form Text.
Wait for Tags: Як і Just Links, цей тригер має опцію "Wait for Tags", яка затримує відправку форми до завершення виконання тегів. Увімкніть це для стандартних HTML-форм, що перенаправляють при відправці — без цього сторінка перейде далі до того, як ваш тег GA4 надішле запит.
Check Validation: Коли увімкнено, тригер спрацьовує лише якщо форма пройшла нативну валідацію браузера (HTML5-атрибути required, зіставлення pattern). Це запобігає відстеженню невалідних спроб відправки.
Проблема AJAX: Сучасні форми часто використовують AJAX (fetch або XMLHttpRequest) замість традиційної HTML-відправки. AJAX-форми не створюють подію submit браузера таким чином, щоб GTM міг її перехопити. Для таких форм потрібен інший підхід:
- Використовуйте тригер Custom Event з dataLayer push із callback успішної відправки
- Використовуйте Custom HTML тег, що слухає JavaScript-обробник відправки форми
- Відстежуйте завантаження сторінки "Дякуємо" замість самої відправки форми
GTM Event Helper визначає, чи форма використовує стандартну HTML-відправку або AJAX. Для AJAX-форм він генерує відповідний тригер Custom Event з підходом через dataLayer push замість нативного тригера Form Submission.
Як працює тригер Element Visibility?
Тригер Element Visibility спрацьовує, коли конкретний елемент стає видимим у viewport браузера. GTM використовує Intersection Observer API (або polling-фолбек для старіших браузерів) для визначення, коли елемент потрапляє у видиму область.
Параметри конфігурації:
- Selection Method: ID або CSS Selector. CSS Selector гнучкіший і може націлюватися на кілька елементів.
- Minimum Percent Visible: Який відсоток елемента має бути видимим (1-100%). За замовчуванням 50%.
- When to fire: Once per page, Once per element або Every time an element appears on screen.
- Observe DOM changes: Увімкніть, якщо елемент додається на сторінку динамічно (наприклад, після AJAX-запиту або React-рендеру).
Типові випадки використання:
- Відстеження показів товарів (e-commerce-подія
view_item_list) - Підрахунок показів реклами (внутрішні промо)
- Залученість lazy-loaded контенту
- Видимість секцій для метрик залученості контентом
- Потрапляння відеоплеєра у viewport (тригер автовідтворення)
Примітка щодо продуктивності: Тригери Element Visibility з увімкненим "Observe DOM changes" додають MutationObserver на сторінку, що може вплинути на продуктивність, якщо DOM часто змінюється. Використовуйте цю опцію лише коли цільовий елемент додається динамічно.
Як працює тригер Scroll Depth?
Тригер Scroll Depth спрацьовує, коли користувач прокручує сторінку до заданої глибини. Можна налаштувати за відсотками (25%, 50%, 75%, 100%) або за пікселями (300px, 600px тощо).
Відсотки vs. пікселі: Відсотки адаптуються до довжини сторінки — 50% на короткій сторінці може бути 500px, тоді як 50% на довгому пості — 3000px. Пікселі дають абсолютні позиції. Використовуйте відсотки для загального відстеження залученості; пікселі — коли потрібно визначити скрол до конкретної секції.
Доступні змінні при спрацюванні тригера:
- Scroll Depth Threshold — поріг, який було перетнуто (наприклад, 25, 50, 75)
- Scroll Depth Units — "percent" або "pixels"
- Scroll Direction — "vertical" або "horizontal"
Типове налаштування: Створіть один тригер Scroll Depth з порогами 25%, 50%, 75% та 100%. Прикріпіть тег GA4 Event з назвою події scroll та передайте {{Scroll Depth Threshold}} як параметр. Це дасть повну картину залученості скролом у GA4.
Підводний камінь: GA4 має вбудовану подію скролу enhanced measurement, що спрацьовує при 90% глибини прокрутки. Якщо ви створите власний тригер скролу, можете отримати дублювання подій. Або вимкніть enhanced measurement подію скролу в GA4, або встановіть пороги кастомного тригера, уникаючи 90%.
Як працюють тригери Page View (Page View, DOM Ready, Window Loaded)?
GTM надає три підтипи тригерів Page View, кожний відповідає різному етапу завантаження сторінки:
Page View (Container Loaded)
Спрацьовує одразу після завантаження контейнера GTM — до повного парсингу DOM. Це найраніший доступний тригер. Використовуйте для:
- Тегів конфігурації GA4 (мають завантажуватися якомога раніше)
- Платформ управління згодою (consent)
- Будь-якого тегу, що має виконатися до рендерингу сторінки
DOM Ready
Спрацьовує, коли браузер завершив парсинг HTML та побудову DOM-дерева, але зовнішні ресурси (зображення, стилі, iframe) можуть ще завантажуватися. Еквівалент події DOMContentLoaded браузера. Використовуйте для:
- Тегів, що потребують доступу до DOM-елементів (Custom HTML теги, що запитують DOM)
- Скриптів, що модифікують контент сторінки
- Тегів, що залежать від готовності структури сторінки
Window Loaded
Спрацьовує, коли вся сторінка повністю завантажена — всі зображення, скрипти, стилі та iframe. Еквівалент події window.onload браузера. Використовуйте для:
- Тегів, що залежать від завантаження сторонніх скриптів
- Тегів вимірювання продуктивності
- Низькопріоритетних тегів, що не повинні конкурувати за пропускну здатність під час завантаження
Порядок спрацювання: Page View → DOM Ready → Window Loaded. Теги, прикріплені до тригерів Page View, завжди спрацьовують перед тегами DOM Ready, які завжди спрацьовують перед тегами Window Loaded. Використовуйте цей порядок для управління залежностями.
Як працюють тригери Custom Event?
Тригери Custom Event слухають конкретні назви подій, запушені в dataLayer. Коли ваш код (або інший тег) пушить подію в dataLayer, будь-який тригер Custom Event, що збігається з цією назвою події, спрацьовує.
// Пуш кастомної події в dataLayer
dataLayer.push({
event: 'video_complete',
video_title: 'Product Demo',
video_duration: 120
});
Тригер Custom Event для цього матиме назву події video_complete. Ви зможете отримати доступ до video_title та video_duration через Data Layer Variables.
Коли використовувати Custom Events:
- AJAX-відправка форм (пуш події в callback успішної відправки)
- Віртуальні перегляди сторінок у SPA
- E-commerce dataLayer-події (add_to_cart, purchase тощо)
- Будь-яка взаємодія, що не відповідає нативній події браузера
- Комунікація між тегами (Тег A пушить подію, Тег B спрацьовує на неї)
Regex-зіставлення: Поле назви події підтримує regex. Встановивши ecom_.*, ви збіжите з ecom_add_to_cart, ecom_purchase, ecom_view_item тощо. Це дозволяє використовувати один тригер для групи пов'язаних подій та розрізняти їх через Data Layer Variable в конфігурації тегу.
Як працюють тригери Timer та History Change?
Тригер Timer
Тригер Timer спрацьовує через заданий інтервал (у мілісекундах). Налаштуйте його з:
- Interval: Час між спрацюваннями в мілісекундах (наприклад, 30000 для 30 секунд)
- Limit: Максимальна кількість спрацювань (залиште порожнім для необмеженого)
- Conditions: URL сторінки або інші умови для обмеження роботи таймера
Випадки використання: відстеження часу на сторінці (спрацювання кожні 30 секунд для вимірювання залученості), відкладений запуск тегу (одноразове спрацювання через 10 секунд для користувачів, що залишаються на сторінці), та heartbeat-сигнали сесії.
Попередження: Тригери Timer продовжують працювати навіть коли користувач переключає вкладки. Браузер може дроселювати таймери на неактивних вкладках, спричиняючи непослідовні інтервали. Не покладайтеся на таймери для точного вимірювання часу — використовуйте їх для приблизних сигналів залученості.
Тригер History Change
Тригер History Change спрацьовує, коли URL браузера змінюється через History API (pushState або replaceState) або змінюється хеш URL. Це необхідно для SPA-додатків, побудованих на React, Vue, Angular або Next.js, де навігація відбувається без повного перезавантаження сторінки.
Доступні змінні:
- New History Fragment — хеш-частина нового URL
- New History State — об'єкт стану, переданий у pushState
- Old URL Fragment — попередній хеш
- Old URL State — попередній об'єкт стану
Відстеження переглядів сторінок SPA: Створіть тригер History Change без умов. Прикріпіть тег GA4 Event з назвою події page_view (або використовуйте тег GA4 Configuration з увімкненим "Send a page view event"). Це забезпечить, що кожна SPA-навігація надсилає page view до GA4.
Підводний камінь: Деякі SPA пушать кілька history-станів за одну навігацію (наприклад, ланцюг перенаправлень). Це може спричинити дублювання page view. Додайте умову перевірки, що {{Page URL}} дійсно змінився між history-подіями, або використовуйте Custom JavaScript variable для дебаунсингу тригера.
Як обрати правильний тригер для мого випадку?
Ось дерево рішень для найпоширеніших сценаріїв відстеження:
Відстеження кліків по кнопках: Click — All Elements з умовою CSS-селектора. Використовуйте Just Links лише якщо кнопка — це тег <a> і вам потрібен Wait for Tags.
Відстеження зовнішніх посилань: Click — Just Links з увімкненим "Wait for Tags". Фільтруйте за Click URL "does not contain" ваш домен.
Відстеження відправки форм: Тригер Form Submission, якщо форма використовує стандартну HTML-відправку. Тригер Custom Event з dataLayer push, якщо форма використовує AJAX.
Відстеження показів товарів: Тригер Element Visibility з CSS-селектором, що збігається з карточками товарів. Встановіть мінімальну видимість 50% та спрацювання "Once per element".
Відстеження залученості скролом: Тригер Scroll Depth з порогами відсотків (25%, 50%, 75%, 100%).
Відстеження переглядів сторінок SPA: Тригер History Change з подією GA4 page_view. Розгляньте додавання умов для запобігання подвійним спрацюванням.
Відстеження e-commerce подій: Тригери Custom Event, що збігаються з назвами подій dataLayer (add_to_cart, begin_checkout, purchase).
Запуск тегів при завантаженні сторінки: Page View для аналітики та consent-тегів. DOM Ready для тегів, що потребують доступу до DOM. Window Loaded для низькопріоритетних та performance-тегів.
Як працюють умови та фільтри тригерів?
Кожний тригер можна обмежити умовами спрацювання. Умови складаються зі змінної, оператора та значення. Кілька умов на одному тригері об'єднуються через AND — усі мають бути істинними для спрацювання.
Поширені оператори:
- equals / does not equal — точне зіставлення (чутливе до регістру)
- contains / does not contain — зіставлення підрядка
- starts with / ends with — зіставлення префікса/суфікса
- matches RegEx — повна підтримка regex для складних паттернів
- matches CSS selector — для Click Element, використовує нативний
element.matches() - less than / greater than — числове порівняння
Область видимості змінних: Умови можуть використовувати будь-яку змінну GTM — вбудовану (Page URL, Click Classes, Referrer) або користувацьку (Data Layer Variables, Custom JavaScript, Lookup Tables). Обирайте найбільш специфічну доступну змінну. Наприклад, використовуйте Page Path замість Page URL, коли не хочете, щоб параметри запиту впливали на зіставлення.
Тригери-виключення: Кожний тригер має опцію "Add Exception". Тригери-виключення блокують спрацювання батьківського тригера. Використовуйте виключення для виключення конкретних сторінок або умов без модифікації основного тригера. Наприклад: спрацювання на всіх сторінках окрім /admin/*.
Що таке групи тригерів і коли їх використовувати?
Група тригерів (Trigger Group) спрацьовує лише коли всі тригери всередині неї спрацювали щонайменше один раз протягом сесії сторінки. На відміну від звичайних тригерів (які об'єднуються через OR), тригери в групі об'єднуються через AND — кожний має спрацювати перед активацією групового тригера.
Приклад: Ви хочете запустити тег опитування лише для користувачів, які і прокрутили сторінку далі 75%, і провели щонайменше 30 секунд на сторінці. Створіть групу тригерів, що містить:
- Тригер Scroll Depth на 75%
- Тригер Timer на 30000мс (limit: 1)
Тег, прикріплений до цієї групи тригерів, спрацює лише коли обидві умови виконані — незалежно від того, яка відбулася першою.
Випадки використання:
- Кваліфікація залученого користувача (скрол + час + кількість сторінок)
- Відстеження багатокрокових конверсій (початок форми + завершення форми)
- Вимоги послідовних взаємодій (відео переглянуто + CTA видимий)
- Умовне завантаження тегів (згода надана + сторінка завантажена)
Обмеження: Групи тригерів скидаються при кожному завантаженні сторінки. Вони відстежують тригери лише в межах однієї сесії сторінки, не між сторінками. Для кросс-сторінкових умов використовуйте cookies, localStorage або Data Layer Variable, що зберігається між переглядами сторінок.
Які найпоширеніші помилки з тригерами?
Ці помилки спричиняють найбільше головного болю при дебагу. Уникайте їх, щоб заощадити години на усуненні проблем:
1. Використання Form Submission для AJAX-форм. Якщо форма не спричиняє навігацію або повне перезавантаження сторінки, тригер Form Submission не спрацює. Протестуйте, відправивши форму — якщо сторінка не оновлюється і не переходить, потрібен тригер Custom Event.
2. Забули увімкнути вбудовані змінні. GTM не активує змінні кліків чи форм за замовчуванням. Якщо ваша умова тригера посилається на Click ID, але він не увімкнений, умова обчислюється щодо undefined і ніколи не збігається. Перейдіть до Variables → Configure та увімкніть все, на що посилаєтесь.
3. Тригер All Pages на SPA. Тригер Page View, встановлений на "All Pages", спрацьовує один раз при початковому завантаженні сторінки — він не спрацьовує знову при навігації SPA до нового маршруту. Для наступних переглядів сторінок потрібен тригер History Change (або Custom Event від вашого роутера).
4. Click-тригер збігається з дочірніми елементами. Коли ви клікаєте на кнопку, що містить <span> або <svg>, Click Element — це внутрішній елемент, а не кнопка. Оператор "matches CSS selector" піднімається по DOM, але "equals" та "contains" для Click Classes чи Click ID — ні. Завжди використовуйте CSS-селекторне зіставлення для click-тригерів.
5. Тригер Scroll на коротких сторінках. Якщо ви встановили поріг 75%, але контент сторінки повністю вміщується у viewport (немає скролбару), тригер ніколи не спрацює, бо прокрутки не відбувається. Розгляньте використання Element Visibility замість цього для відстеження, чи користувачі досягли конкретних секцій.
6. Тригер Timer без ліміту. Тригер Timer без ліміту спрацьовує нескінченно кожні N мілісекунд. Якщо ви мали на увазі одноразове відкладене спрацювання, встановіть ліміт 1. Необмежені таймери генерують безперервні події, що завищують кількість подій GA4 та можуть досягти лімітів сесії.
7. Чутливість до регістру в назвах подій. dataLayer.push({ event: 'Purchase' }) не збіжиться з тригером Custom Event, встановленим на purchase. Зіставлення Custom Event у GTM чутливе до регістру. Стандартизуйте назви подій у нижньому регістрі, щоб уникнути цього.
8. Забагато тригерів-виключень. Тригери-виключення додають складності. Якщо тригер має п'ять виключень, розгляньте інвертування логіки — створіть тригер, що спрацьовує лише на потрібних сторінках, замість спрацювання всюди з виключенням конкретних сторінок.
Пропустіть налаштування тригера — GTM Event Helper обирає правильний автоматично.
Встановити GTM Event HelperЗовнішні ресурси
Пов'язані статті
- Як відстежувати кліки по кнопках у GTM без написання коду
- Як дебажити теги GTM — повний гайд з усунення помилок
- Як відстежувати AJAX-форми в GTM
- Найкращі практики CSS-селекторів для тригерів GTM
- Налаштування відстеження подій GA4 без коду
← Усі статті · Головна · Політика конфіденційності · Контакти