Як налаштувати подію в GTM: тег і тригер

Налаштувати подію в GTM — значить зв’язати тег, тригер і (за потребою) змінні так, щоб потрібна дія користувача автоматично відправляла дані в GA4 або інший інструмент. Конкретний приклад, який розберемо в цій статті: клік по CTA-кнопці → dataLayer.push → Custom Event Trigger → GA4 Event Tag.

Якщо ви ще не встановлювали GTM — спочатку прочитайте основи Google Tag Manager.

Три кити GTM: тег, тригер, змінна

Перш ніж налаштовувати конкретну подію, треба розуміти структуру GTM. Вся логіка будується на трьох сутностях:

Тег без тригера мовчить. Тригер без тега — умова в порожнечі. Вони завжди йдуть у парі.

Типи тегів

У GTM є вбудовані шаблони для найпопулярніших інструментів:

• GA4 Event — відправляє подію в Google Analytics 4
• GA4 Configuration — ініціалізує GA4 (базовий тег на всі сторінки)
• Google Ads Conversion Tracking — фіксує конверсії Google Ads
• Google Ads Remarketing — піксел ремаркетингу
• Custom HTML — довільний JavaScript-код

Крім вбудованих — Community Template Gallery з сотнями готових шаблонів: Meta Pixel, TikTok Pixel, LinkedIn Insight, Hotjar, Microsoft Clarity. Шукати через Tags → New → шукати за назвою.

Типи тригерів

Кожен тригер слухає певний тип події на сторінці:

Вбудовані змінні: увімкнути перед початком роботи

GTM має вбудовані змінні (Built-in Variables), але за замовчуванням більшість вимкнена. Перший крок після створення контейнера:

Variables → Built-in Variables → Configure

Увімкніть групи:

• Pages: Page URL, Page Hostname, Page Path
• Clicks: Click Element, Click Classes, Click ID, Click Target, Click URL, Click Text
• Forms: Form Element, Form Classes, Form ID, Form Target, Form Text, Form URL
• Scrolling: Scroll Depth Threshold, Scroll Depth Units, Scroll Direction
• Videos: Video Provider, Video Status, Video URL, Video Title, Video Duration, Video Current Time, Video Percent, Video Visible

Після цього вони доступні в тегах і тригерах як {{Page URL}}, {{Click Text}} тощо.

dataLayer: правильний підхід до передачі даних

DOM-скрапінг (зчитувати текст кнопки через {{Click Text}}) — зручний старт, але крихкий у продакшні: змінили клас або текст кнопки при редизайні — трекінг мовчки зламався і ніхто не помітив.

Надійний підхід — dataLayer.push: розробник додає один рядок у обробник події, а GTM ловить його через Custom Event Trigger.

Схема роботи:

Користувач натискає кнопку
        ↓
JavaScript-обробник виконує dataLayer.push({
  event: 'cta_clicked',
  button_id: 'hero-signup',
  section: 'homepage'
})
        ↓
GTM Custom Event Trigger слухає event = 'cta_clicked'
        ↓
Тег GA4 Event спрацьовує → відправляє подію в GA4

Переваги:

• Розробник явно визначає, що трекувати — немає «магії з DOM»
• При редизайні верстки push не ламається
• Можна передавати будь-які дані: ID товару, суму, назву категорії
• Відлагодження зрозуміле: видно push у консолі і в Tag Assistant

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

Розберемо повну послідовність від коду до GA4 події.

Крок 1: Розробник додає dataLayer.push

На кнопці «Зареєструватись» (або будь-якій CTA) розробник додає обробник:

// Варіант 1: HTML атрибут onclick
<button 
  onclick="window.dataLayer.push({
    event: 'cta_clicked',
    button_id: 'hero-signup',
    section: 'homepage'
  })">
  Зареєструватись
</button>

// Варіант 2: JavaScript EventListener (кращий стиль)
document.getElementById('hero-signup-btn').addEventListener('click', function() {
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    event: 'cta_clicked',
    button_id: 'hero-signup',
    section: 'homepage',
    button_text: this.innerText
  });
});

