Google Tag Manager: що це і як налаштувати
Google Tag Manager (Менеджер тегів Google, скорочено GTM) - безкоштовний інструмент, який дозволяє додавати на сайт коди аналітики, пікселі реклами і будь-які інші скрипти без участі програміста. Замість десятка окремих фрагментів коду на сайт ставиться один контейнер, а все інше вмикається й вимикається в веб-інтерфейсі.
Різниця відчувається не одразу, а на третьому-четвертому завданні. Поставити лічильник аналітики можна й напряму в шаблон. Але коли через місяць потрібен піксель Meta, ще через тиждень - відстеження натискань на кнопку «Замовити», а потім виявляється, що частину подій треба вимкнути на сторінці подяки, кожна така дрібниця перетворюється на задачу розробнику з очікуванням у кілька днів. З GTM це робота на десять хвилин у браузері.
Плутати GTM з самою аналітикою не варто. Менеджер тегів нічого не вимірює: він лише доставляє на сторінку чужі коди і вирішує, коли їх запустити. Дані збирає Google Analytics, Meta, Google Ads - кожен свій. Тому фраза «у нас стоїть GTM» ще нічого не каже про те, чи є на сайті аналітика.
Ми ставимо Менеджер тегів на кожному проєкті, де є хоч якась аналітика, і нижче описали порядок, за яким це робимо самі. Інтерфейс подано українською - саме так він виглядає, якщо мова акаунта Google українська.
1. Створення облікового запису і контейнера
Зайдіть на tagmanager.google.com під тим акаунтом Google, який має залишитися власником. Це важливіше, ніж здається: якщо завести контейнер з особистої пошти підрядника, при зміні підрядника доступ доведеться випрошувати.
Натисніть Створити обліковий запис. Форма складається з двох частин.
У блоці Створення облікового запису заповніть поле Назва облікового запису і виберіть Країну. Обліковий запис - це верхній рівень, зазвичай одна компанія. Назвою краще ставити назву бізнесу, а не домен: доменів у компанії з часом може стати кілька.
У блоці Налаштування контейнера заповніть Назву контейнера (тут якраз доречний домен) і виберіть Цільову платформу. Варіанти: Веб-сайт, iOS, Android, AMP і Сервер. Для звичайного сайту потрібен перший.
Ще в першому блоці є чекбокс «Передавати анонімні дані Google і іншим користувачам». Він необовʼязковий і на роботу контейнера не впливає.
Контейнер - це набір тегів, тригерів і змінних, який встановлюється на сайт. Один сайт - один контейнер. Після створення він отримує ідентифікатор виду GTM-XXXXXXX, і саме цей ідентифікатор зашитий у код, який ви поставите на сайт.
2. Встановлення коду на сайт
Одразу після створення контейнера відкриється вікно Вказівки зі встановлення з двома фрагментами коду. Пізніше його можна відкрити знову: вкладка Адміністратор, розділ КОНТЕЙНЕР, пункт Установити Менеджер тегів Google.
Google формулює завдання так: скопіюйте наведений код і вставте його на кожну сторінку свого вебсайту. Фрагментів два, і місця в них різні.
Перший фрагмент - звичайний <script>. Вказівка дослівна: вставте цей код якомога ближче до початкового тегу <head> сторінки. Чим вище він стоїть, тим раніше завантажиться контейнер і тим менше подій встигне загубитися до його ініціалізації.
Другий фрагмент - <noscript> з прихованим iframe. Його вставляють відразу після початкового тегу <body>. Він відпрацьовує лише в браузерах із вимкненим JavaScript, тому впливає на дуже малу частку трафіку, але Google його все одно дає, і прибирати його самовільно не варто.
У тому ж вікні є третій пункт - поле для перевірки сайту. Введіть адресу і натисніть кнопку перевірки: Google сам відкриє сторінку і скаже, чи бачить контейнер.
На CMS цей крок зазвичай простіший. У WordPress, OpenCart, Хорошоп і більшості інших систем є або поле для коду в шапці, або готовий модуль, куди достатньо вписати ідентифікатор GTM-XXXXXXX. Якщо сайт саморобний, фрагменти ставлять у шаблон, який спільний для всіх сторінок, а не в окремі шаблони - інакше на частині сторінок тегів не буде, і дані поїдуть нерівно.
3. Робоча область: що всередині контейнера
Контейнер відкривається на вкладці Робоча область. Поруч є ще дві: Версії і Адміністратор.
Головний екран називається Огляд. На ньому видно кілька речей, на які варто дивитися регулярно.
Показник Якість (Контейнер) відповідає на найчастіше питання новачка: чи взагалі працює те, що я поставив. Якщо контейнер отримує дані, Google так і пише, що проблем не виявлено. Якщо ні - там буде попередження, що з тегу не отримано даних, і посилання на вказівки зі встановлення.
Блок Зміни, що очікують на розгляд показує все, що ви наробили в робочій області, але ще не опублікували. Лічильник змін висить і в шапці: Змін робочої області. Поки ви не натиснули публікацію, на сайті нічого з цього не діє.
У лівому меню - три сутності, з яких і складається вся робота: Теги, Тригери, Змінні. За визначенням Google тег виконує певну функцію на сайті, тригер змушує тег спрацювати, коли відбувається подія, а змінні спрощують і автоматизують налаштування тегів. Далі про кожну по черзі.
4. Теги: що саме ви запускаєте
Тег - це і є код, який GTM підставить на сторінку. Лічильник Google Analytics 4, піксель Meta, код ремаркетингу Google Ads, довільний HTML - усе це теги.
Натисніть Створити тег (на порожньому контейнері кнопка може називатися Додати тег). Відкриється форма з назвою Тег без назви і двома блоками.
Верхній блок - Конфігурація тегу. Поки тип не вибрано, там написано: виберіть тип тегу, щоб почати налаштування. Натиснувши на блок, ви отримаєте список готових шаблонів: Google Analytics, Google Ads, а також окремий тип для довільного HTML, якщо потрібного шаблону немає.
Нижній блок - Тригери, з підказкою: виберіть тригер, щоб запускати цей тег. Без тригера тег не спрацює ніколи, тому обидва блоки обовʼязкові.
Коли обидва заповнені, натискається Зберегти. Тег зʼявиться у списку і в лічильнику незакритих змін.
Відразу привчіть себе до назв. GA4 - перегляд сторінки через півроку читається, Тег 3 не читається взагалі. У контейнері, який ведуть двоє людей два роки, це різниця між п'ятьма хвилинами і півднем.
5. Тригери: коли тег спрацьовує
Тригер відповідає на питання «за якої умови». Розділ Тригери у новому контейнері порожній, і Google прямо про це пише: у цьому контейнері немає тригерів, натисніть кнопку «Створити», щоб створити тригер.
Найчастіші типи в роботі такі.
Перегляд сторінки - спрацьовує при завантаженні сторінки. Базовий тригер для лічильника аналітики.
Кліки - спрацьовує при натисканні на елемент. Саме так відстежують кнопки «Замовити», «Зателефонувати» чи натискання на номер телефону.
Надсилання форми - відправка форми. Тут є нюанс: на сайтах, де форма надсилається через JavaScript без перезавантаження сторінки, стандартний тригер часто не спрацьовує, і подію доводиться ловити інакше.
Спеціальна подія - подія, яку на сайт передає розробник через dataLayer. Це найнадійніший шлях для важливих речей на кшталт покупки: він не залежить від того, як зверстана кнопка, і не ламається після зміни дизайну.
Будь-який тригер можна звузити умовами - наприклад, рахувати кліки лише на сторінках певного розділу.
6. Змінні: звідки теги беруть дані
Змінна - це значення, яке підставляється в тег або в умову тригера під час спрацювання. Адреса сторінки, текст натиснутої кнопки, ідентифікатор товару.
У розділі Змінні є блок Вбудовані змінні і кнопка Налаштувати поруч. За замовчуванням увімкнено далеко не все. Перед налаштуванням кліків обовʼязково увімкніть групу змінних кліку: Click Classes, Click Element, Click ID, Click Target, Click Text, Click URL. Без них у режимі перегляду ви просто не побачите, на що клікнули, і не зможете написати умову.
У типах змінних ви зустрінете Змінну рівня даних (значення з dataLayer), Змінну автоматичної події (те, що GTM визначає сам) і Спеціальну подію. Нижче вбудованих можна створювати власні змінні користувача.
7. Попередній перегляд і публікація
Тут новачки роблять найдорожчу помилку, тому винесемо її окремо: поки ви не натиснули «Надіслати», на сайті не змінилося нічого. Збережений тег живе тільки у вашій робочій області.
Спершу перевірка. Кнопка Попередній перегляд у правому верхньому куті відкриває Tag Assistant: він приєднується до вашого сайту в окремій вкладці і показує, які теги спрацювали на кожній дії, які ні і які значення були в змінних. Це єдиний спосіб переконатися, що тригер справді ловить те, що потрібно, а не сусідню кнопку.
Далі публікація. Кнопка Надіслати створює версію контейнера. Версію варто назвати осмислено, бо саме за цими назвами ви шукатимете, коли щось зламається: «додали GA4 і кліки по телефону» краще за назву за замовчуванням.
Опубліковані версії лежать на вкладці Версії. Звідти видно, хто і коли що змінив, і будь-яку попередню версію можна опублікувати знову. Фактично це кнопка скасування для всієї аналітики сайту, і вона рятує частіше, ніж хотілося б.
Поширені помилки
Подвійний облік. Найчастіша ситуація: лічильник аналітики стоїть і в коді сайту, і тегом у GTM. Сеанси і події починають рахуватися двічі, конверсії роздуваються, звіти стають марними. Перед тим як ставити тег GA4, перевірте, чи немає лічильника прямо в шаблоні.
Налаштували і не опублікували. Тег збережений, у лічильнику змін висить одиниця, на сайті порожньо. Якщо після налаштування дані не пішли - спершу подивіться на кнопку Надіслати, а вже потім шукайте глибші причини.
Контейнер не на всіх сторінках. Код поставили в один шаблон, а сторінки кошика чи подяки використовують інший. Дані виглядають правдоподібно, але половини шляху користувача в них немає. Перевіряється швидко: відкрити кілька різних типів сторінок у режимі попереднього перегляду.
Контейнер заведений на чужу пошту. Класика при зміні підрядника. Власником має бути акаунт компанії, решті видається доступ через Керування користувачами в розділі Адміністратор.
Другий фрагмент коду загубився. При переносі на нову CMS часто ставлять тільки <script>, а <noscript> забувають. Критичним це не є, але робити це навмисно сенсу немає.
GTM поставили і на цьому зупинилися. Сам собою Менеджер тегів не збирає нічого. Він лише доставляє на сайт чужі коди. Якщо в ньому не налаштовано жодного тега, сайт не має аналітики, скільки б контейнерів там не стояло.