Как настроить событие в 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}}) — удобный старт, но хрупкий в production: изменили класс или текст кнопки при редизайне — трекинг тихо сломался, и никто не заметил.

Надёжный подход — 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 — проверить схему события перед отправкой