Google Tag Manager (GTM): що це, як встановити з нуля та налаштувати теги, тригери і змінні

Два темних flat-вікна редактора коду з кольоровими тегами і дужками

Google Tag Manager (GTM) — безкоштовна система керування тегами від Google, що дозволяє додавати, редагувати і видаляти трекінг-коди на сайті без правок у вихідному коді. Замість десятка <script>-вставок для GA4, Meta Pixel, LinkedIn Insight і Hotjar — один контейнер GTM, який ви наповнюєте через веб-інтерфейс tagmanager.google.com. Маркетолог додає тег для нової рекламної кампанії за 5 хвилин — без черги до розробників і без релізу.

Ця стаття — повний посібник по GTM для початківців: від встановлення контейнера до server-side трекінгу і Consent Mode v2. Якщо ви ще вставляєте всі <script> напряму в шаблон сайту — мігруйте на GTM сьогодні: економія десятків годин розробки і повний контроль над аналітикою без участі програмістів.

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

До появи GTM (2012 рік) кожен трекінг-код встановлювали окремо: розробник додавав GA-скрипт у <head>, потім Meta Pixel у footer, потім Yandex Metrica десь посередині, потім ще 5 рекламних пікселів — і так у 50 шаблонів CMS. Кожна правка вимагала релізу: маркетолог хоче рахувати кліки на нову CTA-кнопку → завдання для розробника → код-рев’ю → деплой → перевірка. Тиждень роботи за 10 хвилин у голові маркетолога.

GTM розв’язує цю проблему архітектурно: на сайті встановлюється один контейнер (два фрагменти коду в <head> і <body>), а далі будь-які теги додаються через веб-інтерфейс. Маркетолог сам додає Meta Pixel за 2 хвилини. Аналітик змінює структуру GA4-подій без участі розробника. A/B-тест запускається без правки шаблонів.

Сценарії, де GTM критично потрібен:

Запуск рекламних кампаній з пікселями (Google Ads, Meta, TikTok, LinkedIn, X) — додавати/видаляти швидко без релізів.
Налаштування GA4 з кастомними подіями і Enhanced Ecommerce — прокидати dataLayer push’и через GTM Triggers.
A/B-тестування через VWO, Optimizely, Convert — інтеграція через GTM Tag Templates.
Heatmap-сервіси (Hotjar, Microsoft Clarity, Smartlook) — додавати/видаляти за хвилину.
Форми зворотного зв’язку з валідацією та відправкою в CRM.
Чат-боти (Tidio, Crisp, Intercom) — централізована вставка скриптів.
Структуровані дані schema.org для багатих сніпетів — через Custom HTML Tag.

Архітектура GTM: контейнер, теги, тригери, змінні

GTM працює на чотирьох ключових сутностях:

Google Tag Manager Account
└── Container (1 сайт або застосунок)
    ├── Tags (що відправити)
    ├── Triggers (коли відправити)
    └── Variables (з якими даними)

Account — рівень організації. Зазвичай 1 акаунт = 1 компанія. Один акаунт може містити багато контейнерів (по контейнеру на кожен сайт або проект).
Container — основна одиниця GTM. Один контейнер відповідає одному сайту або застосунку. Контейнер має унікальний ID формату GTM-XXXXXXX і два фрагменти коду для встановлення.
Tag — фрагмент коду або конфігурації, що виконує дію: відправляє подію в GA4, активує піксел, запускає JS-функцію. Кожен тег прив’язаний мінімум до одного тригера.
Trigger — набір умов, за яких тег спрацьовує: перегляд сторінки, клік на кнопку, відправка форми, прокрутка, кастомна подія в dataLayer.
Variable — динамічне значення: URL поточної сторінки, текст кліку, значення з dataLayer, IP користувача (через server-side).

Як встановити GTM на сайт: покрокова інструкція

Крок 1: Створити акаунт і контейнер

