Збірник рецептів тригерів і тегів GTM: 4 готові рецепти

Більшість налаштувань GTM застрягають на тих самих кількох кейсах: відстежити клік на кнопку, зловити глибину скролу, зафіксувати відправлення форми. Не потрібно щоразу винаходити структуру тригера з нуля - усі вони йдуть за тим самим надійним патерном. Це збірник із чотирма найпоширенішими комбінаціями тригер+тег, готовими до побудови прямо у вашому контейнері.

Рецепт 1: відстежити клік на кнопку

Спочатку в Змінних увімкніть вбудовані змінні "Click Text" і "Click Classes" у розділі Кліки: за замовчуванням вони вимкнені. Створіть новий тригер: тип "Just Links", якщо це справжнє посилання, чи "All Elements" для кнопки, яка не є тегом anchor. Встановіть спрацювання на "Some Clicks" і додайте умову, що зіставляє Click Text чи Click Classes з конкретною кнопкою, яку ви таргетуєте.

Trigger type: Click - All Elements
Fires on: Some Clicks
Condition: Click Classes  contains  cta-button-primary

Прикріпіть цей тригер до тега GA4 Event з назвою події на кшталт cta_click і передайте змінну Click Text як параметр події, щоб у звітах було видно, на яку саме кнопку клікнули, а не просто те, що десь стався клік.

Рецепт 2: відстежити глибину скролу

У GTM є вбудований тип тригера Scroll Depth - кастомний код не потрібен. Створіть тригер типу "Scroll Depth" і встановіть відсотки вертикального скролу на потрібних порогах. 25/50/75/90 - поширений набір за замовчуванням, який дає корисну воронку того, як далеко люди реально дочитують.

Trigger type: Scroll Depth
Vertical Scroll Percentages: 25, 50, 75, 90
This trigger fires on: All Pages

Увімкніть вбудовану змінну "Scroll Depth Threshold", щоб передавати досягнутий відсоток як параметр події. Один тригер, що спрацьовує чотири рази з різними значеннями параметра, корисніший за чотири окремі тригери.

Рецепт 3: відстежити відправлення форм

Вбудований тригер Form Submission у GTM слухає нативні події відправлення HTML-форми, але багато сучасних форм (на React, деякі плагіни-конструктори форм) перехоплюють нативне відправлення, і воно ніколи не спрацьовує. Спершу протестуйте в GTM Preview. Якщо вбудований тригер цього не ловить, перейдіть на тригер Click на самій кнопці відправлення - це надійніша заміна.

Trigger type: Form Submission
This trigger fires on: Some Forms
Condition: Form ID  equals  contact-form-main
Enable "Wait for Tags": Yes (if the form redirects immediately after submit)

Увімкнення "Wait for Tags" важливе саме тоді, коли форма перенаправляє на сторінку подяки одразу після відправлення. Без цього сторінка може перейти далі ще до того, як ваш тег відстеження реально спрацює, і конверсія тихо загубиться.

Рецепт 4: відстежити взаємодію з відео

Конкретно для вбудованих YouTube-відео у GTM є тригер "YouTube Video", який не потребує жодного кастомного налаштування: він автоматично слухає API вбудованого плеєра. Для самостійно розміщеного HTML5-відео знадобиться той самий тип тригера, налаштований на елементи HTML5 video, - GTM додав нативну підтримку цього поряд із тригером YouTube.

Trigger type: YouTube Video
Capture: Start, Complete, Progress
Progress Range: Percentages
Percentages Thresholds: 25, 50, 75

Перевірка кожного рецепту через режим Preview

Перед публікацією будь-якої зміни контейнера натисніть Preview у GTM. Це відкриє ваш сайт, підключений до панелі дебагу, яка показує кожен тег, що спрацьовує, значення кожної змінної й кожен тригер, який активувався чи ні під час кожної взаємодії. Протестуйте реальну дію - клік, скрол, відправлення форми - і підтвердьте, що очікуваний тег спрацював з очікуваними значеннями в панелі Summary перед публікацією в живий контейнер.

Поширені помилки

• Публікація без попереднього тестування в Preview. Умова тригера з друкарською помилкою в назві класу просто не спрацьовує - без жодного повідомлення про помилку, тег ніколи не запускається. Preview - єдиний спосіб зловити це до того, як воно коштуватиме вам тижнів відсутніх даних.
• Використання кліків "All Elements", коли "Just Links" було б точнішим. Тригери All Elements перевіряють кожен клік на сторінці за вашою умовою, а це більше навантаження на обробку й ширша поверхня для випадкового збігу, ніж потрібно.
• Забуте "Wait for Tags" на формах, що перенаправляють одразу. Це найпоширеніша причина, чому тег відправлення форми виглядає правильно налаштованим у Preview, але ніколи не спрацьовує на продакшені на реальній формі, яка швидко перенаправляє.

Часті запитання

Чи потрібно знати JavaScript для цих рецептів?

Ні, усі чотири використовують вбудовані типи тригерів і змінні GTM. Для налаштувань, показаних тут, не потрібен жоден кастомний тег HTML чи JavaScript.

Як знайти правильний CSS-клас чи ID для таргетингу?

Клацніть правою кнопкою на елементі у браузері й оберіть "Інспектувати". Атрибут класу чи ID, показаний в HTML, - це те, що ви вводите в поле умови тригера.

Чому мій тригер працює в Preview, але не на живому сайті?

Підтвердьте, що контейнер реально опубліковано після тестування. Зміни, перевірені в Preview, не стають активними, доки ви не натиснете Submit і Publish, - на диво поширений розрив між тестуванням і розгортанням.

Ці чотири рецепти покривають більшість потреб відстеження на типовому сайті, але контейнер з десятками тегів, накопичених за роки, часто має тригери, що конфліктують між собою, дублікати тегів чи мертве відстеження, яке ніхто давно не перевіряв. Якщо хочете, щоб ваш контейнер GTM проаудитували й почистили, чи щоб ці рецепти побудували правильно для вашого конкретного сайту, наша команда GTM Setup може це зробити.