Теги в Google Tag Manager. Керівництво для новачків і не тільки

На момент оновлення статті в Google Tag Manager існує 77 типів тегів. З них 75 - це різні попередньо встановлені шаблони, наприклад, Google Tag, Google Analytics: GA4 Event, Google Ads Remarketing, Hotjar Tracking Code, Google Ads Calls from Website Conversion. Є також 2 типи кастомних тегів - Custom HTML (Користувацький тег HTML) і Custom Image (Спеціальне зображення). І це я ще не згадав про теги з галереї ком'юніті...

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

У цій статті ви зможете дізнатися про основні типи, а також про розширені налаштування тегів, які доступні незалежно від вибраного типу.

• Що таке теги в Google Tag Manager і навіщо вони потрібні
• Google Tag
• Тег Hotjar Tracking Code
• Галерея шаблонів тегів ком'юніті
• Custom HTML тег
• Custom Image тег
• Розширені налаштування під час створення тегів

Перед тим, як ми почнемо, невелика вступна частина про те, що таке теги. Якщо ви це вже знаєте, наприклад, зі статті про основи диспетчера тегів Google, сміливо можете перейти до наступного пункту.

Що таке теги в Google Tag Manager і навіщо вони потрібні

Як я вже писав у попередній статті, теги – це фрагменти коду, які ви хочете встановити собі на сайт. Для більшості таких фрагментів є свої заготовлені шаблони, особливо це стосується сервісів Google. Наприклад, для встановлення на сайт Google Analytics 4 необхідно використовувати тип тега (шаблон) Google Tag. Це також стосується і не гуглівських сервісів, наприклад, є шаблон тега Quora Pixel.

Якщо ж вам не вдалося знайти потрібний сервіс в основних тегах, ви завжди можете скористатись галереєю від ком'юніті, а також використовувати кастомні типи, такі як Custom HTML (Користувацький тег HTML) і Custom Image (Спеціальне зображення), які дозволяють виконувати на сайті будь-які фрагменти коду. Приклад такого сервісу є Facebook. Читайте детально про встановлення коду Facebook Pixel на сайт .

Яка б різноманітність тегів не існувала в Google Tag Manager, процес налаштування завжди можна розділити на три основні етапи:

• Налаштування основних параметрів тега;
• Розширені налаштування (за потреби);
• Додавання тригера.

Роботу з першим етапом ми розберемо для кожного тега окремо. Другий етап однаковий, незалежно від обраного типу тега, і його ми розберемо в останній частині статті. Щодо останнього етапу, то тригер - це умова, коли наш тег має спрацьовувати.

Тема тригерів заслуговує окремих матеріалів, які ви можете знайти на цьому блозі:

• Відстеження кліків на елементи сайту за допомогою Google Tag Manager: Розширений посібник
• Відстеження кліків на посилання за допомогою Google Tag Manager: Практичний посібник з прикладами
• Відстеження відправки форми за допомогою базового тригера GTM
• Відстеження відправки форми за допомогою тригера Видимість елемента
• Відстеження скролінгу на сторінках за допомогою Google Tag Manager: Розширений посібник
• Відстеження взаємодії з відео за допомогою Google Tag Manager

Google Tag

Шаблон тегу для налаштування Google Tag є одним з найпопулярніших і найчастіше використовуваних. Цей тег, в тому числі, відповідає за встановлення базового коду Google Analytics 4 на сайт.

Як бачите, я не просто так вище писав, що теги - це шаблони: все що вам потрібно налаштуваннями тегу - заповнити одне єдине поле - Tag ID (Ідентифікатор показника).

Тег Hotjar Tracking Code

Теплові карти кліків та скролінгу містять безліч цікавої інформації про взаємодію користувачів з вашим сайтом. Один із сервісів, який надає таку інформацію – Hotjar. Для його встановлення через GTM в нього теж існує спеціальний шаблон, в який потрібно ввести тільки ідентифікатор. Докладніше про встановлення Hotjar можна прочитати у відповідній статті - Встановлення основних систем аналітики за допомогою Google Tag Manager .

Галерея шаблонів тегів ком'юніті

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

Custom HTML тег

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

Тип тега Custom HTML (Користувацький тег HTML) дозволяє нам встановити на сайт будь-який JavaScript код. Все що потрібно – це прописати його в полі HTML.