// Варіант 3: jQuery (якщо є на сайті)
$('#hero-signup-btn').on('click', function() {
  dataLayer.push({
    event: 'cta_clicked',
    button_id: 'hero-signup',
    section: 'homepage'
  });
});

Рядок window.dataLayer = window.dataLayer || []; — захист на випадок, якщо GTM ще не завантажився.

Назва події (event) — довільний рядок у snake_case. Рекомендую схему <об'єкт>_<дія>: cta_clicked, form_submitted, video_started, product_added.

Крок 2: Створити Custom Event Trigger у GTM

1. У GTM → Triggers → New
2. Назва тригера: Custom Event - cta_clicked
3. Trigger Configuration → клік на тип → Custom Event
4. Event Name: cta_clicked (рівно те, що в event при push)
5. Fire on: All Custom Events (або виберіть «Some Custom Events» і додайте умову — наприклад, тільки якщо {{DLV - section}} = homepage)
6. Зберегти

Крок 3: Створити Data Layer Variables (для передачі параметрів)

Щоб передати button_id і section у GA4, створіть дві Data Layer Variables:

Variables → New → Variable Configuration → Data Layer Variable

Змінна 1:

• Назва: DLV - button_id
• Data Layer Variable Name: button_id
• Data Layer Version: Version 2

Змінна 2:

• Назва: DLV - section
• Data Layer Variable Name: section
• Data Layer Version: Version 2

Тепер {{DLV - button_id}} і {{DLV - section}} доступні в тегах.

Крок 4: Створити GA4 Event Tag

1. Tags → New
2. Назва тега: GA4 Event - cta_clicked
3. Tag Configuration → Google Analytics: GA4 Event
4. Configuration Tag: виберіть ваш GA4 Configuration Tag (або введіть Measurement ID G-XXXXXXXXXX вручну)
5. Event Name: cta_clicked (або button_click — як назвали в GA4)
6. Event Parameters → Add Parameter:
   • Parameter Name: button_id | Value: {{DLV - button_id}}
   • Parameter Name: section | Value: {{DLV - section}}
7. Triggering → виберіть тригер Custom Event - cta_clicked
8. Зберегти

Крок 5: Перевірити в Preview Mode

GTM Preview — обов’язковий крок перед публікацією.

1. Натисніть Preview (кнопка у правому верхньому куті GTM)
2. У вікні Tag Assistant введіть URL вашого сайту → Connect
3. На сторінці відкриється debug-банер внизу; Tag Assistant — у новій вкладці
4. Натисніть кнопку (клікніть по CTA)
5. У Tag Assistant → Summary → з’явиться подія cta_clicked
6. Клікніть на подію → вкладка Tags: ваш тег GA4 Event - cta_clicked має бути у Fired (зелений)
7. Вкладка Variables: перевірте, що {{DLV - button_id}} = hero-signup, {{DLV - section}} = homepage
8. Вкладка Data Layer: видно повний push-об’єкт

Якщо тег у Not Fired (сірий) — перевірте назву події в тригері (вона має збігатися з event у push символ в символ, регістр має значення).

Крок 6: Опублікувати

1. Закрийте Preview
2. Submit → Create Version
3. Додайте опис: «GA4 Event tracking для CTA кнопок»
4. Publish

Після публікації конфігурація активна для всіх відвідувачів.

Перевірка в GA4 DebugView

Після публікації подію можна перевірити в GA4 → Admin → DebugView:

1. Відкрийте сайт у Chrome з розширенням Google Analytics Debugger (або ?_debug=1 у URL якщо налаштовано GA4 Debug Mode)
2. GA4 → Admin → DebugView → знайдіть свій пристрій
3. Клікніть по кнопці на сайті
4. У DebugView з’явиться подія cta_clicked з параметрами button_id і section

