Кулінарна книга тригерів і тегів GTM: 4 готові рецепти

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

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

Спочатку в Змінних увімкніть вбудовані змінні "Click Text" і "Click Classes" у розділі Кліки, GTM постачає їх вимкненими за замовчуванням. Створіть новий тригер, тип "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 може це зробити.