Блог

← Усі статті

Google Tag Manager для початківців — повний посібник з налаштування

TL;DR: Google Tag Manager (GTM) дозволяє додавати та керувати тегами відстеження на сайті без редагування коду. Щоб почати: створіть акаунт GTM та Web-контейнер, встановіть два фрагменти коду на сайт, а потім через інтерфейс GTM створюйте теги (що відстежувати), тригери (коли спрацьовувати) та змінні (динамічні значення). Протестуйте все в Preview mode перед публікацією. Після налаштування ви зможете додати GA4, Google Ads, Meta Pixel та десятки інших інструментів — усе з одного дашборду.

Якщо ви працюєте в маркетингу, аналітиці або веб-розробці, вам напевно доводилося чути прохання "додати піксель відстеження" або "відправити подію, коли хтось натискає кнопку." Без Google Tag Manager кожен такий запит означає редагування коду сайту, деплой змін і надію, що нічого не зламається. GTM усуває це вузьке місце, надаючи візуальний інтерфейс для керування всім відстеженням з одного місця.

Цей посібник проведе вас від створення першого акаунту GTM до публікації готового контейнера. Попередній досвід не потрібен.

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

Google Tag Manager — це безкоштовна система керування тегами від Google. Вона знаходиться між вашим сайтом і маркетинговими/аналітичними інструментами, які ви хочете використовувати. Замість того щоб вбудовувати кожен скрипт відстеження в код сайту, ви встановлюєте один код GTM і керуєте всім іншим через веб-інтерфейс.

Ось що дає GTM:

Альтернатива — вручну додавати та видаляти теги скриптів із коду сайту — не масштабується. Як тільки у вас більше двох-трьох інструментів відстеження, GTM економить час і зменшує кількість помилок.

Як створити акаунт і контейнер GTM?

Акаунт GTM зазвичай відповідає вашій компанії. Всередині акаунту ви створюєте контейнери — по одному на кожен сайт, мобільний додаток або серверне середовище.

  1. Перейдіть на tagmanager.google.com і увійдіть з Google-акаунтом.
  2. Натисніть Create Account.
  3. Введіть Account Name (назва компанії) та виберіть Country.
  4. У розділі Container Setup введіть Container Name (зазвичай ваш домен: example.com).
  5. Виберіть Web як цільову платформу.
  6. Натисніть Create і прийміть умови використання.

GTM одразу покаже вам два фрагменти коду. Не закривайте це вікно — вони потрібні для наступного кроку.

Порада щодо структури акаунту: якщо ви керуєте кількома сайтами, створіть один акаунт GTM з окремими контейнерами для кожного сайту. Це підтримує чистоту дозволів і уникає плутанини. Не розміщуйте кілька сайтів в одному контейнері.

Як встановити код GTM на сайт?

GTM дає вам два фрагменти коду. Обидва обов'язкові:

  1. Тег <script> — вставте його якомога вище в розділі <head> на кожній сторінці. Він завантажує GTM асинхронно.
  2. Тег <noscript> — вставте його одразу після відкриваючого тегу <body>. Це запасний варіант для браузерів з вимкненим JavaScript.

Де саме додавати код — залежить від вашої платформи:

ПлатформаДе додати
WordPressВикористайте плагін "Insert Headers and Footers" або відредагуйте header.php в темі
ShopifyВідредагуйте theme.liquid — додайте script у <head> і noscript після <body>
WixSettings → Custom Code → додайте в Head і Body
Next.js / ReactДодайте в _document.js або використайте пакет @next/third-parties
Статичний HTMLВідредагуйте кожен HTML-файл напряму або використайте спільний шаблон

Перевірка: після встановлення поверніться до GTM і натисніть Preview. Введіть URL вашого сайту. Якщо Tag Assistant підключиться і покаже "Tag Manager Loaded," встановлення правильне.

Що таке теги, тригери та змінні в GTM?

Це три будівельні блоки Google Tag Manager. Розуміння їх взаємозв'язку — ключ до ефективного використання GTM.

Теги — це те, що ви хочете зробити: відправити перегляд сторінки в GA4, активувати подію Meta Pixel, завантажити скрипт Hotjar. Тег — це фрагмент коду, який GTM вставляє на сторінку, коли виконуються умови.

Тригери визначають, коли тег спрацьовує. Тригер слідкує за конкретною подією на сторінці — клік, завантаження сторінки, відправка форми, прокрутка — і повідомляє GTM "активуй тег зараз." Кожен тег потребує хоча б одного тригера.

Змінні — це динамічні значення, які використовують теги та тригери. Деякі вбудовані (Page URL, Click Text, Referrer). Інші ви створюєте самостійно (Data Layer variable для ціни товару або константа з GA4 Measurement ID).

Взаємозв'язок простий: коли умова тригера виконується, GTM активує тег, а тег може використовувати змінні для передачі динамічних даних.