Зайдіть на tagmanager.google.com під Google-акаунтом.
Якщо акаунту нема — Create Account → введіть назву компанії, країну.
У блоці Container Setup введіть назву контейнера (зазвичай домен — example.com), виберіть Target Platform — Web.
Натисніть Create, прийміть Terms of Service.

Крок 2: Скопіювати і встановити код контейнера

GTM покаже два фрагменти коду:

Перший — у <head> (якомога вище, бажано перед іншими скриптами):

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->

Другий — одразу після <body> (для noscript fallback):

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

Замініть GTM-XXXXXXX на ваш реальний ID контейнера.

Крок 3: Перевірити встановлення

Очистіть кеш сайту, відкрийте у новому вікні.
Встановіть Google Tag Assistant (Chrome extension) — статус контейнера має бути «Loaded».
У GTM натисніть Preview (правий верхній кут) → введіть URL сайту → відкриється debug-панель внизу. Якщо панель не з’являється — контейнер встановлений неправильно.

Крок 4: Опублікувати порожній контейнер

Натисніть Submit → введіть назву версії (наприклад, «Initial setup») → Publish. Тільки після Publish контейнер починає працювати на сайті — Preview Mode сам по собі нічого не публікує.

Теги: типи і налаштування

GTM підтримує сотні типів тегів через Tag Templates. Найпопулярніші:

Google Analytics: GA4 Configuration

Базовий тег для GA4 — встановлює gtag.js на всіх сторінках:

New Tag → Configuration → Google Analytics: GA4 Configuration.
Measurement ID — G-XXXXXXXXXX (з GA4 Data Stream).
Trigger — All Pages.
Save → Submit → Publish.

Усі автоматичні події GA4 (page_view, scroll, click) тепер пишуться. Детальніше про GA4 — у нашому посібнику з налаштування GA4.

Google Analytics: GA4 Event

Кастомні події (наприклад, add_to_cart, form_submit):

New Tag → Google Analytics: GA4 Event.
Configuration Tag — посилання на ваш GA4 Configuration Tag.
Event Name — add_to_cart.
Event Parameters — додайте value, currency, items.
Trigger — Custom Event на add_to_cart з dataLayer.

Meta Pixel (Facebook)

Через Custom HTML Tag (готовий шаблон є в Community Template Gallery):

New Tag → Discover more tag types → Facebook Pixel.
Pixel ID — з Facebook Events Manager.
Event — PageView, Purchase, Lead тощо.
Trigger — All Pages для PageView, Custom Event для конверсій.

Google Ads Conversion Tracking

Для трекінгу конверсій у Google Ads (потрібен для Smart Bidding):

New Tag → Google Ads Conversion Tracking.
Conversion ID + Conversion Label — з Google Ads → Tools → Conversions.
Conversion Value — {{DLV - ecommerce.value}} через dataLayer.
Trigger — Custom Event на purchase або generate_lead.

Custom HTML

Для будь-якого зовнішнього скрипта без готового шаблону:

New Tag → Custom HTML.
Вставте <script>...</script> з вендорського SDK.
Trigger — All Pages або кастомний.

Custom HTML — найгнучкіший і найнебезпечніший тип: довільний JS виконується на вашому сайті. Перед публікацією Custom HTML тегів обов’язково код-рев’ю.

Тригери: 10 основних типів

Тригери визначають, коли тег спрацьовує. Найкорисніші типи:

Тип тригера	Коли спрацьовує	Типове застосування
Page View	Завантаження сторінки	GA4 Configuration, Meta Pixel PageView
DOM Ready	DOM повністю побудований	Скрипти, що читають DOM
Window Loaded	Усе (включно з картинками) завантажено	Heavy-скрипти, heatmaps
Click — All Elements	Клік на будь-який елемент	Трекінг кліків на CTA-кнопки
Click — Just Links	Клік на `<a>` тег	Outbound links, mailto, tel
Form Submission	Відправка форми	Lead-форми, контактні форми
Element Visibility	Елемент з’явився у viewport	Трекінг прочитання контенту
Scroll Depth	Прокрутка на N% сторінки	Engagement-метрики
YouTube Video	start/progress/complete	Трекінг embedded відео
Custom Event	Кастомна подія в dataLayer	Усе, що прокидує розробник через `dataLayer.push`