Якщо подія не з’являється в DebugView протягом 30 секунд — скоріш за все тег не спрацьовує. Повертайтесь до Preview Mode і шукайте помилку в тригері або тезі.

У звичайних звітах GA4 → Events нова подія з’явиться через 24-48 годин після першого зафіксованого хіту.

Типові помилки при налаштуванні подій у GTM

1. Назва події в тригері не збігається з push. cta_Clicked ≠ cta_clicked — GTM чутливий до регістру. Перевіряйте символ в символ.

2. Забули ввімкнути вбудовані змінні. Зробили тригер «All Clicks», а {{Click Text}} — порожній. Variables → Configure → увімкніть Clicks.

3. Тег спрацьовує двічі. Часто причина — і Click Trigger, і Custom Event Trigger прив’язані до одного тегу. Або Custom Event Trigger зі «All Custom Events» ловить події інших push’ів (наприклад, gtm.dom або pageview).

4. dataLayer.push до завантаження GTM. Якщо push відбувається у <head> до коду GTM — ініціалізуйте масив першим рядком: window.dataLayer = window.dataLayer || [];. GTM підхопить push ретроактивно при завантаженні.

5. Data Layer Variable Version 1 замість Version 2. В старих контейнерах GTM Version 1 — якщо значення порожнє, спробуйте змінити на Version 2 (або Auto-detect).

6. Перевірка тільки в Preview, без Submit. Після Preview зміни не публікуються автоматично — треба Submit. Класична ситуація: «у мене все працювало, але після релізу не трекується» — тому що зміни залишились у Preview-режимі.

7. Тег без GA4 Configuration Tag. GA4 Event Tag вимагає або прив’язаного Configuration Tag, або Measurement ID у полі. Якщо Configuration Tag не завантажився раніше — event не відправиться.

8. Забули позначити подію як Key Event у GA4. Якщо ціль трекінгу — конверсія, після того як подія з’явилась у GA4 → Events, відзначте її як Key Event (раніше «Conversion»): Events → знайдіть подію → тумблер «Mark as key event».

Альтернативний підхід: Click Trigger без dataLayer

Якщо розробника немає, а потрібно швидко відстежити клік — можна обійтися вбудованим Click Trigger:

1. Triggers → New → All Clicks (або Just Links для посилань)
2. Fire on: Some Clicks
3. Умова: Click ID equals hero-signup-btn (або Click Classes contains cta-button)
4. Прив’язати до GA4 Event Tag з Event Name button_click

Параметри передавати через вбудовані змінні: {{Click Text}}, {{Click ID}}, {{Click Classes}}, {{Page Path}}.

Коли це підходить:

• Прототип або A/B-тест, де точність не критична
• Статичні сайти без JS-обробників
• Нема доступу до коду для додавання push’ів

Коли обов’язково треба dataLayer:

• E-commerce: передавати item_id, ціну, кількість
• Авторизація: передавати user_type, plan
• Будь-де, де дані є тільки в JS, не у верстці

Що налаштовувати далі

Після того як базовий Custom Event Trigger працює, типові наступні кроки:

• Enhanced Ecommerce: відстеження view_item, add_to_cart, purchase з масивом items[] — окремий великий розділ
• Form tracking: Custom Event на form_submit з передачею ID форми і результату валідації
• Scroll depth: вбудований Scroll Depth Trigger → GA4 Event scroll з параметром percent_scrolled
• Video tracking: YouTube Video Trigger для відстеження video_start, video_complete
• Consent Mode v2: ланцюжок Default Consent → Banner → Update Consent (вимога для Google Ads у ЄС з березня 2024)

Всі ці налаштування живуть у тому ж GTM-контейнері і використовують ту ж логіку: тег + тригер + змінні.

Пов’язані матеріали

Розділ:

• GTM — всі статті

Глосарій:

• Тег — що це в GTM
• Тригер — що це в GTM
• dataLayer — структура і принципи
• Подія (Event) у GA4 і GTM

Інструменти:

• GA4 Event Builder — перевірити схему події перед відправкою