Приклад: ви хочете відстежити, коли хтось натискає кнопку "Sign Up." Тригер — "Click — All Elements," де Click Text дорівнює "Sign Up." Тег — GA4 Event тег, який відправляє подію click_signup. Змінна {{Click URL}} фіксує URL призначення як параметр події.

Як налаштувати GA4 через Google Tag Manager?

Google Analytics 4 — найпоширеніший перший тег, який налаштовують у GTM. Ось процес:

  1. Отримайте Measurement ID. У GA4 перейдіть до Admin → Data Streams → виберіть Web stream. Скопіюйте Measurement ID (формат: G-XXXXXXXXXX).
  2. Створіть тег Google Tag у GTM. Перейдіть до Tags → New → Tag Configuration → виберіть Google Tag. Введіть Measurement ID. Встановіть тригер All Pages.
  3. Збережіть і протестуйте. Натисніть Preview, завантажте свій сайт і переконайтеся, що Google Tag спрацьовує на подію Page View в Tag Assistant.

Цей один тег забезпечує базове встановлення GA4: перегляди сторінок, сесії, залучення користувачів та всі автоматично зібрані події. Розширені події (scroll, outbound clicks, file downloads, video engagement) можна увімкнути в GA4 Admin → Data Streams → Enhanced Measurement.

Порада: створіть константну змінну в GTM з назвою GA4 Measurement ID та значенням G-XXXXXXXXXX. Використовуйте цю змінну у всіх GA4 тегах. Якщо вам коли-небудь потрібно змінити Measurement ID, ви зміните його в одному місці замість редагування кожного тегу.

Як створити перший тег подій у GTM?

Коли GA4 вже відстежує перегляди сторінок, наступний крок — кастомні події. Розглянемо відстеження кліку на кнопку як приклад.

  1. Увімкніть вбудовані змінні. Перейдіть до Variables → Configure. Увімкніть Click Text, Click URL, Click Classes, Click Element та Click ID.
  2. Створіть тригер. Перейдіть до Triggers → New. Виберіть Click — All Elements. Встановіть спрацювання на "Some Clicks," де Click Text дорівнює "Get Started" (або використайте CSS selector для більшої точності).
  3. Створіть тег. Перейдіть до Tags → New. Виберіть Google Analytics: GA4 Event. Введіть Measurement ID (або посилання на константну змінну). Встановіть Event Name click_get_started. Додайте параметри: button_text = {{Click Text}}, page_path = {{Page Path}}.
  4. Приєднайте тригер. У розділі Triggering виберіть створений тригер.
  5. Збережіть усе.

Підхід з CSS selector надійніший, ніж співставлення за Click Text, тому що текст кнопки може змінитися через A/B тести або переклади. Використовуйте data-* атрибути або стабільні селектори на кшталт button[name="cta-signup"], коли це можливо.

GTM Event Helper генерує CSS selector за вас. Натисніть на будь-який елемент на сторінці, і розширення покаже кілька варіантів селекторів, ранжованих за стабільністю — з чіткими бейджами, які вказують, які селектори безпечні, а які можуть зламатися.

Як використовувати Preview mode та Tag Assistant у GTM?

Preview mode — це ваша страхова сітка. Він дозволяє протестувати кожну зміну до того, як вона вплине на реальних користувачів.

  1. У GTM натисніть кнопку Preview у правому верхньому кутку.
  2. Введіть URL сайту і натисніть Connect. Сайт відкриється в новій вкладці з підключеним Tag Assistant.
  3. Взаємодійте зі сторінкою — натискайте кнопки, відправляйте форми, прокручуйте — і спостерігайте за панеллю Tag Assistant внизу.
  4. Кожна подія (Page View, Click, DOM Ready тощо) з'являється в лівій бічній панелі. Натисніть на подію, щоб побачити, які теги спрацювали, а які ні.
  5. Натисніть на конкретний тег, щоб переглянути деталі: відправлені значення, який тригер активував його та які змінні використовувались.

Tags Not Fired не менш важливий, ніж Tags Fired. Якщо ваш тег з'являється під "Tags Not Fired," перевірте умови тригера — зазвичай умова спрацювання не збігається з реальними даними елемента.

Поширені поради з налагодження:

Як опублікувати зміни в GTM?

Зміни в GTM не є активними, доки ви їх не опублікуєте. Це зроблено навмисно — дає можливість протестувати та перевірити перед тим, як щось потрапить до користувачів.

  1. Після тестування в Preview mode натисніть Submit у правому верхньому кутку GTM.
  2. Виберіть Publish and Create Version.
  3. Введіть Version Name та Version Description. Будьте конкретні: "Add GA4 base tag + click_get_started event" набагато краще, ніж "Updates."
  4. Натисніть Publish.

Ваші теги тепер активні. Зміни зазвичай поширюються за кілька хвилин, хоча може зайняти трохи більше часу через кешування CDN.

Відкат: якщо щось пішло не так, перейдіть до Versions у лівій бічній панелі, знайдіть попередню робочу версію та натисніть меню з трьома крапками → Publish. Це миттєво повертає попередній стан. Це одна з найбільших переваг GTM перед хардкодженими скриптами — відкат займає 10 секунд, а не повний деплой коду.

