19 практичних лайфхаків для Google Tag Manager

Google Tag Manager — уже давно зрілий і стабільний інструмент. За роки розвитку його основні можливості добре відточені, а більшість типових задач з налаштування та керування трекінгом він прекрасно закриває своїми можливостями.

Але це не означає, що в роботі з GTM уже немає чого оптимізувати. Навпаки: коли працюєте з ним постійно, накопичується багато невеликих прийомів, які дозволяють швидше налаштовувати теги, простіше дебажити проблеми, підтримувати порядок у контейнерах і просто витрачати менше часу на рутинні задачі.

Тому в цій статті я зібрав 19 практичних лайфхаків для Google Tag Manager, які можуть зробити щоденну роботу з ним трохи швидшою, зручнішою та десь навіть приємнішою.

1. Як швидко відкрити GTM контейнер, що встановлений на сайті
2. Як відкрити змінну прямо з тега, тригера або іншої змінної
3. Як створити багато змінних Data Layer за один раз
4. Як швидко відстежити успішне відправлення різноманітних форм та інші популярні дії на сайті
5. Як зберегти власне GTM налаштування для наступного проєкту
6. Як привести значення змінної до одного формату без коду
7. Як запустити тег після виконання кількох умов
8. Як об’єднати кілька умов в одній умові тригера
9. Як перевірити, чи CSS-селектор охоплює всю кнопку
10. Як швидко побачити, які GA4-події налаштовані в контейнері
11. Як визначити, який тег надіслав конкретну GA4-подію
12. Як гарантовано запустити один тег перед іншим
13. Як побачити, які взаємодії на сайті відстежуються через GTM і які події відправляються
14. Як швидко знайти потрібний тег і змінну в Preview
15. Як відразу помітити теги з помилкою в Preview GTM
16. Як швидко знайти теги, тригери та змінні, які не використовуються
17. Як відстежувати JavaScript-помилки через GTM
18. Як перевірити коректність передавання подій у GA4, Meta, TikTok та Google Ads і нічого не упустити
19. Як через пів року не забути, для чого налаштовувався відповідний тег, тригер чи змінна

Як із відкритого сайту перейти до потрібного контейнера GTM

Почну з міні-лайфхаку, який зекономить вам у майбутньому години. Кожного разу, коли нам потрібно відкрити GTM конкретного сайту, ми робимо наступне: відкриваємо сторінку GTM, переходимо в рядок пошуку, вводимо там сайт і сподіваємося, що контейнер названий нормально. Забудьте про це. Використовуйте швидкий запуск GTM з безкоштовним розширенням PROANALYTICS. З цією функцією ви зможете швидко перейти від відкритого сайту до пов’язаного з ним контейнера GTM або ресурсу GA4. Не потрібно окремо шукати його серед усіх акаунтів і звіряти ідентифікатори. Просто подивіться, як це просто:

Для того, щоб у вас з’явилася така кнопка на всіх ваших сайтах, потрібно один раз зробити наступне:

• У розширенні активуйте функцію Quick launcher for GA4 and GTM (Швидкий запуск GA4 і GTM) у блоці New features (Нові функції).

• Потім натисніть Refresh the list of properties and containers (Оновити список ресурсів і контейнерів).

Вітаю, тепер на кожному сайті, де у вас є доступ до GA4 чи GTM, у вас з’явиться кнопка швидкого доступу (кнопка з хештегом).

Як відкрити змінну прямо з тега, тригера або іншої змінної

Наступний лайфхак теж зекономить вам години. Згадайте ситуацію, коли ви бачите змінну в налаштуваннях тега, тригера чи змінної і вам треба швидко переглянути її налаштування. Далі зазвичай ви зробите наступні кроки. Закрити умовний тег -> Перейти в розділ змінних -> Знайти потрібну змінну -> Відкрити змінну.

Забудьте про зайві кроки. З розширенням PROANALYTICS можна просто клікнути на іконку олівця біля змінної й одразу побачити її налаштування.

Це працює також із посиланнями на GTM-змінні в коді Custom JavaScript змінної та Custom HTML тега. Натисніть на потрібну змінну, і вона відкриється в новій вкладці.

Як створити багато змінних Data Layer за один раз

Продовжимо пришвидшувати вашу роботу з GTM. Уявімо, що розробник передав нам список ключів у dataLayer — наприклад, user_id, form_id та action_type. Для кожного з них зазвичай доводиться окремо відкривати Variables, створювати Data Layer Variable, вводити ключ і назву.

Однак через розширення PROANALYTICS ці ключі можна додати списком і підготувати відповідні змінні фактично в 1 клік.

