Блог

← Усі статті

Як дебажити теги GTM — повний гайд з усунення помилок

1 квітня 2026

TL;DR: Щоб дебажити теги GTM, використовуйте Preview mode для запуску Tag Assistant, перевіряйте часову шкалу подій на спрацьовані/неспрацьовані теги, порівнюйте умови тригерів зі значеннями змінних та використовуйте консоль браузера разом із GA4 DebugView для повної валідації. GTM Event Helper показує, які саме теги спрацьовують на будь-якому елементі — без Preview mode.

Тег, який не спрацьовує — або спрацьовує, коли не повинен — одна з найдратівливіших проблем в аналітиці. Ви налаштували тригер, сконфігурували тег та опублікували контейнер. Але дані так і не з'являються в GA4. Або, що гірше, з'являються двічі.

Дебаг Google Tag Manager потребує системного підходу. Цей гайд охоплює всі інструменти та техніки: вбудований Preview mode GTM, Tag Assistant, команди консолі браузера, GA4 DebugView та стратегії для найскладніших проблем — дублювання спрацювання та баги лише на мобільних.

Як працює Preview mode у GTM?

Preview mode — це основний інструмент дебагу GTM. Коли ви натискаєте Preview у верхньому правому кутку робочого простору GTM, він відкриває Tag Assistant у новій вкладці та підключає його до вашого сайту через дебаг-сесію.

Ось що відбувається під капотом:

  1. GTM додає спеціальний параметр gtm_debug до URL вашого сайту
  2. Контейнер GTM завантажується в режимі дебагу, надсилаючи детальну інформацію на панель Tag Assistant
  3. Кожна подія dataLayer, обчислення змінних та виконання тегів логується в реальному часі
  4. Тільки ваша сесія браузера бачить дебаг-версію — реальні користувачі не зачеплені

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

Якщо Preview mode не підключається, перевірте, чи ваш браузер не блокує сторонні cookies. Tag Assistant покладається на cookies для підтримки дебаг-сесії між GTM та вашим сайтом.

Як використовувати Tag Assistant для дебагу тегів?

Tag Assistant показує часову шкалу подій на лівій панелі. Кожна подія (Page View, Click, DOM Ready тощо) показує, які теги спрацювали, а які — ні. Ось як використовувати його ефективно:

  1. Оберіть подію на часовій шкалі (наприклад, "Click" після натискання кнопки на сторінці)
  2. Перевірте розділ Tags Fired — ваш тег має бути тут, якщо він спрацював
  3. Перевірте Tags Not Fired — якщо ваш тег тут, натисніть на нього, щоб побачити, які умови тригера не виконались
  4. Перейдіть на вкладку Variables, щоб побачити значення змінних, зафіксовані GTM для цієї події
  5. Використовуйте вкладку Data Layer для перегляду необробленого dataLayer push

Найкорисніший вид — розбивка умов тригера. Коли тег не спрацьовує, Tag Assistant показує кожну умову з зеленою позначкою (виконана) або червоним хрестиком (не виконана). Це вказує точно, яку умову потрібно виправити — зазвичай це змінна, що не містить очікуваного значення.

Як перевірити, чи тег спрацював правильно?

Тег у розділі "Tags Fired" не гарантує, що дані надійшли коректно. Потрібно перевірити весь ланцюг: тег спрацював → мережевий запит надіслано → дані отримані кінцевою точкою.

Крок 1: Перевірте Tag Assistant. Підтвердьте, що тег у "Tags Fired" для правильної події. Натисніть на тег, щоб побачити його конфігурацію — назву події, параметри, Measurement ID.

Крок 2: Перевірте вкладку Network. Відкрийте Chrome DevTools (F12) → вкладка Network. Фільтруйте за collect для GA4, conversion для Google Ads або відповідним доменом пікселя для Meta/TikTok. Ви маєте побачити вихідний запит із даними вашої події в параметрах.

