NEW CASE
Antana

Створюємо цифрові рішення, які працюють на бізнес


Зателефонуйте нам +38 (066) 35-14-529

Зробімо перший крок до вашого сайту — напишіть нам

Закрити
BB STUDIO 14 хв читання

Google Tag Manager: як встановити на сайт і налаштувати події та конверсії

Аналітика та конверсія
Google Tag Manager: як встановити на сайт і налаштувати події та конверсії

Сайт може отримувати трафік і заявки, але бізнес не завжди бачить, які сторінки, кнопки та рекламні кампанії дали результат. Часто на сайті встановлено лише базовий лічильник: він рахує перегляди, але не пояснює, скільки людей надіслали форму, натиснули номер телефону, почали оформлення замовлення або завершили покупку.

Google Tag Manager, або GTM, допомагає централізовано керувати аналітичними та рекламними тегами. Через один контейнер команда може підключати Google Analytics 4, Google Ads, пікселі, події та інші інтеграції, тестувати їх у Preview і публікувати версії з історією змін. Але GTM не замінює аналітику й не робить вимірювання автоматично: спочатку потрібен план подій і коректна технічна реалізація.

Якщо аналітична система ще не створена, почніть з окремої інструкції як налаштувати Google Analytics 4, а потім використовуйте цей гайд для керування тегами й передавання подій.

Що таке Google Tag Manager

GTM — це система керування тегами. Вона завантажує на сайт контейнер, усередині якого зберігаються правила запуску інших тегів. Основні складові:

Елемент Що робить Приклад
Контейнер об’єднує налаштування конкретного сайту GTM-XXXXXXX
Тег передає дані в сервіс або запускає код Google tag, GA4 Event, Google Ads Conversion
Тригер визначає, коли спрацьовує тег перегляд сторінки, клік, custom event
Змінна підставляє динамічне значення URL, текст кнопки, сума покупки
dataLayer структуровано передає дані зі сайту в GTM purchase, value, items
Workspace робоча область із неопублікованими змінами нове налаштування форми
Version зафіксований стан контейнера реліз аналітики 1.2

GTM зменшує кількість ручних правок коду для типових інтеграцій, але не скасовує участі розробника. Стабільне відстеження авторизації, AJAX-форм, кошика, варіацій товару або оплати часто потребує подій із самого застосунку через dataLayer.

Google Tag Manager, GA4 і Google Ads: у чому різниця

Ці продукти виконують різні ролі:

  • GTM керує тегами та умовами їх запуску;

  • GA4 збирає, обробляє й показує аналітичні дані;

  • Google Ads використовує конверсії для звітів, аудиторій та оптимізації реклами;

  • сайт або dataLayer повідомляє, що саме зробив користувач і з якими параметрами.

Проста аналогія: сайт створює сигнал, GTM маршрутизує його, GA4 аналізує, а Google Ads використовує для оцінки та оптимізації кампаній. Помилка на будь-якому етапі викривляє результат.

Що підготувати до встановлення

Перед створенням контейнера зберіть:

  • доступ до домену, CMS або коду сайту;

  • доступ до Google Analytics і Google Ads;

  • список доменів та піддоменів;

  • перелік форм, номерів телефону, месенджерів і CTA;

  • сценарій покупки або бронювання;

  • список конверсій і допоміжних подій;

  • правила cookie та згоду користувача;

  • відповідальних за GTM, сайт і рекламу;

  • тестові заявки й замовлення, які можна безпечно провести.

Окремо складіть measurement plan — таблицю того, що бізнес хоче вимірювати.