Перед створенням розширення також перевірить конфлікти, щоб випадково не створити в контейнері змінні, які вже існують. І не забудьте перезавантажити сторінку після створення.

Як швидко відстежити успішне відправлення різноманітних форм та інші популярні дії на сайті

Налаштування популярної форми, наприклад HubSpot, Calendly чи форм для WordPress типу Contact Form 7, часто починається з однакового набору тегів, тригерів і змінних. У бібліотеці розширення PROANALYTICS можна вибрати готове рішення і додати його в контейнер за пару кліків. Ось як це виглядає:

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

Перед вибором готового рішення можна одразу задати кілька базових налаштувань.

• У полі GA4 Measurement ID вкажіть ідентифікатор потоку даних GA4 або виберіть GTM-змінну, в якій він уже зберігається.

• Нижче в блоці Naming можна задати Entity prefix — префікс для назв сутностей, які створить бібліотека, а також GTM folder, у яку вони будуть додані. Це особливо зручно, якщо в контейнері вже використовується своя система неймінгу або ви хочете одразу тримати створені сутності в окремій папці.

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

Після додавання не забудьте перезавантажити сторінку.

Як зберегти власне GTM налаштування для наступного проєкту

Скільки разів ви ловили себе на тому, що вже робили подібне налаштування в іншому контейнері, а тепер потрібно його повторити? Цей лайфхак про те, як зберегти свій шаблон налаштувань. У GTM Solutions Library (Бібліотека рішень GTM) у розширенні PROANALYTICS можна зберегти потрібні теги, тригери та змінні як власний шаблон і потім повторно використовувати його в інших контейнерах. При цьому ви можете вибрати лише потрібні теги, а PROANALYTICS автоматично запропонує додати пов’язані з ними тригери та змінні.

Для цього перейдіть у Create own template, задайте назву шаблону й виберіть потрібні сутності.

Готовий шаблон зберігається у вкладці My templates.

Коли таке саме налаштування знадобиться в іншому GTM-контейнері, відкрийте збережений шаблон, вкажіть потрібні для нового проєкту значення, наприклад GA4 Measurement ID, і просто натисніть кнопку створити.

Як привести значення змінної до одного формату без коду

Звісно, не для всіх лайфхаків вам потрібно встановлювати розширення. Я знаю й цікаві моменти в рідному інтерфейсі, про які багато хто забуває або не звертає уваги. Класичний приклад — форматування даних і приведення значення до єдиного виду. Дуже часто спостерігаю, як у GTM для цього використовують Custom JavaScript змінну і пишуть власний код, але набагато швидше скористатися рідним блоком усіх змінних — Format Value.

• Відкрийте змінну, яка отримує потрібне значення, наприклад Data Layer Variable, і розгорніть Format Value внизу її налаштувань.
• Виберіть потрібну трансформацію, наприклад Change Case to → lowercase.

Як запустити тег після виконання кількох умов

• Щоб створити такі умови, налаштуйте окремі тригери для цих дій.
• А потім поєднайте їх через тригер типу Trigger Group.

• Додайте в групу створені тригери.

• Призначте групу потрібному тегу. І тепер GTM відправить подію, тільки якщо всі умови з групи будуть виконані.

Як об’єднати кілька умов в одній умові тригера

Розумію, звучить назва пункту трохи дивно, але ж ми з вами за лайфхаками зібралися, тому давайте поясню: уявіть, що вам потрібно, щоб тег запускався на сторінках, які містять на початку шляху сторінки /blog/ або /news/, але не на всьому сайті.

Замість того, щоб створювати для кожної умови окремий тригер (наприклад, Page Path починається на /blog/, Page Path починається на /news/), можна скористатися регулярними виразами, використати в умові Page Path оператор matches RegEx (ignore case) і вираз ^/(blog|news)(/|$). Він охопить потрібні розділи й не захопить випадковий шлях, у якому blog або news лише частина іншого слова.

У виразі ^/(blog|news)(/|$):

• Символи ^/ означають, що шлях сторінки має починатися зі слеша.
• У дужках через | перелічені розділи: blog або news.
• Якщо потрібно додати ще один, наприклад магазин, запишіть (blog|news|shop).
• Остання частина (/|$) означає, що після назви розділу має бути або слеш, або кінець адресного шляху. Тому умова спрацює для /blog, /blog/ і /blog/article, але не для /blogger.
• Оператор ignore case дозволяє не зважати на великі й малі літери.

Після налаштування перевірте тригер у Preview: відкрийте сторінку блогу, сторінку новин і сторінку іншого розділу, наприклад /contact/. На сторінках блогу й новин тег має запускатися, а на /contact/ — ні. Так ви переконаєтеся, що одне правило охоплює потрібні сторінки й не запускає тег на решті сайту.