Крок 3: Перевірте пункт призначення. Для GA4 відкрийте звіти Realtime або DebugView. Для Google Ads перевірте звіт Conversions (є затримка). Для Meta використовуйте інструмент Test Events у Events Manager.

Якщо тег спрацював, але мережевий запит відсутній, типові причини — блокувальники реклами, заголовки Content Security Policy або неправильний Measurement ID / pixel ID, що тихо відкидає дані.

Як дебажити умови тригерів, що не збігаються?

Коли тригер не спрацьовує, проблема майже завжди — невідповідність між встановленою умовою та фактичним значенням змінної. Ось систематичний підхід:

1. Перевірте значення змінної в Tag Assistant. Перейдіть до події на часовій шкалі, натисніть вкладку Variables та знайдіть змінну, що використовується в умові тригера. Порівняйте фактичне значення з очікуваним.

2. Типові невідповідності:

3. Протестуйте умову в консолі. Для CSS-селекторів: document.querySelectorAll('.your-selector'). Для значень dataLayer: dataLayer.filter(e => e.event === 'your_event'). Це підтверджує, чи дані взагалі існують на сторінці.

Як використовувати консоль браузера для дебагу GTM?

Консоль браузера — ваш запасний інструмент, коли Tag Assistant не дає достатньо інформації. Ці команди працюють у DevTools будь-якого браузера:

Перегляд dataLayer:

// Переглянути всі записи dataLayer
dataLayer

// Відфільтрувати конкретну подію
dataLayer.filter(e => e.event === 'purchase')

// Моніторити нові пуші в реальному часі
dataLayer.push = function(original) {
  return function() {
    console.log('dataLayer push:', arguments[0]);
    return original.apply(this, arguments);
  };
}(dataLayer.push);

Перевірити, чи GTM завантажився:

// Повертає true, якщо контейнер GTM завантажено
google_tag_manager ? 'GTM loaded' : 'GTM not found'

// Перевірити конкретний контейнер
google_tag_manager['GTM-XXXXXX']

Тестування CSS-селекторів:

// Порахувати збіги
document.querySelectorAll('.btn-cta').length

// Підсвітити знайдені елементи
document.querySelectorAll('.btn-cta').forEach(
  el => el.style.outline = '3px solid red'
)

Моніторинг мережевих запитів: У вкладці Network фільтруйте за google-analytics.com/g/collect для подій GA4 або googleads.g.doubleclick.net для конверсій Google Ads. Параметри кожного запиту показують назву події та значення параметрів.

Як дебажити події GA4 через DebugView?

GA4 DebugView показує події з дебаг-сесій майже в реальному часі (протягом секунд, порівняно зі звітами Realtime, які можуть відставати на 30+ секунд). Щоб увімкнути його:

Варіант 1: Preview mode GTM. Коли ви використовуєте Preview mode GTM, GA4 автоматично розпізнає дебаг-сесію та направляє події до DebugView. Додаткове налаштування не потрібне.

Варіант 2: Розширення GA Debugger. Встановіть розширення GA Debugger для Chrome. Коли увімкнене, воно додає debug_mode=true до всіх запитів GA4, що надсилає події до DebugView.

Варіант 3: Параметр debug_mode. У тезі GA4 Configuration в GTM додайте поле debug_mode зі значенням true. Не забудьте видалити його перед публікацією на продакшн.

В GA4 перейдіть до Admin → DebugView. Ви побачите потік подій із мітками часу. Натисніть на будь-яку подію, щоб переглянути її параметри. DebugView особливо корисний для перевірки:

DebugView показує лише події з увімкненим debug_mode. Якщо ви не бачите жодних подій, переконайтеся, що використовуєте Preview mode або маєте активне розширення GA Debugger.

Як усунути проблему тегів, що спрацьовують двічі?

Дублювання тегів — поширена та дорога проблема: вони завищують кількість подій GA4, подвоюють конверсії в Google Ads та можуть спричинити подвійні списання в e-commerce трекінгу. Ось найчастіші причини:

1. Контейнер GTM встановлений двічі. Перевірте вихідний код сторінки на дублювання скриптів gtm.js. Це трапляється, коли GTM встановлено і в темі/шаблоні, і через плагін (WordPress цим славиться). Кожний екземпляр контейнера запускає всі теги незалежно.

2. Тригер занадто широкий. Тригер, встановлений на "All Pages", на сайті з клієнтською маршрутизацією (React, Next.js, Vue) спрацює при кожному віртуальному перегляді сторінки. У поєднанні з подією History Change ви можете отримати дві події Page View на одну навігацію. Використовуйте тип тригера "Page View" (а не "All Pages + History Change"), якщо вам не потрібні обидва.

3. Спливання подій запускає тригер кілька разів. Якщо у вас вкладені клікабельні елементи (кнопка всередині клікабельної картки), один клік може створити кілька подій Click. У Tag Assistant ви побачите дві події Click на часовій шкалі. Виправте це, звузивши CSS-селектор або додавши умову виключення батьківського/дочірнього елемента.

4. Тег має кілька тригерів. У GTM, якщо тег має два тригери і обидва спрацьовують на одну подію, тег спрацьовує один раз (тригери об'єднуються через OR). Але якщо ви випадково створили два подібні тригери з дещо різними умовами, і обидва збігаються з однією подією, тег спрацює двічі. Перевірте список тригерів тегу.

Діагностика: У Tag Assistant порахуйте, скільки разів ваш тег з'являється в "Tags Fired" серед послідовних подій. У вкладці Network порахуйте дубльовані запити до кінцевої точки аналітики. У GA4 DebugView перевірте наявність однакових подій підряд.

Як дебажити теги на мобільних пристроях?

Дебаг на мобільних складніший, оскільки неможливо запустити Preview mode GTM безпосередньо в мобільному браузері. Ось ваші варіанти:

Варіант 1: Chrome Remote Debugging (Android). Підключіть Android-телефон через USB, увімкніть USB debugging та відкрийте chrome://inspect у десктопному Chrome. Ви отримаєте повний доступ до DevTools вкладок Chrome на телефоні — включаючи консоль, мережу та можливість перевіряти dataLayer.

Варіант 2: Safari Web Inspector (iOS). Підключіть iPhone через USB, увімкніть Web Inspector у Settings → Safari → Advanced та відкрийте Safari на Mac. Перейдіть до меню Develop → [Ваш iPhone] для інспекції вкладок Safari.

Варіант 3: Charles Proxy або Fiddler. Налаштуйте проксі на комп'ютері та сконфігуруйте телефон для маршрутизації трафіку через нього. Це дозволяє бачити всі мережеві запити з телефону, включаючи виклики GA4 collect та запити пікселів. Корисно, коли неможливо підключитися через USB.

Варіант 4: GA4 DebugView з debug_mode. Додайте debug_mode: true як параметр у тегу GA4 Configuration, опублікуйте тестову версію та браузіть на телефоні. Події з'являться в GA4 DebugView незалежно від пристрою. Не забудьте видалити параметр debug_mode перед публікацією на продакшн.

Специфічні для мобільних проблеми: touch-події спрацьовують інакше за click-події, тригери залежні від viewport (відсотки scroll depth відрізняються на мобільних), та вбудовані блокувальники реклами в мобільних браузерах (Samsung Internet, Brave), що блокують запити аналітики.

Як використовувати вбудовану систему звітності про помилки GTM?

GTM має менш відому функцію звітності про помилки, що перехоплює JavaScript-помилки в тегах Custom HTML та змінних Custom JavaScript. Коли помилка виникає всередині тегу, GTM перехоплює її та логує як подію gtm.pageError у dataLayer.

Щоб моніторити ці помилки:

  1. Створіть тригер: Custom Event → gtm.pageError
  2. Створіть змінні для захоплення деталей помилки: Data Layer Variable → gtm.errorMessage, gtm.errorUrl, gtm.errorLineNumber
  3. Створіть тег GA4 Event з назвою події gtm_error та передайте змінні помилок як параметри
  4. Прикріпіть тригер та опублікуйте

Тепер кожна JavaScript-помилка у ваших тегах GTM фіксується в GA4. Перевіряйте звіт Events на подію gtm_error, щоб знайти зламані теги.

Крім того, Container Notifications GTM (іконка дзвіночка в робочому просторі) показує попередження про невикористані змінні, теги без тригерів та тригери, що посилаються на видалені змінні. Переглядайте їх регулярно — вони часто вказують на дрейф конфігурації, що спричиняє тихі збої.

Які найпоширеніші помилки при дебагу GTM?

Ці помилки витрачають години. Уникайте їх:

1. Дебаг опублікованої версії замість чорнової. Preview mode показує ваші неопубліковані зміни. Якщо ви опублікували зламану версію та виправили її в робочому просторі, Preview mode покаже виправлення — але реальні користувачі все ще бачать зламану версію. Завжди публікуйте після підтвердження виправлення в Preview mode.

2. Забули очистити Preview-сесію. Старі Preview-сесії можуть заважати новим. Якщо Tag Assistant показує застарілі дані або не підключається, натисніть "End Preview" у GTM та розпочніть нову сесію.

3. Тестування з увімкненим блокувальником реклами. Блокувальники реклами (uBlock Origin, AdBlock Plus, вбудований блокувальник Brave) блокують запити GA4, Meta Pixel, а іноді навіть сам контейнер GTM. Ваші теги спрацьовують правильно, але дані не доходять до кінцевої точки. Вимкніть блокувальники під час тестування або використовуйте вікно інкогніто без розширень.

4. Не перевіряєте область видимості змінних. Деякі змінні (як-от URL-змінні) повертають різні значення на різних сторінках. Якщо ви тестуєте на головній сторінці, але тригер для сторінки оформлення замовлення — значення змінних не збіжаться. Завжди тестуйте на тій сторінці, де тег має спрацювати.

5. Ігнорування послідовності тегів. Якщо Тег A залежить від даних, встановлених Тегом B (наприклад, тег GA4 Config має спрацювати перед тегами GA4 Event), використовуйте функцію Tag Sequencing GTM для примусового порядку. Без неї теги спрацьовують у непередбачуваному порядку, і залежний тег може виконатися до свого попередника.

6. Припущення, що dataLayer push був успішним. Те, що ваш код викликає dataLayer.push(), не означає, що дані надійшли коректно. Перевірте dataLayer у консолі — шукайте помилки в назві події, відсутні властивості або значення undefined, що вказують на недоступність даних у момент push.

Чи є швидший спосіб дебажити теги GTM?

Стандартний процес дебагу — відкрити Preview mode, переключити вкладки, поклікати, перевірити Tag Assistant, переглянути змінні, верифікувати в GA4 — ретельний, але повільний. Кожне перемикання між сайтом та інтерфейсом GTM додає тертя, особливо при усуненні помилок кількох тегів.

GTM Event Helper дає миттєву видимість того, що відбувається на будь-якому елементі:

  1. Натисніть на будь-який елемент на сторінці, щоб побачити його CSS-селектори, атрибути та DOM-контекст
  2. Побачте, які тригери GTM збігаються з цим елементом — ще до їх створення
  3. Створіть теги та тригери безпосередньо з контексту елемента через GTM API
  4. Отримайте миттєвий зворотний зв'язок про стабільність селектора, щоб не витрачати час на дебаг селекторів, що зламаються при наступному деплої

Замість стрибання між Preview mode та сайтом ви отримуєте контекст дебагу прямо там, де він потрібен — на самій сторінці.

Дебажте швидше — бачте які саме теги спрацьовують на кожному елементі.

Встановити GTM Event Helper

Зовнішні ресурси

Пов'язані статті

← Усі статті · Головна · Політика конфіденційності · Контакти