Крім цього поля в тегу існує лише одне основне налаштування: поле Support document.write . У часи поганого інтернету цей метод дозволяв відображати текст замість елемента сторінки доти, поки потрібний елемент не завантажиться. Пізніше його почали використовувати для підвантаження різних скриптів. З 54-ї версії Google Chrome почав обмежувати підвантаження скриптів у такий спосіб. Та й загалом використання даного методу не дуже добре позначається на продуктивності сайту, тому краще уникайте його використання.

Custom Image тег

Якщо немає потрібного шаблону тега - ми використовуємо тип Custom HTML (Користувацький тег HTML). Але що робити, якщо нам потрібно запустити скрипт, а у браузері відключено JS? У такому випадку ми використовуємо тип Custom Image (Спеціальне зображення). Цей тип тега працює завдяки другій частині коду GTM, яку ви розміщуєте в< body> :

Саме ця частина дозволить GTM надсилати дані навіть коли JS недоступний. Така частина є в більшості систем аналітики. Ось так це виглядає у коді Facebook:

При встановленні Facebook Pixel цей фрагмент коду необхідно додавати саме в тег цього типу. Якщо ви ще звісно очікуєте, що у користувачів в браузері не буде працювати JS ;)

• У полі Image URL (URL-адреса зображення) вказуєте адресу зображення з усіма потрібними параметрами. Наприклад, для передачі даних про перегляд сторінки у Facebook URL буде наступним:
  https://www.facebook.com/tr?id=226645594772463&ev=PageView&noscript=1.
• У блоці Enable Cache Busting (Увімкнути блокування кешу) за замовчуванням вже вказано параметр gtmcb. Він дозволяє уникнути проблем із відстеженням подій на сайтах, у яких включено кешування. Якщо параметр gtmcb вказано, диспетчер тегів допише до URL зображення відповідний параметр із випадковим значенням:
  https://www.facebook.com/tr?id=226645594772463&ev=PageView&noscript=1 &gtmcb=12345678.
• Так як значення параметра буде відрізнятися при кожному завантаженні, браузеру необхідно буде щоразу підвантажувати зображення і ваша подія фіксуватиметься. Якщо ж параметр Enable Cache Bustling (Увімкнути блокування кешу) вимкнено - інформація буде передаватися тільки при першому завантаженні зображення.

Розширені налаштування під час створення тегів

Розширені налаштування не залежать від типу тега і дозволяють встановити додаткові умови виконання:

• Tag firing priority (Пріоритет запуску тегу) - Параметр визначає порядок запуску тегів. Можна вказати як позитивне, так і негативне значення. Тег з великим значенням спрацьовуватиме раніше. Наприклад, тег з пріоритетом 100 спрацює раніше, ніж теги з пріоритетом 50 і -2 . За замовчуванням пріоритет тега дорівнює 0 .

• Only fire this tag in published containers (Запускати цей тег лише в опублікованих контейнерах) - забороняє тегу спрацьовувати у тестових середовищах, таких як режим попереднього перегляду.
• Enable custom tag firing schedule (Увімкнути спеціальний розклад запуску тегу) - налаштування дозволяє увімкнути тег на вибраний проміжок часу. При цьому обов'язково вказати обидва значення: і дату старту, і дату закінчення. Наприклад, ви можете запускати певні теги лише у період перед Новим роком.

• Tag firing options (Параметри запуску тегів) - дозволяють налаштувати кількість спрацьовувань тега на сторінці:
  • Unlimited (Без обмежень) - тег спрацьовуватиме при кожному виконанні події вказаної в тригері.
  • Once per event (Один раз на подію) – тег спрацює один раз для кожної події. Наприклад, один раз для події клік та один раз для події клік за посиланням.
  • Once per page (Один раз на сторінці) – незалежно від кількості подій тег спрацює лише один раз на сторінку.

• Tag Sequencing (Послідовність тегів) - дозволяє запускати інші теги перед чи після активації поточного. Ви також можете блокувати завантаження тега, якщо попередній не був успішно виконаний. Даний пункт є прикладом незвичайного способу запуску тегів і заслуговує на окремий розбір в одній з наступних статей.

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

У цьому посібнику я спробував розповісти про основні теги, які використовуються вебаналітиками у їхній повсякденній роботі. Якщо ви вважаєте, що якийсь із важливих був опущений – обов'язково напишіть про це у коментарях. Давайте зробимо цей матеріал це кращим разом :)

Якщо вам сподобався матеріал — підписуйтесь на мій канал в Telegram та Facebook.