Бізнес-ціль Подія Параметри Конверсія Перевірка
Заявка generate_lead form_name, page_location так успішне надсилання
Дзвінок click_phone link_url, page_location залежить клік по tel:
Початок покупки begin_checkout value, currency, items ні відкриття checkout
Покупка purchase transaction_id, value, currency, items так підтверджене замовлення
Перегляд кейсу view_case case_name ні відкриття сторінки кейсу

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

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

  1. Відкрийте tagmanager.google.com і увійдіть у корпоративний Google-акаунт.

  2. Створіть акаунт GTM для компанії.

  3. Вкажіть країну та назву організації.

  4. Створіть контейнер для сайту й виберіть тип Web.

  5. Використайте зрозумілу назву, наприклад основний домен.

  6. Додайте робочі корпоративні акаунти з мінімально необхідними правами.

Google рекомендує створювати один вебконтейнер для одного сайту або вебзастосунку, а не окремий контейнер для кожної сторінки. Якщо бізнес має незалежні сайти з різними командами та логікою, їм можуть знадобитися окремі контейнери.

Не реєструйте критичну аналітику лише на особисту пошту підрядника. Власник бізнесу повинен мати адміністративний доступ і розуміти, хто може публікувати зміни.

Як встановити контейнер на сайт

Після створення GTM показує два фрагменти коду:

  1. JavaScript-фрагмент потрібно вставити якомога вище в <head>;

  2. блок <noscript> — одразу після відкривального <body>.

Код має бути присутній на всіх сторінках, де потрібне вимірювання. Не змінюйте ідентифікатор контейнера й не копіюйте кілька однакових контейнерів без необхідності.

WordPress

Найбезпечніші варіанти:

  • інтеграція в тему або дочірню тему;

  • перевірений плагін із правильними позиціями head/body;

  • централізований модуль у власній темі;

  • серверне або платформне підключення, якщо воно вже передбачене архітектурою.

Після оновлення теми код не повинен зникнути. Не вставляйте одночасно GA4 через тему, плагін, Elementor і GTM: дубльований Google tag створює повторні перегляди та події.

WooCommerce

Для повної ecommerce-аналітики недостатньо встановити контейнер. Потрібно передавати товар, список, купон, валюту, ціну, кількість і transaction_id на відповідних етапах. Готовий плагін може прискорити запуск, але його dataLayer потрібно перевірити на вашій темі, checkout і способах оплати.

Сайт на власному коді

Розробник додає обидва фрагменти GTM у глобальний шаблон і реалізує стабільні dataLayer.push() у моменти, коли застосунок точно знає про успішну дію. Для SPA потрібно окремо контролювати віртуальні перегляди та зміну маршруту.

Як перевірити встановлення

Відкрийте контейнер і натисніть Preview. Tag Assistant підключиться до сайту й покаже, чи завантажився контейнер, які події відбулися, які теги спрацювали та які не спрацювали.

Перевірте:

  • контейнер визначається на всіх основних шаблонах;

  • немає другого контейнера з тим самим або чужим ID;

  • Google tag спрацьовує один раз на перегляд;

  • consent state відповідає вибору cookie;

  • тест не блокується кешем, CSP або розширенням браузера;

  • події з’являються у правильній послідовності;

  • DebugView GA4 отримує тестові події.

Preview — це не формальність. За офіційною документацією, режим дає змогу протестувати чернетку контейнера до публікації та побачити порядок спрацювання тегів.

Як підключити GA4 через GTM

У контейнері створіть Google tag із Measurement ID формату G-XXXXXXXXXX. Для базового налаштування тригером зазвичай є All Pages. Після цього:

  1. увімкніть Preview;

  2. відкрийте кілька сторінок;

  3. перевірте запуск Google tag у Tag Assistant;

  4. перевірте Realtime або DebugView у GA4;

  5. переконайтеся, що старий код GA4 не дублює вимірювання;

  6. створіть версію й лише потім опублікуйте контейнер.

Measurement ID — це не ID контейнера GTM. GTM-... ідентифікує контейнер, а G-... — потік даних GA4.

Які події варто відстежувати