До речі, схоже працює і з CSS-селекторами: якщо вам потрібно, наприклад, щоб подія відправлялася при кліку на кнопки з селекторами .header-cta-button та .footer-cta-button, вам не обов’язково створювати два окремі тригери. Просто перелічіть їх у тригері через кому:

Як перевірити, чи CSS-селектор охоплює всю кнопку

Оскільки ми почали тему CSS-селекторів, давайте продовжимо її. На перший погляд усе просто: скопіювали селектор кнопки, додали його в умову тригера — і готово. Але сама кнопка може складатися з кількох вкладених елементів: наприклад, контейнера, тексту та іконки.

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

Щоб швидко це перевірити, використовуйте функціонал CSS Tools у розширенні PROANALYTICS, вставте селектор і натисніть підсвічування елементів. Інструмент покаже, яку саме частину сторінки охоплює селектор.

На першому скріні нижче все ОК.

А ось тут ми бачимо червоною зоною, що значна частина кнопки не покрита:

Як швидко побачити, які GA4-події налаштовані в контейнері

Назви тегів у контейнері не завжди збігаються з назвою події, яку вони надсилають у GA4. Якщо вам потрібно швидко зрозуміти, які саме GA4-події налаштовані в контейнері і які теги їх генерують, то відкривати кожен тег окремо незручно і довго. У цьому вам допоможе функціонал PROANALYTICS Magic у розширенні PROANALYTICS. Перейдіть до цього функціоналу та запустіть сканування контейнера.

Прогорніть результати сканування вниз.

• Розширення сформує вам список подій, у якому видно тег або теги, які її надсилають. Якщо одну й ту саму назву події передають кілька тегів, це теж одразу видно — наприклад, на скріні generate_lead, page_view і purchase генеруються двома тегами.
• У верхній частині блоку є пошук Find an event or a tag (Знайти подію або тег), тому список можна швидко відфільтрувати як за назвою події, так і за назвою тега.
• Кнопка Open (Відкрити) дозволяє перейти до конкретного тега й перевірити його налаштування.

Як визначити, який тег надіслав конкретну GA4-подію

Якщо одну й ту саму GA4-подію генерують кілька тегів, за самою назвою події вже не завжди зрозуміло, в якому саме налаштуванні шукати проблему. Для таких ситуацій ком’юніті давно придумало просте рішення — передавайте ID тега в окремий кастомний параметр GA4.

Але знайти ID не так просто в стандартному інтерфейсі. Тому розширення PROANALYTICS показує ID кожного тега прямо в списку GTM. Щоб активувати цю функцію, поставте галочку біля налаштування Add tag IDs to GA4 events in one click (Швидке додавання ID тегів до подій GA4) у блоці New features (Нові функції).

А клікнувши на ідентифікатор, можна в один клік додати потрібний параметр gtm_tag_id.

Як гарантовано запустити один тег перед іншим

Це нечаста ситуація, але інколи є необхідність запускати теги послідовно один за одним. У такій ситуації допоможе Tag Sequencing.

• Відкрийте тег, який надсилає подію, перейдіть у Advanced Settings → Tag Sequencing і ввімкніть Fire a tag before this tag fires.
• Потім виберіть тег із підготовчим налаштуванням.

Тепер, коли настане умова запуску основного тега, GTM спочатку запустить підготовчий, а після нього — основний.

За потреби увімкніть опцію, яка не дасть основному тегу запускатися, якщо підготовчий завершиться невдало.

Для зворотного випадку оберіть Fire a tag after this tag fires.

Як побачити, які взаємодії на сайті відстежуються через GTM і які події відправляються

Коли ви працюєте з незнайомим GTM-контейнером, інколи важко зрозуміти, за взаємодію з якими елементами на сайті відповідає той чи інший тег чи тригер. GTM Inspector у розширенні PROANALYTICS дозволяє подивитися на налаштування прямо через сам сайт. Ось як це виглядає:

• Інструмент підсвічує елементи сторінки, які пов’язані з тригерами кліків, форми або видимості, а в окремій панелі показує знайдені на сторінці події та типи тригерів, через які вони відстежуються.
• Якщо навести курсор на конкретний елемент, GTM Inspector показує деталі пов’язаного налаштування: тип тригера, GTM-контейнер, CSS-селектор та умови спрацювання, а також назву GA4-події та її параметри.
• А при натисканні на елемент у панелі вас ще й одразу проскролить до потрібного елемента.

Як швидко знайти потрібний тег і змінну в Preview