Кожен тригер має умови (Fire on Some) — наприклад, «Click Just Links спрацьовує тільки якщо {{Click URL}} починається з https:// і не містить вашого домену» — це ідеальний рецепт для трекінгу outbound-кліків.

Змінні: built-in і user-defined

Змінні — динамічні значення, які підставляються в теги і тригери.

Built-in Variables

GTM має 30+ вбудованих змінних. Найкорисніші:

{{Page URL}}, {{Page Path}}, {{Page Hostname}} — поточна URL.
{{Click URL}}, {{Click Text}}, {{Click Element}} — інформація про натиснутий елемент.
{{Form ID}}, {{Form URL}} — про відправлену форму.
{{Scroll Depth Threshold}} — % прокрутки.
{{Video Title}}, {{Video Current Time}} — для YouTube.
{{Container ID}}, {{Container Version}} — для self-debug.

Для активації: Variables → Configure → відмітьте потрібні чек-боксами.

User-Defined Variables

Кастомні змінні. Найважливіші типи:

Constant — статичне значення:

{{GA4 Measurement ID}} = G-XXXXXXXXXX

Data Layer Variable (DLV) — читає з dataLayer:

{{DLV - ecommerce.value}} → читає dataLayer.ecommerce.value
{{DLV - user.id}} → читає dataLayer.user.id

Custom JavaScript — функція, що повертає значення:

function() {
  return document.title.toLowerCase();
}

Lookup Table — мапінг ключ→значення (наприклад, ID країни → назва).

Cookie — читає cookie за назвою (наприклад, _ga для client_id GA4).

DataLayer: серце правильного трекінгу

DataLayer — глобальний JavaScript-масив window.dataLayer, у який сайт пушить структуровані події. GTM ловить ці push’и через Custom Event Trigger і дістає параметри через Data Layer Variables.

Базовий приклад push’у add_to_cart для Enhanced Ecommerce GA4:

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({ ecommerce: null });  // очищення попереднього стану
window.dataLayer.push({
  event: 'add_to_cart',
  ecommerce: {
    currency: 'UAH',
    value: 1490,
    items: [{
      item_id: 'SKU-12345',
      item_name: 'Шкіряний рюкзак',
      item_category: 'Аксесуари',
      price: 1490,
      quantity: 1
    }]
  }
});

У GTM далі:

Створіть Custom Event Trigger з Event Name = add_to_cart.
Створіть Data Layer Variable {{DLV - ecommerce.value}} (path = ecommerce.value).
Створіть GA4 Event Tag з Event Name = add_to_cart, Parameter value = {{DLV - ecommerce.value}}, Parameter currency = {{DLV - ecommerce.currency}}, Parameter items = {{DLV - ecommerce.items}}.

Готовий конструктор dataLayer push’ів — наш GA4 Event Builder.

Чому dataLayer критичний: альтернатива — скрапінг DOM (читати клас кнопки, текст елемента). Це ламається при будь-якому редизайні. DataLayer — контракт між бекендом і трекінгом, що переживає зміни верстки.

Preview Mode: тестування перед публікацією

Preview Mode — обов’язковий етап перед кожною публікацією. Без перевірки в Preview можна задеплоїти зламаний контейнер, що рахуватиме конверсії неправильно тиждень — і виявити лише через дисбаланс у звітах.

Як користуватися:

У GTM натисніть Preview (правий верхній кут).
Введіть URL сайту → Connect.
Відкриється два вікна: ваш сайт з debug-bannerом унизу + Tag Assistant у новій вкладці.
У Tag Assistant зліва — хронологія подій (Page View, Click, Custom Events).
Вибравши подію, праворуч бачите: які теги спрацювали (Tags Fired), які ні (Tags Not Fired) і чому, значення всіх змінних, повний state dataLayer на момент події.
Перейдіть на сайті по сценарію (натисніть кнопку, відправте форму) — нові події з’являться в Tag Assistant.
Перевірте в DataLayer вкладці, що ваші push’и проходять; у Variables — що значення коректні.
Якщо все ок — закрийте Preview, натисніть Submit → введіть назву версії і опис → Publish.

Версії GTM зберігаються — у разі помилки можна Rollback на попередню за один клік.

Server-side GTM: коли і навіщо

Темний футуристичний 3D-кластер серверів з cyan і orange неоновими з’єднаннями

Server-side GTM (sGTM) — контейнер GTM, що запускається на вашому сервері (зазвичай Google Cloud Run або self-hosted), а не в браузері користувача. Архітектура:

Браузер → ваш sGTM endpoint (gtm.example.com)
              ↓
              ├── GA4
              ├── Meta Pixel (Conversions API)
              ├── TikTok Events API
              └── ваш CRM

Замість того щоб браузер відправляв 10 запитів напряму до Google/Meta/TikTok (легко блокується ad-blockers і Safari ITP), він шле один запит на ваш gtm.example.com, а сервер вже forward’ить дані вендорам.

Переваги sGTM:

Обхід браузерних блокувань. Ваш домен — не у фільтрах ad-blockers.
First-party cookies. Безмежний retention (vs 7 днів у Safari ITP для third-party).
Очищення PII. Видалити email/phone з GA4 події перед відправкою.
Збагачення даних. Підтягнути LTV з CRM, додати customer segment з бекенду.
Server-side conversion APIs. Meta CAPI, TikTok Events API, LinkedIn CAPI — точніший атрибут.
Одне навантаження на клієнтський браузер замість 10 пікселів.

Мінуси:

Хостинг $50-300/міс у Google Cloud Run (залежить від трафіку).
Потрібен DevOps для setup + моніторинг.
Складніший дебаг — Preview Mode працює, але коректно інтерпретувати server-side виклики складніше.

Коли потрібен: трафік >100k/міс, високі вимоги до точності атрибуції, бажання зменшити втрати від Safari ITP, потреба у Conversions API від Meta/TikTok.

З березня 2024 року Google зробив Consent Mode v2 обов’язковим для роботи Google Ads з аудиторіями ЄС/ЄЕЗ/UK. Без нього: ремаркетинг-аудиторії пусті, Smart Bidding отримує менше сигналів, modeled conversions не працюють.

Реалізація в GTM:

Cookie banner (Cookiebot, OneTrust, Iubenda або кастомний) повертає consent state користувача.
У GTM Tag Templates → знайдіть Consent Mode template (або встановіть з Community Template Gallery, наприклад «Consent Mode (Google tags) v2» від Simo Ahava).
Створіть Consent Initialization Tag з тригером Consent Initialization — All Pages. Установіть Default Consent State (denied для ЄС, granted для інших країн) для 4 типів:
- ad_storage — реклама.
- analytics_storage — аналітика.
- ad_user_data — передача даних у Google Ads.
- ad_personalization — персоналізація реклами.
Створіть Update Consent Tag, що тригериться подією cookie_consent_update з вашого banner’а — оновлює стан після вибору користувача.
Перевірте в Preview Mode — у вкладці Consent видно поточний стан.

Принцип роботи Consent Mode v2: коли користувач не дав згоди на cookies, GA4 не зупиняє трекінг повністю — він збирає анонімні cookieless pings (без personal identifiers) і використовує машинне навчання для побудови modeled conversions. У звітах ви бачите комбінацію реальних і modeled даних, що зменшує втрати від високих rejection rates у ЄС.

Версії, робочі простори, дозволи

GTM має повноцінну систему контролю версій:

Workspace — паралельний простір для роботи. Команда може мати 50 робочих просторів, кожен зі своїм набором правок (наприклад, аналітик працює у Workspace «GA4 events», маркетолог — у Workspace «Meta Pixel»). Зміни не конфліктують до моменту merge.
Version — снапшот контейнера. Створюється при кожному Submit. Усі версії зберігаються — Rollback на попередню за один клік.
Environment — окремі контейнери для Production/Staging/Dev. Можна публікувати в Staging без впливу на Production.

Ролі користувачів:

Read — дивитися контейнер.
Edit — редагувати робочий простір (без публікації).
Approve — затверджувати зміни.
Publish — публікувати в Production.

Для команд з >3 людей рекомендується розділення Edit / Publish — щоб одна людина не задеплоїла зламані теги без рев’ю.

Міграція з Universal Analytics на GA4 через GTM

Universal Analytics остаточно вимкнено 1 липня 2024 — старі UA-теги в GTM треба видалити або переписати. Покроково:

Аудит UA-тегів. У GTM Tags → пошук типу ‘Universal Analytics’ → списком усі legacy-теги. Зробіть скрін для архіву.
Видалити або Pause UA Pageview Tag. Замість нього створіть GA4 Configuration Tag з вашим Measurement ID G-XXXXXXXXXX і тригером All Pages.
Переписати UA Event Tags. Кожен UA Event Tag (Category/Action/Label/Value) → новий GA4 Event Tag з Event Name (snake_case: purchase, add_to_cart, form_submit) і параметрами. Старі Category/Action/Label не передаються — у GA4 інша модель.
Перебудувати dataLayer для Enhanced Ecommerce. UA використовував products[], GA4 — items[] з обов’язковими currency і value. Розробник має переписати push’и на checkout, product view, purchase сторінках.
Налаштувати Key Events у GA4 інтерфейсі (раніше «Conversions») — позначте важливі події перемикачем «Mark as Key Event».
Підключити Google Ads до GA4 для імпорту Key Events як Conversions — для Smart Bidding.
Перевірити в Preview Mode + GA4 DebugView — кожна подія має з’являтися у DebugView у режимі реального часу.
Видалити noscript UA-теги і fallback gtag.js, що дублюються з GTM — інакше події рахуються двічі.

Детально про GA4 архітектуру і налаштування — у нашому посібнику з GA4 і GA4 Setup Checklist.

Типові помилки під час налаштування GTM

Не публікувати після Submit. Preview Mode не публікує контейнер — натиснули Submit, але забули Publish → нічого не працює на live-сайті.
Дублювання GA4 + UA + gtag.js. Якщо встановлені і GTM, і прямий gtag.js у <head>, події рахуються двічі. Виберіть один спосіб (рекомендовано — тільки через GTM).
Тригер All Pages для важких скриптів. Heatmap-сервіси (Hotjar) не треба завантажувати на checkout — вони уповільнюють conversion-сторінки. Виключіть через тригер з умовою.
Не використовувати Custom Event Triggers. Якщо весь трекінг будується на DOM-селекторах (Click — All Elements з умовою на клас) — будь-який редизайн ламає аналітику. Використовуйте dataLayer push’и.
Custom HTML без перевірки. Custom HTML Tag виконує довільний JS на вашому сайті — без код-рев’ю можна занести вразливість або зламати верстку.
Не виключати internal traffic. Команда заходить на сайт щодня → шум у звітах. Виключіть через GA4 → Data Streams → Configure tag settings → Define internal traffic.
Не налаштовано Consent Mode v2 для ЄС. Ремаркетинг не оновлюється, Smart Bidding страждає, modeled conversions не працюють.
Відсутність версіонування і опису. Без описів у Version Notes неможливо зрозуміти, що змінилося. Завжди пишіть «Додав GA4 purchase event з parameter value» замість «update».

Скільки коштує GTM

Стандартний Google Tag Manager — повністю безкоштовний. Без обмежень на кількість контейнерів, тегів, тригерів, користувачів.

Ліміти стандартної версії:

500 тегів на контейнер.
30 версій історії (старіші зливаються).
50 робочих просторів (workspaces).
10 контейнерів на акаунт (можна запросити збільшення).

Платна версія Google Tag Manager 360 — частина Google Marketing Platform, від $150 000/рік разом з GA360. Потрібна тільки великим enterprise з:

50+ маркетологами, що паралельно правлять контейнер.
Потребою у Zone-функціоналі (приховати теги від субпідрядників).
SLA від Google.

99% бізнесів стандартної версії GTM більш ніж достатньо.

Server-side GTM — софт безкоштовний, платіть тільки за хостинг. Google Cloud Run ціна:

Малий сайт (<50k відвідувачів/міс) — $50-100/міс.
Середній (50-500k) — $100-300/міс.
Великий (>1M) — $300-1000/міс.

Пов’язані ресурси на сайті

Глосарій:

Інструменти:

Чек-листи:

Посібники:

Google Analytics 4 — повний посібник

Часті запитання (FAQ)

Що таке Google Tag Manager простими словами?

Безкоштовний інструмент Google для додавання трекінг-кодів (GA4, Meta Pixel, Google Ads) на сайт без правок у вихідному коді. Працює на трьох сутностях: теги (що), тригери (коли), змінні (з якими даними).

Як встановити GTM на сайт за 10 хвилин?

10 кроків: створити акаунт на tagmanager.google.com → створити Web-контейнер → скопіювати два фрагменти коду в <head> і <body> → перевірити через Tag Assistant → запустити Preview → опублікувати порожній контейнер. Далі додаються теги.

У чому різниця між тегом, тригером і змінною?

Тег — що зробити (відправити подію в GA4). Тригер — коли зробити (при кліку на кнопку). Змінна — з якими даними (URL сторінки, текст кліку, значення з dataLayer). Кожен тег має мінімум один тригер.

Що таке dataLayer?

Глобальний JavaScript-масив window.dataLayer, у який сайт пушить структуровані події (add_to_cart, purchase, form_submit) з параметрами. GTM ловить push’и через Custom Event Trigger. Альтернатива — крихкий скрапінг DOM.

Які бувають типи тригерів?

Page View, Click (All Elements / Just Links), Form Submission, Element Visibility, Scroll Depth, YouTube Video, Timer, History Change (для SPA), JavaScript Error, Custom Event (найгнучкіший, через dataLayer).

Що таке Preview Mode?

Вбудований debug-режим. Натиснувши Preview, бачите хронологію подій, які теги спрацювали, значення змінних, state dataLayer. Обов’язковий етап перед Publish — без нього можна задеплоїти зламаний контейнер.

Що таке server-side GTM?

Контейнер GTM, що запускається на вашому сервері (Google Cloud Run, $50-300/міс). Сайт відправляє події на ваш sGTM endpoint, а сервер forward’ить у GA4/Meta/TikTok. Обходить ad-blockers, дає first-party cookies, дозволяє очищати PII і збагачувати дані з CRM.

(1) Підключити cookie banner; (2) Створити Consent Initialization Tag з тригером Consent Initialization — All Pages; (3) Default Consent State = denied для ЄС; (4) Update Consent Tag на події з banner’а; (5) Перевірити в Preview → Consent. Обов’язково для Google Ads у ЄС з березня 2024.

Як перенести Universal Analytics теги в GA4 через GTM?

Видалити всі UA Pageview і Event Tags → створити GA4 Configuration Tag з Measurement ID G-XXXXXXXXXX → переписати кожен UA Event Tag в GA4 Event Tag з snake_case event name → перебудувати dataLayer для Enhanced Ecommerce GA4 (items[] замість products[]) → позначити Key Events.

Чи безкоштовний Google Tag Manager?

Так, повністю безкоштовний. Ліміти: 500 тегів/контейнер, 30 версій, 50 workspaces. GTM 360 — від $150 000/рік разом з GA360, потрібен тільки для великого enterprise. Server-side GTM теж безкоштовний як софт, платіть тільки за хостинг.