Для сайту послуг

  • успішне надсилання кожної форми;

  • клік по телефону, email і месенджеру;

  • відкриття квізу або калькулятора;

  • завершення ключового кроку квізу;

  • завантаження прайсу чи презентації;

  • бронювання консультації;

  • взаємодія з кейсом;

  • перехід до сторінки подяки.

Для інтернет-магазину

  • view_item_list;

  • select_item;

  • view_item;

  • add_to_cart;

  • remove_from_cart;

  • view_cart;

  • begin_checkout;

  • add_shipping_info;

  • add_payment_info;

  • purchase;

  • refund за наявності інтеграції.

Використовуйте рекомендовані GA4-назви та параметри там, де вони відповідають дії. Це допомагає стандартним звітам і зменшує хаос у назвах.

Для контентного сайту

  • внутрішній пошук;

  • підписка;

  • завантаження файлу;

  • перегляд відео;

  • перехід до автора або тематичної сторінки;

  • глибина скролу лише як допоміжний сигнал;

  • вихідний клік до важливого партнера.

Клік — ще не заявка

Найпоширеніша помилка — вважати клік по кнопці «Надіслати» успішною формою. Користувач може не заповнити обов’язкове поле, отримати помилку або натиснути кнопку кілька разів. Надійна подія повинна запускатися після підтвердженої відповіді сервера або появи унікального стану успіху.

Для AJAX-форми найкращий варіант — щоб код форми після успішного надсилання виконав:

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: 'generate_lead',
  form_name: 'project_request'
});

У GTM створюють Custom Event Trigger з назвою generate_lead, змінну Data Layer Variable для form_name і GA4 Event tag. Не передавайте у параметрах email, телефон, ім’я чи текст повідомлення: персональні дані не повинні потрапляти в аналітичні системи.

Як налаштувати кліки по телефону та email

Для телефонів використовуйте посилання tel:, для пошти — mailto:. У GTM можна створити тригер Just Links з умовою:

  • Click URL starts with tel:;

  • Click URL starts with mailto:.

Події можна назвати click_phone і click_email, передаючи link_url та page_location. Але клік по номеру не доводить, що дзвінок відбувся. Для точного обліку дзвінків потрібен колтрекінг або інтеграція телефонії.

Що таке dataLayer

dataLayer — глобальний масив JavaScript, через який сайт передає в GTM структуровані події й параметри. Замість пошуку значення в тексті сторінки GTM отримує готові дані з бізнес-логіки.

Приклад покупки:

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: 'purchase',
  ecommerce: {
    transaction_id: 'ORDER-1048',
    value: 2490,
    currency: 'UAH',
    items: [
      {
        item_id: 'SKU-15',
        item_name: 'Product name',
        price: 2490,
        quantity: 1
      }
    ]
  }
});

Подія purchase має передаватися після підтвердження замовлення, а transaction_id — бути унікальним. Інакше перезавантаження сторінки подяки може створити дублікати доходу.

Google рекомендує не перезаписувати window.dataLayer після завантаження GTM. Ініціалізуйте його через window.dataLayer = window.dataLayer || [], далі використовуйте push() і дотримуйтеся однакового регістру назв.

Теги, тригери та змінні: практична схема

Для однієї події логіка виглядає так:

  1. сайт відправляє dataLayer.push();

  2. GTM бачить ключ event;

  3. Custom Event Trigger реагує на точну назву;

  4. Data Layer Variables читають параметри;

  5. GA4 Event tag передає назву та параметри;

  6. GA4 обробляє подію;

  7. потрібна подія позначається як key event;

  8. за потреби конверсія імпортується або передається в Google Ads.

Називайте елементи системно, наприклад:

  • GA4 - Event - Generate Lead;

  • Trigger - CE - generate_lead;

  • DLV - form_name;

  • Google Ads - Conversion - Purchase.

Зрозумілі назви спрощують аудит, передачу проєкту та пошук помилки через кілька місяців.

Конверсії Google Ads через GTM

