Як відслідковувати 404 і JavaScript-помилки на сайті через GTM і чому вам це потрібно робити на кожному сайті

Вайбкодинг змінив правила гри. Сьогодні запустити сайт можна за лічені години — без глибоких технічних знань, без команди розробників. AI-інструменти генерують код швидко, але не завжди правильно. І поки власник бізнесу радіє швидкому запуску, на сайті можуть бути помилки, про які ніхто не знає і через які бізнес втрачає потенційних клієнтів.

Користувач клікає на банер на головній сторінці, потрапляє на сторінку 404 і залишає сайт. Після кліку на кнопку «Надіслати» форма не надсилається, і на сторінці нічого не відбувається. Помилка в JavaScript ламає процес оформлення замовлення, але цього ніхто, крім самого користувача, не бачить.

Як дізнатися, що щось пішло не так? Є різні підходи: одні більше орієнтовані на розробників, а інші — на аналітиків. Серед останніх можна виділити два підходи:

1. Дивитися записи сесій у Microsoft Clarity, Hotjar, FullStory або аналогах — там можна чітко побачити, що робить користувач перед помилкою, але перегляд самих записів зазвичай займає багато часу, навіть із налаштованими фільтрами, які не в усіх сервісах запису сесій доступні для вирішення цього завдання.
2. Або можна відстежувати помилки через Google Tag Manager — це дасть змогу збирати кастомні події безпосередньо у звичних звітах GA4 та сегментувати аудиторію, щоб чітко оцінити, як саме технічні збої впливають на загальну конверсію та прибуток бізнесу. Саме про це ми й поговоримо сьогодні.

• Налаштування відстеження 404-сторінок у GTM
• Налаштування відстеження JavaScript-помилок у GTM
• Замість висновку

Налаштування відстеження 404-сторінок у GTM

Коли користувач потрапляє на неіснуючу сторінку, він найчастіше просто закриває сайт. Причин появи помилки 404 може бути багато: змінили структуру URL після редизайну, видалили сторінку, зовнішній сайт посилається на застарілу адресу, AI-асистенти та LLM, як-от ChatGPT, часто «галюцинують» і генерують користувачам вигадані, неіснуючі посилання. Крім того, 404-сторінки безпосередньо впливають на SEO. А який перший крок, якщо ми хочемо виправити всі «биті» URL? Правильно — зібрати їхній список.

Найпростіший спосіб — задати умову через заголовок сторінки. Більшість CMS і конструкторів сайтів автоматично присвоюють 404-сторінці характерний заголовок: «Page Not Found», «Сторінку не знайдено» або щось подібне.

Для цього:

1. Створіть нову кастомну змінну в блоці Variables → User-Defined Variables → New.

• Оберіть тип змінної JavaScript Variable («Змінна JavaScript»).
• У полі Global Variable Name вкажіть document.title.
• Назвіть змінну JSV - document.title та збережіть.

2. У GTM перейдіть у тригери та створіть тригер типу Перегляд сторінки (Page View).

• Задайте умову активації: змінна JSV - document.title дорівнює [ваш варіант заголовка].
• Дайте назву тригеру та збережіть його.

3. Перейдіть у Tags (Теги) → New.

• Оберіть тип тегу Google Analytics: GA4 Event.
• У полі Event Name напишіть назву події: error_404.
• У розділі Triggering оберіть наш тригер PV - error_404.
• Назвіть тег: GA4 - error_404 та збережіть.

Не забудьте опублікувати контейнер.

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

Налаштування відстеження JavaScript-помилок у GTM

JavaScript-помилки — це часто «невидимі» зламані елементи на сайті: кнопка, яка не реагує на клік; форма, яка не надсилається; скрипт, який завис, тощо. Їх відстеження особливо актуальне для сайтів, згенерованих за допомогою AI: вайбкодинг прискорює розробку, але згенерований код нерідко містить неочевидні помилки, які проявляються лише в реальних умовах використання. Користувач бачить, що «щось не працює», і йде, а ви навіть не знаєте, де шукати проблему.

Спочатку активуємо вбудовані змінні.

1. Перейдіть до розділу Variables («Змінні»).
2. У розділі Built-In Variables натисніть Configure.
3. Прокрутіть меню до самого низу, знайдіть блок Errors («Помилки») та поставте галочки навпроти трьох змінних:

• Error Message — текст помилки.
• Error URL — сторінка, на якій сталася помилка.
• Error Line — рядок коду, у якому виникла помилка.

4. Перейдіть до Triggers («Тригери») → New («Створити»).

• Оберіть тип тригера JavaScript Error («Помилка JavaScript»).
• Назвіть тригер та збережіть.

5. Перейдіть до Tags («Теги») → New. Оберіть тип тегу Google Analytics: GA4 Event.

• У полі Event Name вкажіть: error_javascript.
• У блоці Event Parameters додайте два параметри:
  • error_message → {{Error Line}}: {{Error Message}}
  • error_url → {{Error URL}}

• У розділі Triggering оберіть тригер із попереднього кроку. У моєму випадку — JSE - All.
• Назвіть тег GA4 - error_javascript та збережіть.

Не забудьте опублікувати контейнер.

На скриншоті нижче — приклад інформації, яку ви зможете збирати таким чином. Далі її можна передати розробнику або AI-агенту — цей варіант я б поки розглядав обережно — для подальшого виправлення:

Не забудьте створити відповідні кастомні параметри в GA4:

Замість висновку

А ще більше практичних хаків, нестандартних кейсів і корисних сценаріїв роботи з GTM я показую на курсі PRO GTM.

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