У сучасній вебаналітиці Google Tag Manager (GTM) трансформувався з простого інструменту для маркетологів у критичний компонент інфраструктури даних. І щоб допомогти спільноті швидше знаходити відповіді на часті запитання щодо нього, я вирішив зібрати ці часті запитання та відповіді в цьому матеріалі.
Так, це збір того, що зазвичай не поєднують, але я не хочу генерувати десятки матеріалів на цю тему — хочеться мати один для всього. І щоб цей лінк завжди був поруч. Лінк, який я можу кинути і студентам курсів, і клієнтам, і колегам по ринку. Тому тут будуть і досить базові питання, які допоможуть краще зрозуміти інструмент новачкам, і досить глибокі технічні моменти.
Повний перелік запитань наданий нижче, і ви одразу можете клікнути на потрібне. Для зручності вони також розбиті на логічні блоки.
В цьому переліку багато різноманітних запитань, на деякі з них відповідь можна дати двома-трьома реченнями. Деякі потребують розгорнутої відповіді у вигляді окремого матеріалу. Там де це можливо - я даватиму відповідь прямо тут. Там де відповідь потребує детального огляду я буду давати коротку відповідь і посилання на детальний матеріал.
Ви можете бути впевнені, що кожне посилання, будь-то посилання на мої матеріали, чи на матеріали моїх колег з ринку аналітики варте вашої уваги і я повністю погоджуюсь з думками автора.
Загальні запитання і базові концепції
4. Чи можуть блокувальники реклами або інші розширення браузера блокувати Google Tag Manager?
5. Чи дозволяє використання GTM на проекті стати незалежними від розробників?
6. Чи дійсно GTM негативно впливає на швидкість завантаження сайту?
Особливості впровадження GTM на різних платформах
8. Як налаштувати відстеження на React/Vue/Angular, якщо сторінка не перезавантажується?
9. Чому консоль показує помилки “refused to load script” для GTM?
10. Чи підтримує GTM технологію AMP (Accelerated Mobile Pages)?
11. Як відстежувати користувачів через iFrame?
Діагностика та Troubleshooting
13. Чому вікно Preview Mode не з'єднується з сайтом (“Not Connected”)?
14. Моє налаштування не працює (мій івент не передається), як зрозуміти у чому проблема?
15. GTM показує “Tags Fired”, але даних в GA4/Facebook/{…} немає. Де вони?
17. Чому стандартний тригер “Form Submission” не реагує на мою форму?
18. Чому для перевірки налаштувань не потрібно кожного разу публікувати нову версію?
19. Як я можу перевірити, що код Менеджера тегів Google встановлений на сайті вірно?
Конфігурація Тригерів (Trigger Configuration)
21. Як правильно налаштувати Element Visibility тригер, щоб не “повісити” браузер?
22. Як запустити тег тільки після виконання декількох умов (наприклад, скрол 50% + час на сайті 30 сек)?
23. Як налаштувати таймер, щоб він не працював у фоновій вкладці?
24. Чому вбудований YouTube тригер не працює на моєму сайті?
25. Що таке gtm.js, gtm.dom, gtm.load?
27. Тригер «Усі сторінки» не працює. Чому?
Міграція та імпорт налаштувань
30. Чи можна перенести налаштування з одного контейнера в інший?
32. Як швидко скопіювати декілька тегів у інший контейнер?
Додаткові часті питання
33. Я хочу перевіряти CSS селектор на відповідність умовам через Lookup Table, але це не працює?
34. Чи можна запускати GTM до надання згоди користувачем?
35. Все працювало, а потім хтось щось зламав: як дізнатися, хто зламав контейнер і що саме було змінено?
36. Як я можу дізнатися більше про Менеджер тегів Google?
36. Яке значення мають правила іменування в GTM і чому вони важливі?
38. Чи можна використовувати один і той самий контейнер GTM на кількох сайтах?
39. Я надав доступ до GTM колезі/підряднику, а він його не бачить?
40. Чи зберігає Google Tag manager якісь дані про відвідувачів?
Якщо ви хочете покращити свої навички роботи з GTM, я рекомендую вам також ознайомитись з іншим моїм матеріалом - Топ-14 помилок у роботі з Google Tag Manager та як їх уникнути
Ну а для тих, хто хоче дізнатись про GTM все на максимально практичних задачах - чекаю на вас на курсі PRO GTM.
Загальні запитання і базові концепції
Розуміння механіки роботи GTM є тим, що відокремлює новачків від досвідчених спеціалістів. Тому не варто недооцінювати питання з цієї категорії.
1. Які переваги Менеджера тегів Google?
Зазвичай, коли мова йде про GTM, то чомусь основною перевагою називають можливість встановлення аналітичних чи маркетингових кодів без розробника. Але ця частина насправді досить спірна — детальніше про неї я буду говорити в запитанні 5. А от що точно дає GTM, так це збільшення незалежності маркетингового відділу від технічної команди і пришвидшення запуску маркетингових активностей. Детальніше про можливості GTM та старт роботи з ним можна почитати в матеріалі — Що таке Google Tag Manager, навіщо він потрібний і як його використовувати у бізнесі.
2. У чому полягає фундаментальна різниця між GTM та Google Analytics 4, і чи можна використовувати одне без іншого?
Якщо відповідати дуже коротко, то порівнювати такі інструменти, як GTM та GA4, взагалі не можна, оскільки це інструменти для різних задач, і зазвичай вам потрібні обидва.
GTM — це інструмент, який дозволяє вам додавати і запускати на сайті код без допомоги вашої команди розробки та значних технічних знань з вашої сторони. Зазвичай це код аналітичних чи маркетингових систем, але загалом є можливість додавати будь-який.
GA4 — це аналітична система, яка використовується для збору, відображення та аналізу даних про аудиторію вашого сайту, способи її залучення та способи її взаємодії з ним.
Тобто GTM не зберігає дані, а лише є інструментом, який допомагає вам передати дані з сайту до потрібної системи, наприклад до GA4. Саме так ці системи взаємодіють між собою.
З іншої сторони, через GTM можна підключати й інші аналітичні чи рекламні системи, наприклад Facebook Ads чи Amplitude. А код GA4 можна встановити на сайт і без використання GTM.
Причина, чому ж тоді найчастіше вам зустрічається ця пара саме разом, — у гнучкості їх взаємодії. Без GTM будь-яка зміна в логіці відстеження вимагатиме циклу розробки (IT deployment), тоді як GTM дозволяє маркетологам вносити зміни через вебінтерфейс.
3. Що таке Data Layer, чому не можна використовувати dataLayer = і чому він (Data Layer) зникає при перезавантаженні сторінки?
Це, напевно, одне з найскладніших запитань у цьому матеріалі, і відповідь на нього має бути досить обширна. Я спробую дати її спрощену версію тут, але якщо її не вистачить для вашого повного розуміння — рекомендую ознайомитись з цим матеріалом — Data Layer у Google Tag Manager.
Data Layer — це JavaScript-масив для обміну даними між сайтом і GTM. Думаю, ви розумієте, що існує безліч різних сайтів — як з точки зору контенту на них, так і з точки зору технологій, використаних при їх розробці. І тег-менеджеру якось потрібно з ними всіма знаходити спільну мову. Саме для цього і була придумана концепція рівня даних і dataLayer.
Далі я спеціально спрощую деякі технічні моменти, щоб у найпростішому вигляді донести суть. Уявіть собі Data Layer (рівень даних) як чергу з повідомлень, які летять в одну розмову. GTM прослуховує цей масив і реагує на кожне нове повідомлення (push). Кожного разу, при завантаженні на сторінці коду GTM, між вашим сайтом і тег-менеджером створюється чат для спілкування. Усі повідомлення, для відправки яких був використаний метод dataLayer.push(), будуть відправлені в цей чат. Якщо ж ви намагаєтесь використати інший спосіб, наприклад dataLayer =, — уявіть собі це як створення нового чату: сайт створив новий чат, але забув додати в нього GTM. Тому останній не бачить частину повідомлень і може працювати некоректно.
Насправді попередній приклад — це ще навіть не все, бо якщо вже повністю розкривати цю аналогію з чатом, то при використанні dataLayer = сайт не просто створив новий чат і не додав у нього GTM, а ще й видалив попередній. Але короткої суті це не змінює — у такій реалізації GTM не зможе працювати коректно.
Щодо останньої частини питання — “чому він (Data Layer) зникає при перезавантаженні сторінки”, — усе дуже просто. Я думаю, ви погодитесь, що історія спілкування вашого сайту з тег-менеджером у більшості випадків нікому не цікава. А оскільки новий чат створюється кожного разу при завантаженні GTM на сторінці, найлогічніше очищувати її в момент, коли користувач покидає сторінку.
Звісно, це лише спрощене пояснення процесу, але, надіюсь, воно допоможе вам краще зрозуміти, що відбувається за лаштунками роботи GTM.
4. Чи можуть блокувальники реклами або інші розширення браузера блокувати Google Tag Manager?
Так, більшість блокувальників блокують запит до googletagmanager.com, що зупиняє завантаження всього контейнера. У середньому це призводить до втрати близько 10–20% даних залежно від аудиторії сайту. Часто в інтернеті ви можете зустріти інформацію, що рішенням є перехід на Server-Side GTM з використанням власного домену (Custom Domain), що робить скрипт «першою стороною» (first-party) і часто дозволяє обійти блокування. Але це не зовсім так і є лише частковим вирішенням проблеми втрати даних. Водночас використання серверного тег-менеджера має свої інші переваги, детальніше про які я писав тут.
5. Чи дозволяє використання GTM на проєкті стати незалежними від розробників?
Свого часу я теж потрапив у пастку цього маркетингового позиціонування GTM, яке ходить по ринку. Але зараз, з огляду на свій досвід, я намагаюсь навчити своїх студентів і колег, що між фразами «Я можу налаштувати аналітику на проєкті без розробника за допомогою GTM» і «використання GTM на проєкті дозволяє стати незалежними від розробників» насправді є велика різниця.
Різниця, як завжди, в нюансах. Я дійсно можу налаштувати все через GTM без розробника. Але це — до першої зміни дизайну сайту, бо зі зміною дизайну дуже часто змінюються і CSS-селектори.
Чи означає це, що використання GTM не має сенсу? Звісно, відповідь — «ні».
На малих проєктах, які не мають або не можуть дозволити собі розробника, використання GTM дозволяє маркетологу/аналітику/PPC-спеціалісту самостійно встановити аналітичні коди. І навіть страх, що зміна дизайну може призвести до необхідності внесення правок у ці налаштування, не має вас лякати, оскільки це краще, ніж працювати без аналітики взагалі.
На більших проєктах, де є окрема команда розробки, в ідеальному світі маркетинговий спеціаліст, який працює з GTM, має співпрацювати з командою розробки сайту і використовувати можливості dataLayer для покращення точності трекінгу. За правильної співпраці це має зменшити навантаження на команду розробки, але водночас перекрити питання точності даних, яка в іншому випадку залежить від дизайну сайту. Як саме це має працювати, я пояснював у запитанні 3.
Резюмуючи, хоча GTM дійсно дозволяє вам закривати задачі без команди розробки, найкраще він розкривається тоді, коли, використовуючи його, ви співпрацюєте з командою розробки.
6. Чи дійсно GTM негативно впливає на швидкість завантаження сайту?
Оо, це запитання, яке я чую, мабуть, найчастіше. Особливо якщо взяти до уваги моє значне спілкування з SEO-командами. Коротка відповідь звучить як «це залежить». Але в більшості випадків це не є критичним впливом, і він точно компенсується перевагами використання GTM.
Перш ніж дати повну відповідь, я б хотів розібратись, чому взагалі з’являється це запитання і які аргументи у спеціалістів, які починають цей батл.
Починається все зазвичай з того, що якийсь спеціаліст побачив, що сайт завантажується повільно, використав такий інструмент, як PageSpeed Insights чи його аналог, і там побачив, що підвантаження бібліотеки GTM значно впливає на швидкість завантаження сторінки. Далі зазвичай код GTM видаляють з коду сайту і показують скріни «до і після», і як стало добре без GTM. І наче як усе логічно: дійсно, видалення коду GTM покращило швидкість завантаження. Але нюанси завжди в деталях.
Яка функція GTM? — встановлення маркетингових та аналітичних кодів на сайт без допомоги розробника.
Що ж тоді означає видалення коду GTM насправді? — насправді це видалення з сайту як власне і самого коду GTM, так і видалення десятків інших кодів аналітичних та маркетингових систем.
То чи дійсно тест «до і після», про який я писав вище, може давати вірну відповідь на питання «Чи GTM негативно впливає на швидкість завантаження сайту»? Звісно, відповідь — «ні». Для того щоб провести повноцінний тест, потрібно було б не просто видалити код GTM, а й розмістити всі коди з GTM напряму в коді сайту і лише тоді порівнювати.
Спойлер: при підборі оптимальних рішень у налаштуваннях GTM останній тест, швидше за все, не покаже відчутного впливу GTM на швидкість сайту. А іноді навіть може показувати кращі результати для варіанту з GTM.
Детальніше ознайомитись з прикладами правильних тестів впливу GTM на швидкість завантаження сторінки читайте тут.
7. Я можу самостійно зібрати дані для налаштування Ecommerce в GA4 зі сторінки — чому всі рекомендують мені все рівно використовувати для вирішення задачі рішення з розробником і dataLayer?
Я вже частково розбирав відповідь на це питання при розборі іншого (про те, чи робить GTM нас незалежними від програмістів). Але якщо коротко, то:
Технічно — так, ви дійсно можете за допомогою JS «витягнути» ціну, назву товару чи артикул прямо зі сторінки. І це може виглядати як перемога, бо не треба чекати, поки розробник звільниться від своїх задач. Але на практиці це міна уповільненої дії.
Дизайн — це змінна, а dataLayer — константа. Я вже казав, що ваша незалежність від розробника закінчується рівно в той момент, коли він змінює CSS-клас кнопки або переверстує картку товару. Якщо ви скрапите дані з DOM — трекінг «ляже». Якщо використовуєте dataLayer — аналітика навіть не помітить зміни дизайну.
Додайте до цього ще питання повноти даних — і ви зрозумієте, чому dataLayer єдине правильне рішення: ID товару, його категорія чи інші потрібні параметри можуть бути взагалі не написані на сторінці для користувача, але розробник може дістати їх із бази даних і «підкинути» вам у dataLayer.
Так, звісно, на малих проєктах скрапінг сторінки «на колінці» через GTM — це краще, ніж нічого. Але на великих проєктах з окремою командою розробки — це ознака поганого тону.
В ідеальному світі ви співпрацюєте з розробниками: вони забезпечують надійний фундамент у вигляді dataLayer, а ви через GTM гнучко керуєте тегами. Тільки такий тандем гарантує, що вашим цифрам у звітах можна буде довіряти.
Особливості впровадження GTM на різних платформах
Загалом GTM побудований так, що він прекрасно і без якихось значних особливостей прекрасно працює на сайтах з різними технологіями. Але в деяких випадках ці особливості є і вони значно впливають на процес.
8. Як налаштувати відстеження на React/Vue/Angular, якщо сторінка не перезавантажується?
SPA (Single Page Application) сайти стають все більш популярними, і, звісно, вам потрібно враховувати їх особливості при роботі з GTM. Точніше навіть буде сказати — «особливість», бо фактично вона одна: у SPA навігація емулюється через History API, а це означає, що в звичному для браузера розумінні сторінка у нас завантажується лише один раз, тобто лише перша, і як наслідок стандартний тригер Page View спрацьовує лише один раз.
Хоча GTM і може слухати подію popstate через тригер History Change і таким чином відстежувати перегляди сторінок, насправді зараз більшість аналітичних систем обробляє таку логіку на своїй стороні. Наприклад, у GA4 за це відповідає Enhanced Measurement (який автоматично трекає history changes).
Facebook теж має вбудовані механізми для фіксації переглядів сторінок на SPA-сайтах. Тому використання тригера History Change знадобиться в більшості випадків тільки при роботі з системами, які «відстають у відстеженні сучасних технологій».
Виглядає, що SPA — це не так і лячно і все вже продумали за нас? У більшості випадків — так, але є ще два нюанси:
- Race Conditions. При зміні URL інколи буває таке, що контент сторінки, наприклад Title, ще не оновився. Якщо на вашому сайті таке трапляється, врахуйте, що тригер «History Change» спрацьовує миттєво, і це призведе до хаосу в аналітиці в розрізі сторінок. У цьому випадку краще просити розробників пушити подію в Data Layer після того, як новий контент відрендерився.
- Проблема з тригерами скролу і часу. Оскільки, як ми вже розібрали, у випадку SPA навігація емулюється через History API, деякі тригери в GTM, робота яких зав’язана на «класичне» завантаження сторінки, можуть працювати некоректно. Розберемо на прикладі тригера скролінгу. На скріні нижче ми бачимо, що в його налаштуваннях є умова активації, яка прив’язана до етапу завантаження сторінки.
Уявіть це так: у цей момент GTM розраховує висоту вашої сторінки, щоб потім рахувати, до яких порогів доскролив користувач. І для першої сторінки все виглядає без змін, але давайте подивимось далі. У звичайному режимі при завантаженні наступної сторінки він би провів нові розрахунки висоти і проставив би нові пороги. Але у нас SPA. Умовного gtm.load (як у мене на скріні) вже не буде. А це означає, що висота сторінки вже ніколи не буде змінена, скільки б ми не ходили по сторінках. Як ви розумієте, якщо навіть зібрати такі дані — довіряти їм не можна. Тому будьте обережні з SPA і не забувайте про їх «нюанс».
9. Чому консоль показує помилки "refused to load script" для GTM?
Якщо ви відкрили консоль і побачили червоні помилки, схожі до тієї, що на скріні нижче, з текстом Refused to load the script... because it violates the following Content Security Policy directive, — вітаю, ви зіштовхнулися з CSP (Content Security Policy).
Якщо простими словами, CSP — це такий собі «фейсконтроль» на вході, який каже браузеру: «Ось список скриптів, яким я довіряю, а все інше — запускати не можна». Цей список налаштовується командою розробки сайту і дозволяє значно підвищити його безпеку. Але для спеціаліста з маркетингу чи аналітики це часто стає головним болем, бо браузер блокує завантаження контейнера GTM або окремих тегів усередині нього.
Як це «лікувати»? Передайте вашій команді розробки лінк на офіційну довідку Google, Facebook чи іншої системи, яка вам потрібна, де чітко розписано, які саме домени потрібно додати у white-list (script-src, img-src, connect-src тощо).
І пам’ятайте: якщо ви бачите такі помилки, дані в аналітику або не надходять зовсім, або надходять дуже криво. Тож ігнорувати це — собі дорожче.
Віднедавна Tag Assistant також повідомляє, якщо CSP обмежує роботу ваших Google-тегів. Але оскільки це може стосуватись не тільки Google-тегів, рекомендую все ж орієнтуватись при перевірці цієї проблеми на консоль браузера.
10. Чи підтримує GTM технологію AMP (Accelerated Mobile Pages)?
Так, але потрібен окремий тип контейнера — AMP Container. Стандартний Web-контейнер не працюватиме через обмеження JavaScript в AMP.
Варто також врахувати, що AMP накладає суворі обмеження на кастомний JavaScript. Багато функцій GTM (наприклад, Custom HTML-теги) недоступні в AMP-контейнерах.
Якщо ви зараз працюєте над налаштуванням аналітики для AMP-сайту, рекомендую ознайомитись з цим матеріалом від David Vallejo.
11. Як відстежувати користувачів через iFrame?
Це одне з тих питань, які змушують аналітиків сивіти завчасно. Якщо ви колись намагалися «прокинути» подію з форми, яка завантажується в iFrame з іншого домену, то розумієте, про що я. Ну а якщо вам потрібно вирішити таку задачу прямо зараз — скористайтесь рішенням з цього відео.
Попередження. Рішення з відео спрацює тільки якщо у вас або у вашого розробника є доступ до коду і в iFrame, і на основному сайті. Якщо ж ви використовуєте сторонній сервіс (наприклад, календар чи форму), який не дозволяє вам вставити код і не підтримує postMessage, — відстежити таку взаємодію неможливо. Залишається тільки писати їм у підтримку.
Діагностика та Troubleshooting
Вміння діагностувати проблему важливіше за вміння налаштувати тег.
12. Чому сайт у Preview Mode відкривається в новому вікні? Чи можна налаштувати, щоб він відкривався в сусідній вкладці?
Насправді я дуже рідко чую це запитання. Зазвичай люди просто думають, що по-іншому це не працює. Але коли я бачу, як хтось мучиться з цими вікнами, я завжди показую, як налаштувати, щоб сайт відкривався в сусідній вкладці — люди завжди радіють і ніколи не повертаються до попереднього способу. Тим більше, що налаштування максимально просте — достатньо встановити офіційне розширення від Google — Tag Assistant. Жодних додаткових налаштувань робити не потрібно.
До речі, це ж розширення дозволяє вам легко перевірити коректність встановлення GTM, Google Tag та інших маркетингово-аналітичних кодів компанії Google на вашому сайті. Тому рекомендую його одразу з двох причин.
13. Чому вікно Preview Mode не з'єднується з сайтом (“Not Connected”)?
Тут причин може бути безліч, і в кожному випадку може бути своя: блокування сторонніх cookies, розширення браузера, мережеві помилки…
Тому тут я просто надам список того, що варто перевірити в першу чергу:
- Браузер: Safari, Brave та інші «безпечні браузери» блокують трекери за замовчуванням. Використовуйте Chrome.
- Розширення: AdBlock, Ghostery, uBlock Origin та аналоги блокують скрипт gtm.js. Вимкніть їх або додайте сайт у винятки.
- Cookies: GTM Preview використовує cookies для зв'язку між інтерфейсом і сайтом. Перевірте, чи дозволені third-party cookies у налаштуваннях браузера. Режим інкогніто іноді блокує їх за замовчуванням.
- CSP: Про цей пункт я детальніше розповідав у запитанні «Чому консоль показує помилки "refused to load script" для GTM?».
Звісно, це не повний перелік, але з досвіду спілкування зі студентами курсу PRO GTM можу з упевненістю сказати, що відсотків 80 ситуацій він покриває.
14. Моє налаштування не працює (мій івент не передається): як зрозуміти, у чому проблема?
Так, це максимально широке запитання, але я спробую тут описати короткий патерн, який завжди мені допомагає.
- Перш за все перейдіть у режим попереднього перегляду (Preview Mode).
- Виконайте потрібну дію на сайті, у момент якої має відправлятись ваша подія.
- Знайдіть у Preview Mode в списку зліва потрібну вам подію і клікніть на неї. У моєму випадку я демонструю це на прикладі кліка на кнопку, тому дивлюсь на подію Click.
4. Якщо після цього ви бачите в блоці Tags Fired ваш тег, як у мене на скріні вище — GA4 - click_form_button, але подія все ще не приходить, — читайте відповідь на наступне запитання. Якщо ж ваш тег знаходиться в блоці Tags Not Fired — ідіть шукати помилку в налаштуваннях вашого тригера.
- Якщо запит червоний (Blocked або Canceled) — дивіться опис помилки і шукайте причину. Швидше за все, вона в налаштуваннях тега.
16. Чому Click ID або Click Element дорівнюють null при кліку? Я налаштував клік на кнопку, але він не завжди спрацьовує?
Зазвичай відстежування кліків по кнопках є одним з найпростіших налаштувань в GTM, але навіть там є нюанси. Подивіться уважно на наступний код:
<button type="button" id="add-button">
<i class="fa fa-shopping-cart"></i>
<span class="hidden-xs hidden-sm hidden-md">
Add to Cart
</span>
</button>Це код кнопки додавання товару в кошик. І якщо потрібно відстежити клік по ній, то першою реакцією новачків буде використати тригер типу такого:
Але таке налаштування в кращому випадку буде спрацьовувати в половині випадків. Тому що наша кнопка складається з декількох частин, а це налаштування покрило лише одну. Ось візуальний вигляд того, що відбудеться:
Зелена частина кнопки охоплює ті частини, де кліки по кнопці генеруватимуть подію, а світло-червона — ті, де подія відправлятись не буде.
Скрін вище, на якому я показував, яка частина кнопки буде відправляти подію, а яка ні, зроблений з використанням розширення PROANALYTICS. Я написав це розширення, щоб допомогти своїм студентам легше орієнтуватись у таких складних кейсах. Воно також робить зручнішою роботу зі звітами в GA4 та Google Ads і є повністю безкоштовним. Детальніше про функціонал можна прочитати тут.
Правильне налаштування ж у цьому випадку має бути таке:
А детальніше про роботу тригера Click – All Elements та CSS-селектори можна прочитати в моєму матеріалі — Відстеження кліків на елементи сайту за допомогою Google Tag Manager.
17. Чому стандартний тригер "Form Submission" не реагує на мою форму?
Сучасні форми використовують AJAX та інші технології, які стандартний тригер Form Submission може не покривати. Тому для відстежування форм користуйтесь наступним алгоритмом:
- Якщо в момент успішної відправки форми спрацьовує подія
formSubmit, використовуйте тригер «Відправка форми». При цьому не забувайте перевірити, чи не відправляєтьсяformSubmitі в момент неуспішної відправки форми. - Якщо одна з умов у пункті 1 не виконується, але при надсиланні з’являється новий елемент, використовуйте тригер «Видимість елемента».
- Якщо нові елементи не з’являються — спробуйте дізнатись, чи це не AJAX-форма. Якщо це таки вона — використовуйте цей метод.
- Якщо жоден із перелічених вище варіантів не працює, залишається або писати ТЗ програмісту, або самому стати трішки програмістом і налаштувати трекінг за допомогою валідації.
18. Чому для перевірки налаштувань не потрібно кожного разу публікувати нову версію?
Це питання з розряду тих, що економлять сотні годин роботи та рятують історію версій вашого контейнера від «сміття». Багато хто на початку шляху думає, що GTM працює як звичайний код на сайті: змінив — зберіг — опублікував. Але це шлях до хаосу, коли в історії змін з’являються десятки версій з назвами «тест 1», «тест 2», «ну вже точно запрацює» і так далі.
Але публікація — це фінальний крок, а не робочий процес. У GTM є розділення на робочу область (Workspace) та опубліковану версію (Live Version). Режим попереднього перегляду (Preview) працює саме з вашою робочою областю. І саме через режим Preview вам потрібно працювати.
Тобто алгоритм має бути такий:
- Внесли зміни в теги/тригери.
- Натиснули Preview.
- Перевірили все в Tag Assistant (чи спрацьовують теги, які дані летять).
- Якщо щось не так — повернулися в GTM, підправили, натиснули Preview ще раз.
- І тільки коли все працює ідеально — натискаєте Submit та публікуєте версію з чітким описом (наприклад, «Налаштування відстеження форми контактів для GA4»).
19. Як я можу перевірити, що код Менеджера тегів Google встановлений на сайті вірно?
Найпростіший спосіб — скористатись офіційним розширенням від Google — Tag Assistant. Просто натисніть на нього після встановлення, і ви побачите або щось схоже на те, що в мене на першому скріні, і тоді зрозумієте, що зі встановленням GTM на сайт щось пішло не так, або ж побачите свій ID GTM без попереджень, як на скріні два — це означає, що все у вас встановлено добре.
20. Я б хотів перевірити своє налаштування перед тим, як робити його в основному контейнері. Як перевірити свої налаштування?
Страх робити щось в основному контейнері не має сенсу, оскільки всі ваші зміни не застосовуються одразу. У вас завжди є можливість спочатку перевірити їх у режимі попереднього перегляду.
Якщо ж ви не вмієте користуватись Preview Mode — тоді це вже інше питання. Але в такому разі я б радив вам відкласти будь-які роботи в GTM і максимум зусиль інвестувати у вивчення цього режиму, оскільки саме він убереже вас від проблемних налаштувань.
Конфігурація тригерів (Trigger Configuration)
21. Як коректно налаштувати Element Visibility тригер, щоб не "повісити" браузер?
Це проблема, про яку не думають, поки вона не станеться. Але необережне використання опції "Observe DOM Changes" дійсно може призвести до лагів вашого сайту у кінцевого користувача. Ця опція запускає MutationObserver, який може споживати багато ресурсів CPU.
Щоб не перевантажити браузер:
- Використовуйте тільки для динаміки: вмикайте цю опцію лише тоді, коли елемент фізично додається в код сторінки без перезавантаження (наприклад, з'являється поп-ап або повідомлення про успішну відправку).
- Скрол — це не зміна DOM: якщо елемент уже є в коді, але просто знаходиться «нижче екрана», опція "Observe DOM Changes" не потрібна. GTM і так його побачить при скролі.
- Обмежуйте сторінки: не дозволяйте тригеру з цією опцією працювати на всіх сторінках ("All Pages"). Активуйте його тільки там, де такий елемент теоретично може з'явитися.
22. Як запустити тег тільки після виконання декількох умов (наприклад, скрол 50% + час на сайті 30 сек)?
Використовуйте функцію "Trigger Group". Вона чекає, поки спрацюють усі додані до неї тригери, і тільки тоді активує тег. Практичні приклади використання можна знайти тут.
Нюанс: Trigger Group спрацьовує лише один раз, коли всі умови виконані. Якщо вам потрібно повторне спрацювання, це вимагатиме складнішої логіки.
23. Як налаштувати таймер, щоб він не працював у фоновій вкладці?
Стандартний таймер GTM продовжує працювати, навіть якщо вкладка неактивна. Для точного обліку часу активності потрібно використовувати Custom JS. Ось тут можна знайти приклад такого рішення.
24. Чому вбудований YouTube-тригер не працює на моєму сайті?
Для роботи тригера необхідно, щоб у URL iframe-відео був параметр enablejsapi=1. Якщо відео вставлено без цього параметра, GTM не зможе «слухати» плеєр. Має бути як на скріні нижче.
У випадку відсутності цього параметра вашому розробнику потрібно вручну додати цей параметр у код вставки або використовувати скрипт, який автоматично додає його до всіх відео на сторінці.
Детальніше про відстеження відео за допомогою GTM я писав тут.
25. Що таке gtm.js, gtm.dom, gtm.load?
Це внутрішні події GTM:
gtm.js= Page View (скрипт GTM почав роботу).gtm.dom= DOM Ready (HTML побудовано).gtm.load= Window Loaded (усі картинки і скрипти завантажено).
Але ось ті ж події з тієї ж сторінки при поганій швидкості інтернету:
Тепер різниця між першою і останньою — 22 секунди. Ось і відповідь на ваше запитання.
Чим раніше ви запустите код аналітики на сайті, тим зазвичай більше даних встигнете зібрати. І в більшості випадків така стратегія є найкращою.
27. Тригер «Усі сторінки» не працює. Чому?
Зазвичай це трапляється, якщо розробник (або ви) розмістив фрагмент коду рівня даних під кодом контейнера Менеджера тегів Google. У цьому посібнику все пояснюється детальніше.
28. Я натискаю на різні елементи вебсайту, але консоль попереднього перегляду GTM нічого не показує. Чому?
Це поширена помилка новачків. Увімкнення вбудованих змінних кліків недостатньо для початку відстеження чогось.
Якщо сам режим Preview (Tag Assistant) відкрився, але не фіксує кліки, — проблема зазвичай у тому, що ви не створили жодного тригера, відповідального за клік. GTM — це не шпигун, який записує кожен ваш крок за замовчуванням. Щоб він почав фіксувати подію Click у лівій панелі Preview Mode, у вас у контейнері має бути створений хоча б один тригер типу "Click All Elements". Поки такого тригера немає, GTM просто ігнорує ці дії, щоб не навантажувати браузер.
Створіть тригер, як на скріні, навіть без тегу, і GTM почне бачити кліки:
Міграція та імпорт налаштувань
29. Чи обов'язково видаляти gtag.js при переході на GTM? Чи нормально відправляти події з GTM при встановленому Google Tag у коді сайту?
Це класичне питання, де відповідь: «Працювати буде, але краще так не робити». Якщо ви залишите і gtag.js, і GTM одночасно, ви власноруч створюєте собі зону ризику для дублювання даних.
Технічно сайт не впаде, якщо в коді залишаться обидва інструменти, але ви отримаєте «зоопарк» у налаштуваннях та аналітиці й самі собі ускладните життя. Найкраще залишити щось одне (і зазвичай це GTM).
30. Чи можна перенести налаштування з одного контейнера в інший?
Так, через функцію Export/Import (JSON-файл). Знаходиться в блоці Admin на рівні контейнера.
Також можна скористатись сервісом GTM Tools. Детальніше про цей сервіс я писав у матеріалі — «Прискорюємо налаштування Google Tag Manager за допомогою GTM Tools».
31. Я починаю працювати з новим проєктом, і виявляється, що в компанії є тільки доступ на читання в GTM. Пошта з повним доступом відсутня. Як швидко вирішити ситуацію?
Скористайтесь функціоналом Export/Import контейнера або сервісом GTM Tools, про які я писав у попередньому питанні. Ці опції доступні навіть при доступі тільки на перегляд.
Додаткові часті питання
33. Я хочу перевіряти CSS-селектор на відповідність умовам через Lookup Table, але це не працює?
Це класична пастка, в яку потрапляє більшість студентів курсу PRO GTM. Lookup Table (Таблиця пошуку) перевіряє тільки на пряму відповідність (Exact Match). Коли ж ми працюємо з CSS-селекторами, ми зазвичай використовуємо умову Matches CSS Selector, а це зовсім інша умова.
Якщо вам потрібно залежно від селектора повертати різні значення, доведеться використати змінну з невеликим JS-скриптом. Його можна знайти в цьому матеріалі.
34. Чи можна запускати GTM до надання згоди користувачем?
Особисто моя думка така: сам по собі контейнер GTM — це просто «порожня коробка». Його завантаження саме по собі не призводить до передачі якихось персональних даних кудись. Та й налаштування згоди досить зручно і швидко робити через GTM — тоді це може зробити навіть маркетолог чи власник бізнесу, у якого немає розробника. Але деякі європейські судді чомусь думають інакше (тут приклад такої справи). Тому вирішувати вам, але будьте обережні.
35. Все працювало, а потім хтось щось зламав: як дізнатися, хто зламав контейнер і що саме було змінено?
У GTM є вбудована історія версій ("Versions"). Ви можете побачити, хто і коли вніс зміни, і за потреби відкотитися до попередньої стабільної версії.
Головне — не забувайте давати їм (версіям) зрозумілі назви, щоб швидко розуміти, що і коли було зроблено.
36. Як я можу дізнатися більше про Менеджер тегів Google?
Легко було здогадатися, що однією з перших рекомендацій буде цей блог, а також блог PROANALYTICS.ACADEMY. Ну і, звісно, мій курс PRO GTM.
Також я не можу не згадати колег по ринку, які роблять дуже багато для навчання спільноти:
- Блог Simo Ahava
- Блог Analytics Mania (Julius Fedorovicius)
- та канал Measure School на YouTube.
37. Яке значення мають правила іменування в GTM і чому вони важливі?
Це те питання, яке відрізняє «спеціаліста, який щось наклацав», від справжнього архітектора аналітики. Правила іменування (Naming Conventions) — це не про красу. Це про виживання вашого контейнера через пів року, коли в ньому буде не 10, а 150 тегів.
Уявіть, що ви приходите на проєкт, де теги називаються «GA4 Event 1», «Pixel New», «Form Test». Щоб зрозуміти, що вони роблять, вам доведеться відкрити кожен. Це марнотратство часу.
Особисто я прихильник структури [Категорія/Вендор] – [Деталі/Назва події]. На практиці це виглядає так:
- Теги (Tags):
GA4 – purchaseFB – purchaseGAds – purchaseHTML – script_name(префіксHTMLдля кастомних скриптів).
- Тригери (Triggers):
EV – contact_us_form_submit(префіксEVдля тригера Element Visibility)CE – purchase(префіксCEдля тригера Custom Event)
- Змінні (Variables):
DL – ecommerce.items(Data Layer Variable)JS – calculatePrice(Custom JS)URL – utm_source(URL parameter)
Неважливо, оберете ви мій стиль чи придумаєте власний — головне, будьте консистентними, щоб один і той самий тип елемента завжди називався за одним шаблоном.
Використання таких правил неймінгу для змінних має ще й додаткову перевагу. В Preview Mode всі змінні розміщені по алфавіту, таким чином змінні одного типу завжди будуть поряд.
38. Чи можна використовувати один і той самий контейнер GTM на кількох сайтах?
Це одне з тих запитань, де відповідь дуже залежить від вашого бізнесу. Якщо ви плануєте налаштовувати для цих кількох сайтів міждоменне відстежування, то використання одного контейнера вам буде навіть бажаним. Але в усіх інших випадках цього краще уникати.
39. Я надав доступ до GTM колезі/підряднику, а він його не бачить?
Це ще одна класична помилка новачків. Найчастіше проблема в тому, що доступ було надано на рівні Акаунту, але не на рівні Контейнера.
На скріні нижче якраз зображена така помилка: доступ до акаунту виданий, але не наданий до жодного з контейнерів.
Рівень акаунту (Account): це ваша компанія. Якщо ви додаєте людину сюди, вона бачить назву акаунту в списку, але якщо ви не поставили жодної галочки в дозволах для контейнерів, всередині вона побачить просто порожнє місце.
Рівень контейнера (Container): це вже безпосередньо робоче місце з вашими тегами. Найчастіше колезі/підряднику потрібен доступ саме сюди з правами Edit (якщо він має тільки готувати теги) або Publish (якщо ви довіряєте йому самостійно випускати зміни у світ).
40. Чи зберігає Google Tag Manager якісь дані про відвідувачів?
Ні. GTM не збирає і не зберігає жодних даних. Це система, яка дозволяє легко підключати коди інших систем до вашого сайту. Детальніше про це я вже писав у відповіді на питання «У чому полягає фундаментальна різниця між GTM та Google Analytics 4».
Замість висновку
Особисто я б дуже зрадів, якщо б хтось скинув мені такий матеріал 10 років назад. Це вберегло б мене від значної кількості GTM-них синців. Але я вже пройшов свій шлях і, надіюсь, що у вас, завдяки цьому матеріалу, він буде легшим.
Які ще нюанси/питання по GTM ви часто зустрічаєте? Залишайте їх в коментах. Давайте доповнимо цей матеріал разом.
Завантаження коментарів…