У Google Ads створіть дію-конверсію, отримайте Conversion ID і Conversion Label, а в GTM використайте відповідний шаблон Google Ads Conversion Tracking. Для покупки передавайте динамічну вартість, валюту й унікальний ідентифікатор транзакції, якщо конфігурація це підтримує.

Також перевірте Conversion Linker і згоду користувача. Не створюйте паралельно кілька однакових конверсій без чіткої причини: імпорт з GA4 і окремий Ads tag можуть подвоїти звітність, якщо обидві дії позначені основними.

Для бізнесу важливо не лише встановити тег, а правильно пов’язати його з кампаніями, посадковими сторінками й цінністю заявки. Це входить у професійне налаштування Google Ads.

UTM-мітки та GTM

UTM-мітки описують джерело переходу, а GTM керує тегами й подіями після відкриття сайту. Це різні рівні аналітики, які працюють разом. Посилання для реклами, email, партнерів і QR-кодів можна підготувати через UTM-генератор BB STUDIO.

Використовуйте єдині правила регістру та назв. facebook, Facebook і fb можуть потрапити в різні рядки звіту. Не додавайте UTM до внутрішніх посилань сайту: вони можуть перезаписати джерело сесії.

GTM не є банером згоди. Банер або CMP отримує вибір користувача, а Consent Mode передає стан згоди тегам. Налаштування повинно відбутися до запуску тегів, які залежать від consent.

Практичний процес:

  1. визначити категорії cookie й правову підставу;

  2. показати зрозумілий вибір;

  3. установити default consent state до тегів;

  4. оновити стан після вибору;

  5. прив’язати теги до відповідних consent types;

  6. протестувати прийняття, відмову та зміну вибору;

  7. оновити політику cookie й конфіденційності.

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

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

Для кожної події пройдіть позитивний і негативний сценарій.

Позитивний сценарій

  • натисніть потрібний елемент або виконайте дію;

  • переконайтеся, що в Preview з’явилася правильна подія;

  • перевірте параметри й значення;

  • переконайтеся, що потрібний тег спрацював один раз;

  • перевірте DebugView, Realtime або тестову конверсію;

  • перевірте мобільну й десктопну версію.

Негативний сценарій

  • клікніть схожий, але інший елемент;

  • спробуйте невалідну форму;

  • перезавантажте сторінку подяки;

  • поверніться назад у checkout;

  • відмовтеся від аналітичних cookie;

  • перевірте, що тег не спрацьовує там, де не повинен.

Після тесту натисніть Submit, створіть версію з назвою й описом змін, перегляньте Activity History та опублікуйте. Версія дає можливість зрозуміти, що саме змінилося, і швидше відкотити проблемну конфігурацію.

Як GTM впливає на швидкість сайту

Сам контейнер не робить усі теги безпечними або швидкими. Якщо через нього завантажити багато рекламних пікселів, чатів і Custom HTML, сайт отримає додаткові мережеві запити та JavaScript-навантаження.

Рекомендації:

  • видаліть невикористані теги й змінні;

  • обмежуйте тригери потрібними сторінками;

  • не дублюйте ті самі системи різними способами;

  • використовуйте нативні шаблони замість випадкового Custom HTML;

  • перевіряйте вплив сторонніх тегів;

  • запускайте некритичні інтеграції після consent або взаємодії;

  • регулярно проводьте аудит контейнера.

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

GTM для нового й готового сайту

Для нового проєкту measurement plan, dataLayer і consent краще закласти до верстки checkout, форм та особистого кабінету. Це дешевше, ніж після запуску прив’язувати події до нестабільних CSS-класів. Під час розробки сайту аналітика повинна бути частиною приймального чекліста.

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

Як використовувати дані для конверсії