У великому GTM-контейнері Preview швидко перетворюється на довгі списки тегів і змінних. Якщо потрібно перевірити конкретне налаштування, пошук вручну може займати зайвий час. Розширення PROANALYTICS додає пошук і фільтри безпосередньо в Preview. Тобто можна ввести назву або її частину в полі пошуку, а також звузити список за типом тега.

Аналогічно це працює і для вкладки змінних.

Як відразу помітити теги з помилкою в Preview GTM

У великому Preview проблемний тег легко загубити серед десятків інших. У розширенні PROANALYTICS доступна підсвітка тегів, які завершилися помилкою, і навіть окремий фільтр для них.

На скріні нижче видно теги зі статусом Failed. Замість того щоб переглядати весь список вручну, можна натиснути фільтр не вдалося (did not succeed) і залишити тільки проблемні теги.

Як швидко знайти теги, тригери та змінні, які не використовуються

У GTM з великою історією часто залишаються старі тригери, змінні або теги, які вже ніде не використовуються. Шукати такі сутності вручну у великому контейнері займає багато часу, тому для швидкої перевірки ви можете скористатися функціоналом PROANALYTICS Magic у все тому ж розширенні PROANALYTICS.

Запустіть сканування контейнера, і розширення згрупує потенційно зайві сутності за типом:

• Triggers no tag uses (Тригери, яких ніхто не використовує) — тригери, які не використовуються жодним тегом.
• Variables nothing reads (Змінні, які ніхто не читає) — змінні, на які не посилається жодна інша сутність у контейнері. Тобто вони не використовуються в тегах, інших змінних чи умовах тригерів.
• Tags with no firing trigger (Теги без тригера запуску) — теги, для яких не налаштовано тригер запуску. При цьому теги, які використовуються через Tag Sequencing, розширення не відносить до цієї категорії.
• Paused tags (Теги на паузі) — теги, які поставлені на паузу. Якщо такі є в контейнері, розширення також покаже їх окремо, щоб ви могли перевірити, чи вони ще потрібні.

Кожну сутність можна відкрити кнопкою Open (Відкрити) і перевірити перед видаленням.

Якщо елемент справді більше не потрібен, позначте його галочкою та натисніть Delete selected (Видалити вибране). Після внесення змін не забудьте відсканувати контейнер заново через Scan again (Перевірити ще раз).

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

GTM може не тільки допомогти з трекінгом дій користувача на сайті, але й з відстежуванням дій, які користувачу зробити не вдалося. Мова про трекінг JavaScript-помилок.

У GTM для таких випадків є окремий тригер JavaScript Error.

Разом із подією важливо передавати в GA4 додаткові параметри помилки через вбудовані змінні Error Message, Error URL та Error Line — тобто текст помилки, адресу сторінки та номер рядка, де вона виникла.

Як перевірити коректність передавання подій у GA4, Meta, TikTok та Google Ads і нічого не упустити

Після налаштування тегів важливо перевірити, що саме відправляється із сайту під час реальної взаємодії користувача. І розширень, які допомагають це робити, в інтернеті сотні.

Але я знову порекомендую PROANALYTICS. Чому? Бо це розширення йде далі й, окрім перехоплення таких запитів, ще й перевіряє наявність обов’язкових параметрів, відповідність типів даних і навіть складніші кейси: наприклад, якщо на етапі перегляду картки товару він називався Canon EOS 5D, а при додаванні в кошик уже летить під назвою Canon EOS 5D Black — розширення про це попередить.

Щоб відкрити сам дебагер, є два варіанти:

• або дивіться в консолі розробника Chrome;
• або прокрутіть нижче до блоку Side panel (Бокова панель) і натисніть Open the side panel here (Відкрити бокову панель тут).

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

Як через пів року не забути, для чого налаштовувався відповідний тег, тригер чи змінна

Останній пункт списку навіяний сьогоднішнім спілкуванням в одному з чатів. Якщо ви не хочете через пів року забути, чому і для чого було зроблене відповідне налаштування, у GTM існує можливість залишити примітку. І працює ця опція і для тегів, і для тригерів, і для змінних.

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

У цій статті ми розібрали багато прийомів, які скоротять вам рутину. Але найбільше користі від таких лайфхаків буде тоді, коли ви добре розумієте саму логіку GTM і знаєте, що саме налаштовуєте та навіщо.

На курсі PRO GTM я розбираю весь шлях роботи з Google Tag Manager: від знайомства з тегами, тригерами, змінними і CSS-селекторами до відстеження кліків, форм, скролінгу, відео, роботи з dataLayer, налаштування ecommerce та складніших кастомних рішень. І, звісно, там на вас чекає ще більше лайфхаків.