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

Теги в Google Tag Manager. Посібник для новачків

На момент написання статті в Google Tag Manager існує 76 типів тегів. З них 74 – це різні попередньо встановлені шаблони, наприклад, Google Analytics – Universal Analytics, Google Ads Remarketing, Google Optimize, Hotjar Tracking Code, Google Ads Calls від Website Conversion. Є також 2 типи тегів користувача – Користувальницький HTML і Користувальницьке зображення.Типи тегів у GTM

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

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

      1. Що таке теги в Google Tag Manager і навіщо вони потрібні
      2. Мітки Google Analytics – Universal Analytics
      3. Тег Google Optimize
      4. Тег Hotjar Tracking Code
      5. Custom HTML тег
      6. Custom Image тег
      7. Розширені налаштування під час створення тегів

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

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

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

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

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

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

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

Мітки Google Analytics – Universal Analytics

Шаблон тегу для налаштування Google Analytics є одним з найпопулярніших і найчастіше використовуваних. Кількість налаштувань у ньому просто зашкалює. Серед них і вибір типів відстеження, і додаткові поля для налаштування, параметри користувача та показники, електронна торгівля та групи контенту, налаштування міждоменного відстеження та багато іншого. У цьому невеликому огляді ми розберемо два основні типи відстеження: перегляд сторінки та подію .Типи відстеження у тегу Google Analytics - Universal Analytics

Тип відстеження – Перегляд сторінки

Тип відстеження Перегляд сторінки використовується у двох випадках. Перший і основний – це встановлення базового коду Google Analytics на сайт . Другий – надсилання даних про віртуальні перегляди сторінок.Перегляд сторінки в тезі типу Google Analytics - Universal Analytics

Для надсилання даних за допомогою цього типу тега необхідно лише вибрати змінну з налаштуваннями Google Analytics.

Тип відстеження – Подія

Для Події кількість полів (параметрів) трохи більше, а саме:

      • Категорія – тут вказуємо загальну межу групи подій, наприклад, для відстеження взаємодії з відео можемо використовувати значення Video Tracking .
      • Дія – основна дія, яку зробив користувач. Наприклад, для відео це може бути Play або Pause ; для відстеження форм – Submit (надсилання форми) або Change (початок заповнення форми), а для відстеження скролінгу – відсоток скрола.
      • Ярлик – Додаткова інформація, яку ви хочете передати. Наприклад, для відео це може бути назва відеоролика, який переглянув користувач, для відстеження форм – назва форми, а для скролінгу – сторінка, на якій було вчинено цю дію.
      • Цінність – цінність принесена бізнесу та виражена у грошовому еквіваленті. Якщо якась подія несе бізнесу цінність, ми можемо передавати її в це поле і потім використовувати значення у звітах Google Analytics. Про це поле важливо знати два нюанси: по-перше, цінність, яку ви передасте, можна використовувати при налаштуванні мети. По-друге, оскільки це поле набуває будь-якого числового значення, іноді в нього передають не лише цінність у грошах, а й, наприклад, час, як це зробив Андрій Осипов у своїй статті .
      • Чи не взаємодія – значення в цьому полі дозволяє визначити, впливатиме подія на показник відмов чи ні. Через заперечення у своїй назві цей параметр часто викликає плутанину. Якщо ви вкажете в ньому False , то за правилами подвійного заперечення така подія буде взаємодією користувача і відповідно вона впливатиме на показник відмов . Якщо ж вказати True , то така подія ніяк не впливатиме на показник відмов.Подія у тегу типу Google Analytics - Universal Analytics

Перші чотири параметри дозволяють передати інформацію про подію, що відбулася, і немає певних правил їх заповнення. Головне, щоб вам та вашим колегам була зрозуміла інформація, яку ви передаєте. При цьому лише два з них є обов’язковими. Ви можете сміливо відправляти події, вказавши лише Категорії та Дія. При налаштуванні останнього параметра (Не взаємодія) будьте особливо уважні, оскільки за неправильного значення можна опустити показник відмов до нуля.