Подія сама по собі нічого не покращує. Після накопичення даних порівнюйте:

  • сторінки входу та заявки;

  • джерела трафіку та якість лідів;

  • початок форми й успішне надсилання;

  • перегляд товару, кошик, checkout і покупку;

  • мобільні та десктопні сценарії;

  • нових і повторних відвідувачів;

  • регіони, кампанії та посадкові сторінки.

Якщо відвідування є, а подій мало, скористайтеся матеріалом чому сайт має трафік, але не приносить заявок. Для пошуку проблем у навігації, формах і сценаріях корисний окремий UX-аудит сайту.

Типові помилки GTM

  1. Контейнер встановлений не на всіх сторінках.

  2. GA4 підключений одночасно через тему, плагін і GTM.

  3. Клік кнопки помилково вважається успішною заявкою.

  4. Тригери залежать від CSS-класу, який змінюється після редизайну.

  5. Події мають хаотичні назви й дублікати.

  6. У GA4 передаються персональні дані.

  7. purchase спрацьовує повторно після оновлення сторінки.

  8. Теги публікують без Preview і негативних тестів.

  9. Consent Mode не відповідає вибору користувача.

  10. У контейнері немає версій, описів і відповідальних.

  11. Рекламні конверсії рахуються двічі.

  12. Дані збираються, але команда не використовує їх у рішеннях.

Чекліст запуску

  • створено корпоративний акаунт і вебконтейнер;

  • власник бізнесу має адміністративний доступ;

  • обидва фрагменти GTM встановлені правильно;

  • старі коди проінвентаризовані;

  • Google tag не дублюється;

  • measurement plan погоджено;

  • форми передають успіх, а не клік;

  • ecommerce-події містять потрібні параметри;

  • transaction_id унікальний;

  • UTM-іменування стандартизовано;

  • consent перевірено для прийняття й відмови;

  • Preview та DebugView пройдені;

  • події перевірені на мобільному й десктопі;

  • створено названу версію контейнера;

  • після публікації проведено контрольний тест;

  • визначено відповідального за подальші зміни.

Висновок

Google Tag Manager дає контроль над тегами, але якість аналітики визначає не кількість налаштувань, а логіка вимірювання. Почніть з бізнес-цілей, створіть план подій, установіть контейнер без дублів, передавайте критичні дії через dataLayer, тестуйте позитивні й негативні сценарії, а потім використовуйте дані для покращення реклами та сайту.

BB STUDIO може перевірити наявні теги, спроєктувати measurement plan, налаштувати GA4, Google Ads, ecommerce-події та контроль якості. Щоб отримати план для свого проєкту, зв’яжіться з BB STUDIO. Для органічного залучення аудиторії налаштування аналітики варто поєднати з SEO-просуванням сайту.

Часті питання

Стандартна версія GTM доступна без окремої плати. Бізнес оплачує роботу зі стратегії вимірювання, розробки dataLayer, налаштування, тестування й підтримки, якщо залучає спеціалістів.

Ні. GTM керує тегами й умовами запуску, а GA4 приймає, обробляє та показує аналітичні дані.

Базовий контейнер можна підключити через перевірений плагін або інтеграцію. Для надійних форм, ecommerce, особистого кабінету й нестандартних сценаріїв часто потрібні розробник і тестування dataLayer.

Перевірте встановлення контейнера, умови тригера, назву події, consent, блокувальники, CSP, кеш і фактичні значення змінних. У Tag Assistant відкрийте конкретну подію та блоки Tags Fired і Tags Not Fired.

Ті, що мають реальну бізнес-цінність: підтверджена заявка, покупка, бронювання або інша ключова дія. Кліки, скрол і перегляди відео зазвичай залишають допоміжними подіями.
Оцініть статтю
Це допомагає нам писати кращі матеріали
Будьте першим, хто оцінить 5.0 з 5 0 голосів
Поділитися статтею:

Схожі статті

Давайте разом створимо щось дивовижне

Стати клієнтомСтати клієнтом
Telegram Viber Подзвонити