Що таке workspaces та versions у GTM?

Workspaces та versions — це система спільної роботи та контролю версій у GTM.

Versions — це знімки. Кожного разу, коли ви публікуєте, GTM створює нумеровану версію всього контейнера — всі теги, тригери, змінні та папки на той момент. Ви можете порівняти будь-які дві версії, щоб побачити, що саме змінилось, і можете опублікувати будь-яку історичну версію для відкату.

Workspaces — це як гілки. Безкоштовний план GTM дає 3 workspaces; GTM 360 дає необмежену кількість. Кожен workspace — це незалежна копія контейнера, де ви можете вносити зміни, не впливаючи на інших. Коли ви готові, ви публікуєте зі свого workspace, і GTM мерджить зміни в активний контейнер.

Практичний workflow для команд:

Якщо два workspaces змінюють один і той самий тег, GTM покаже конфлікт при спробі публікації та попросить його вирішити — подібно до merge conflict у Git.

Як організувати теги та тригери, коли їх стає багато?

Контейнер з 5 тегами легко керувати. Контейнер з 50 тегами стає хаосом без структури. Організовуйте з самого початку:

Конвенції найменування. Використовуйте послідовний шаблон з префіксами для тегів, тригерів і змінних:

Теги:      GA4 - Event - click_get_started
           Meta - Pixel - PageView
           Ads - Conversion - purchase

Тригери:   Click - Get Started Button
           PV - All Pages
           Form - Contact Submit

Змінні:    Const - GA4 Measurement ID
           DLV - ecommerce.transaction_id
           CSS - hero-cta-selector

Префікс одразу вказує тип або платформу. Коли у вас 50+ елементів, алфавітне сортування разом з префіксами робить пошук миттєвим.

Папки. GTM дозволяє створювати папки для тегів, тригерів і змінних. Організовуйте за платформою (GA4, Meta, Google Ads), за функцією (ecommerce, lead gen, engagement) або за розділом сайту (homepage, checkout, blog).

Спільні тригери. Якщо кілька тегів мають спрацювати на одну дію (GA4 event + Meta Pixel event на покупку), використовуйте один тригер і приєднайте його до обох тегів. Не створюйте дублікати тригерів з ідентичними умовами.

Документація. GTM має поле Notes на кожному тезі, тригері та змінній. Використовуйте його. Через шість місяців ви не згадаєте, чому тригер має конкретну умову з CSS selector. Записуйте.

Які найпоширеніші помилки початківців у GTM?

Що налаштувати далі після основ?

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

  1. Відстежуйте всі ключові дії користувачів. Складіть карту важливих взаємодій на сайті: кліки на CTA, відправки форм, перегляди відео, глибина прокрутки, завантаження файлів. Створіть таблицю з планом відстеження, що містить назву кожної події, тип тригера та параметри, перш ніж будувати в GTM.
  2. Налаштуйте конверсії. У GA4 позначте найважливіші події як key events (раніше conversions). Вони потрапляють у звіти GA4 і можуть бути імпортовані в Google Ads для оптимізації ставок.
  3. Додайте маркетингові піксели. Якщо ви запускаєте рекламу в Meta, TikTok, LinkedIn або Pinterest, додайте їхні базові піксели через Custom HTML теги в GTM. Потім створіть теги подій для конверсій, які потрібні кожній платформі.
  4. Впровадьте ecommerce tracking. Якщо у вас інтернет-магазин, налаштуйте повний GA4 ecommerce data layer: view_item, add_to_cart, begin_checkout, purchase. Це вимагає від розробника пушити ecommerce дані в dataLayer, але GTM бере на себе відправку в GA4 та інші платформи.
  5. Створіть Data Layer. Для всього, що виходить за рамки базових кліків і переглядів сторінок, пушіть структуровані дані в GTM Data Layer з сайту. Це дає GTM чисті, надійні дані для роботи — назви товарів, суми замовлень, ролі користувачів, варіанти експериментів.
  6. Налаштуйте cross-domain tracking. Якщо користувачі переходять між доменами (наприклад, shop.example.com на checkout.example.com), налаштуйте cross-domain tracking у Google Tag, щоб сесії не переривались.
  7. Проводьте регулярний аудит. Щокварталу переглядайте контейнер. Видаляйте теги інструментів, які більше не використовуєте. Перевіряйте, що тригери все ще відповідають поточній структурі сайту. Видаляйте тестові теги, які ніколи не публікувались.

AI Agent у GTM Event Helper може проаналізувати ваш сайт і рекомендувати повний план відстеження — назви подій, параметри та платформи — а потім створити всі теги та тригери одним пакетом. Це перетворює кількагодинне налаштування на хвилини.

Пропустіть криву навчання — створюйте GTM-події одним кліком.

Встановити GTM Event Helper

Зовнішні ресурси

Пов'язані статті

← Усі статті · Головна · Політика конфіденційності · Контакти