Тег Hotjar Tracking Code

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

Налаштування тега Hotjar Tracking Code у GTM

Як бачите, робота із шаблонами тегів у GTM дуже проста. Давайте розберемо ще кілька.

Тег Google Optimize

Зібравши та проаналізувавши різноманітну інформацію, зібрану за допомогою Google Analytics, Hotjar та інших систем аналітики, ви, можливо, захочете зайнятися оптимізацією конверсії. Основний спосіб цього досягти – провести A/B тестування. Наприклад, через Google Optimize.

Базове налаштування цього тега містить лише два параметри. У першому вказуємо ідентифікатор контейнера, у другому – змінну з налаштуваннями Google Analytics.Налаштування тега Google Optimize у GTM

Custom HTML тег

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

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

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

Custom Image тег

Якщо немає потрібного шаблону тега – ми використовуємо тип HTML користувача. Але що робити, якщо нам потрібно запустити скрипт, а у браузері відключено JS? У такому випадку ми використовуємо тип користувача зображення . Цей тип тега працює завдяки другій частині коду GTM, яку ви розміщуєте в< body> :Noscript Google Tag Manager Gode

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

При встановленні Facebook Pixel цей фрагмент коду необхідно додавати саме в тег типуНалаштування Facebook Pixel через тег Custom Image

У полі URL зображення вказуєте адресу зображення з усіма потрібними параметрами. Наприклад, для передачі даних про перегляд сторінки у Facebook URL буде наступним:

https://www.facebook.com/tr?id=226645594772463&ev=PageView&noscript=1.

У блоці Увімкнути блокування кешу за замовчуванням вже вказано параметр gtmcb . Він дозволяє уникнути проблем із відстеженням подій на сайтах, у яких включено кешування. Якщо параметр gtmcb вказано, диспетчер тегів допише до URL зображення відповідний параметр із випадковим значенням:

https://www.facebook.com/tr?id=226645594772463&ev=PageView&noscript=1 &gtmcb=12345678.

Так як значення параметра буде відрізнятися при кожному завантаженні, браузеру необхідно буде щоразу підвантажувати зображення і ваша подія фіксуватиметься. Якщо ж параметр Увімкнути блокування кешу вимкнено – інформація буде передаватися тільки при першому завантаженні зображення.

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

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

  • Пріоритет активації тегів – Параметр визначає порядок запуску тегів. Можна вказати як позитивне, і негативне значення. Тег з великим значенням спрацьовуватиме раніше. Наприклад, тег з пріоритетом 100 спрацює раніше, ніж теги з пріоритетом 50 і -2 . За замовчуванням пріоритет тега дорівнює 0 . У жодному разі не варто забувати, що теги спрацьовуватимуть асинхронно.
  • Включити спеціальний розклад активації тега – Налаштування дозволяє увімкнути тег на вибраний проміжок часу. При цьому обов’язково вказати обидва значення: і дату старту, і дату закінчення. Наприклад, ви можете запускати певні теги лише у період перед Новим роком:Спеціальний розклад активації тега
  • Активувати цей тег лише в опублікованих контейнерах – забороняє тегу спрацьовувати у тестових середовищах, таких як режим попереднього перегляду.
  • Налаштування активації тега – дозволяють налаштувати кількість спрацьовувань тега на сторінці:
    1. Безлімітно – тег спрацьовуватиме при кожному виконанні події вказаної в тригері.
    2. Один раз на подію – тег спрацює один раз для кожної події. Наприклад, один раз для події клік та один раз для події кліка за посиланням.
    3. Один раз на сторінку – незалежно від кількості подій тег спрацює лише один раз на сторінку.Налаштування активації тега
  • Порядок активації тега – дозволяє запускати інші теги перед чи після активації поточного. Ви також можете блокувати завантаження тега, якщо попередній не був успішно виконаний. Даний пункт є прикладом незвичайного способу запуску тегів і заслуговує на окремий розбір в одній з наступних статей.Порядок активації тега

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

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