Що таке Google Tag Manager: вивчення основ та налаштування з нуля

• Що таке Google Tag Manager
• Кому та навіщо потрібен Google Tag Manager
• Як створити акаунт в Google Tag Manager
• Як встановити Google Tag Manager на WordPress
  • Як додати код без плагінів
  • Як вставити код з плагіном WPCode
• Як підключити Google Analytics 4 до GTM
• Навіщо потрібен режим попереднього перегляду
• Як відстежувати кліки за посиланнями на сайті
• Як налаштувати Ecommerce-події на WooCommerce
• Що ви отримуєте після налаштування Google Tag Manager

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

Що таке Google Tag Manager

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

Google Tag Manager складається з трьох компонентів:

• тег (Tag) — код, який виконує дію, наприклад, надсилає дані в GA4;
• тригер (Trigger, в україномовному інтерфейсі «активатор») — умова, за якої тег має спрацювати: клік, перегляд сторінки, надсилання форми;
• змінна (Variable) — значення, яке підставляється в тег або тригер: URL сторінки, текст посилання, ціна товару;
• контейнер (Container) — «коробка», яка об'єднує всі теги, тригери й змінні для сайту, і саме її код ви один раз вставляєте на веб-ресурс.

Попри величезні можливості, GTM не здатен аналізувати дані, надавати доступ до готових звітів або формувати власні. У цьому головна відмінність Google Tag Manager від Google Analytics 4: перший лише доставляє код на сайт та вирішує, коли його запустити, а другий — аналізує отримані дані та формує звіти.

Кому та навіщо потрібен Google Tag Manager

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

Якщо говорити саме про онлайн-проекти, Google Tag Manager потрібен:

• інтернет-магазинам — відстеження покупок, аналіз поведінки нових та постійних покупців, спрощена передача даних в рекламні мережі для запуску реклами та динамічного ретаргетингу;
• корпоративним сайтам — додавання аналітики, пікселя для реклами в соцмережах, конверсії Google Ads, чат-віджета без постійного втручання в код;
• SaaS-сервісам — відстеження реєстрації в продукті, проходження пробного періоду, оформлення платної підписки та передача цих даних у рекламні кабінети;
• інформаційним сайтам — відстеження різної глибини прокрутки, взаємодії з медіаконтентом, переходи за партнерськими посиланнями;
• односторінковим сайтам — аналіз невеликих конверсій, наприклад, клік по кнопці «Дізнатися ціну» або перегляд саме блоку «Послуги», плюс підключення сторонніх сервісів для тестування різних дизайнів та заголовків.

Разом з тим власнику невеликого блогу, якому не хочеться нічого додатково підключати, достатньо Google Analytics 4 з налаштуваннями за замовчуванням. Тим паче аналітику можна підключити через вбудовані інтеграції тем на кшталт Blocksy: просто переходите в Customizer → General → Visitor Engagement та вставляєте ID GA4. Те саме стосується простих портфоліо та невеликих сайтів, які просто створені для представлення в інтернеті без планів на розвиток.

Як створити акаунт в Google Tag Manager

Зареєструвати акаунт може кожен користувач за декілька хвилин. Вам потрібно пройти реєстрацію, вибрати платформу (Web, iOS або Android) та додати код системи на свій онлайн-проект.

Для прикладу розглянемо, як створити акаунт в Google Tag Manager власнику сайту:

1. Перейдіть на офіційний сайт Google Tag Manager та увійдіть у свій Google акаунт, після чого натисніть «Створити обліковий запис».

2. Додайте назву акаунту та виберіть країну.

3. Додайте назву контейнера та виберіть платформу, наприклад, Web для сайту.
4. Натисніть «Створити» та погодьтеся з «Terms of Service Agreement», після чого миттєво відкриється форма з фрагментами коду — це розберемо пізніше.

Зверніть увагу на момент з додаванням назви контейнера. На одному акаунті Google Tag Manager можна мати декілька різних контейнерів, наприклад, окремий для сайту й окремий для мобільного застосунку. У межах кожного контейнера є власні робочі області, які дозволяють кільком людям вносити зміни одночасно, не заважаючи одне одному.

Як встановити Google Tag Manager на WordPress

Додати код Google Tag Manager на WordPress сайт можна за допомогою плагінів або вручну через редагування теми. З плагінів найбільш ефективними та стабільними є Google Tag Manager for WordPress або спеціалізоване розширення для додавання будь-якого коду WPCode.

Щоб показати процес реєстрації, налаштування та використання Google Tag Manager з нуля, я створив тестовий інтернет-магазин через TasteWP. На нього встановив оновлення WordPress 7.0, тему Twenty Twenty-Three, плагін електронної комерції WooCommerce. У магазин додав 4 тестових товари для подальшого відстеження подій: найкращий хостинг, реєстрація домена, оренда віртуального та виділеного сервера з Cityhost.

Як додати код без плагінів

Потрібно скопіювати обидва фрагменти коду з робочої області GTM та вставити в шаблон сайту: перший — одразу після <head>, другий — одразу після тега <body>. Якщо тема підтримує редагування шаблону, можете зробити це прямо в адмінпанелі, якщо ні — знадобиться FTP клієнт, наприклад, FileZilla.

На тестовому сайті встановлена сучасна блокова тема, тому для цього способу довелося змінити її на GeneratePress. Тож якщо у вас теж ця або інша класична тема з Theme File Editor, тоді додайте код Google Tag Manager наступним чином:

1. Перейдіть в адмінпанель WordPress → «Зовнішній вигляд» (Appearance) → «Редактор тем» (Theme File Editor).

2. Знайдіть header.php.

3. Поверніться в GTM → натисніть на код → скопіюйте перший фрагмент коду.

4. В header.php відразу після тега <head> вставте код.

5. Повторіть те саме з другим фрагментом та тегом <body> — зазвичай він у тому ж файлі.

Якщо ваша тема підтримує Theme File Editor та має зрозумілий код, де легко знайти <head> та <body>, або ви готові витратити трохи часу на підключення через FTP клієнт — можете використовувати цей спосіб. Але завжди робіть резервні копії перед такими серйозними змінами на сайті.

Читайте також: 31 березня — день резервного копіювання. Чому важливо не забувати про бекапи та як зробити резервну копію свого сайту (інструкція)

Як вставити код з плагіном WPCode

Якщо ваша тема не дозволяє редагувати код через адмінпанель WordPress або вам не хочеться самостійно змінювати шаблон, тоді найкращим вибором є безкоштовна версія плагіна WPCode. Ви можете встановити та активувати його прямо з каталогу WordPress, додати код в header та body, і він автоматично буде працювати на всьому сайті.

Давай покроково розглянемо, як додати код Google Tag Manager з WPCode:

1. Перейдіть в адмінпанель WordPress → Plugins → Add Plugin та знайдіть WPCode.

2. Після встановлення та активації перейдіть в WPCode → Header & Footer.

3. У поле Header вставте перший фрагмент коду GTM, в поле Body — другий, та збережіть зміни.

Перевірити, чи правильно ви встановили код можете через перегляд сторінки: перейдіть на сайт → права кнопка миші → «Переглянути код сторінки» → знайдіть рядок з «GTM-». Або ще простіше: поверніться в Google Tag Manager і під двома фрагментами коду введіть адресу свого сайта та натисніть «Перевірити».

Важливо! В інтернеті «Google Tag Manager for WordPress» (GTM4WP) часто називають офіційним рішенням Google — це популярний, добре підтримуваний, але сторонній продукт. Єдиний плагін, який дійсно випускає сама компанія — Site Kit by Google. З ним теж можна підключити GTM, але на бюджетному спільному хостингу він іноді створює одразу кілька паралельних запитів до Google API при завантаженні дашборду, що на обмежених тарифах може призводити до тимчасових помилок сервера.

Як підключити Google Analytics 4 до GTM

Для підключення Google Analytics 4 до Google Tag Manager потрібно створити акаунт в системі аналітики. Ви можете знайти покрокову інструкцію з Google Analytics 4 в блозі Cityhost. Після цього знадобиться додати тег Google (раніше — GA4 Configuration) в GTM, що займе декілька хвилин.

Пропоную покроково розглянути процес підключення Google Analytics 4 до Google Tag Manager:

1. Перейдіть в GA4 → Admin → Data collection and modification → Data Streams, натисніть на назву потрібного потоку даних (вашого сайту) зі списку → скопіюйте Measurement ID.

2. Перейдіть в GTM → Add tag прямо на головній сторінці або Tags → Create через меню.

3. Натисніть Tag Configuration → Google Tag (не плутати з Google Analytics — це для подій).

4. Вставте Measurement ID, Triggering не змінюйте, додайте назву тегу та збережіть.

Ви підключили Google Analytics 4 до Google Tag Manager, але тепер треба перевірити, чи все коректно працює. І тут часто виникає величезна плутанина між двома кнопками — Preview та Publish — які знаходяться поруч.

Навіщо потрібен режим попереднього перегляду

Preview у Google Tag Manager — це режим тестування контейнера перед публікацією. Він автоматично позначає вашу поточну сесію в браузері параметром _dbg, на відміну від параметра debug_mode, який довелося б додавати вручну. Реальні відвідувачі сайту ніколи не з'являються в DebugView, що дозволяє не псувати власну статистику.

Тож натисніть Preview у правому верхньому куті GTM, вставте доменне ім'я та натисніть Connect. У новій вкладці відкриється ваш сайт, і вам треба перейти на декілька сторінок, але не закривайте те нове вікно зі своїм веб-ресурсом, просто згорніть. Якщо ви все правильно налаштували, то побачите в Google Tag Manager Debug — Tags Fired (ваш тег) та Tags Not Fired — None.

Після перевірки в Preview зміни потрібно публікувати через Submit → Publish — тільки тоді контейнер стає «живим» та теги спрацьовують для реальних відвідувачів автоматично. При цьому публікація стосується конкретної версії контейнера на момент натискання Publish: якщо додати новий тег і забути опублікувати, він продовжить працювати лише у вашому Preview і ніколи не спрацює для реальних відвідувачів, хоча в інтерфейсі GTM виглядатиме повністю готовим.

Важливо! Для повного коректного отримання даних на новому акаунті Google Analytics 4 може знадобитися від 24 до 48 годин. Однак ви вже можете перейти на дашборд та подивитися звіт у реальному часі (Realtime). Наприклад, в мене показує 1 користувач з України: все працює, ми успішно підключили Google Analytics 4 до сайту через Google Tag Manager.

Як відстежувати кліки за посиланнями на сайті

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

Для розуміння різниці спочатку подивимося на звичайне відстеження кліків в Google Analytics 4:

1. Зайдіть в Analytics → Admin → Data collection and modification → Data Streams → оберіть свій веб-потік → натисніть на шестерню біля Enhanced measurement → переконайтесь, що перемикач Outbound clicks увімкнено.

2. Створіть на сайті сторінку або додайте на наявну два типи посилань: зовнішні та внутрішні. Наприклад, я додав на «Hello World» одне внутрішнє (Shop) та 4 зовнішніх (віртуальний хостинг, VPS, оренда фізичного сервера, доменне ім'я).

3. Відкрийте цю сторінку та клікніть по черзі на посилання, після чого перейдіть в Analytics → Reports → Realtime overview, знайдіть блок «Event count by Event name» — має з'явитись подія click. Натисніть на неї і подивіться link_url. Наприклад, я декілька разів клікав по всіх посиланнях, але Google Analytics 4 зарахував лише кліки на cityhost.ua/uk, а на мою сторінку Shop жодного разу.

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

1. Перейдіть в GTM → Variables → Configure → позначте вбудовані змінні Click URL, Click Text, Click Classes.

2. Перейдіть в Triggers → New → Trigger Configuration → Just Links → додайте назву → Save.

3. Перейдіть в Tags → New → Tag Configuration → Google Analytics → GA4 Event і знову вкажіть ID та додайте Event Name link_click.

4. Тут же натисніть на Event Parameters та додайте параметри: link_url = {{Click URL}}, link_text = {{Click Text}}.

5. Внизу в Triggering додайте створений тригер, додайте назву всьому тегу та натисніть Save.

6. Натисніть Preview, підключіться до сайту, клікніть на зовнішнє та внутрішнє посилання на своєму сайті, а потім у Tag Assistant → Summary перевірте, чи спрацював тег link_click на обох кліках.

7. Перейдіть в GA4 → DebugView → клікніть на кожну подію та подивіться link_url та link_text. Як бачите, все спрацювало, і тепер ми можемо відстежувати і зовнішні, і внутрішні посилання, чого в GA4 не було.
8. Завершіть Preview → поверніться в GTM → натисніть «Надіслати» (Submit) → додайте назву версії, наприклад, «v2 – link click tracking» та натисніть Publish.

Для фінальної перевірки так само перейдіть в GA4 → DebugView → Event count by Event name → link_click → link_url. Наприклад, в мене відображаються 2 переходи на сторінку Shop (внутрішні посилання), 2 — Cityhost (зовнішні посилання) і ще одне на мій сайт на той запис Hello World, де ми все тестували.

Важливо! Не переплутайте в звітах дві різні події: click з параметром outbound: true — це автоматичний трекінг самої GA4, а link_click — ваша власна подія з GTM. Вони існують паралельно й не замінюють одна одну, якщо ви не вимкнули Enhanced measurement вручну.

Як налаштувати Ecommerce-події на WooCommerce

Для відстеження таких подій як перегляд картки товару, додавання в картку, покупка нам теж потрібно здійснити налаштування в GTM, бо сам Google Analytics 4 їх не відстежує. Спочатку встановлюємо додатковий плагін GTM Kit, потім вже створюємо кастомні події в Google Tag Manager.

Особливість роботи сайтів на WordPress WooCommerce — GA4 та GTM самі по собі не знають нічого про WooCommerce, адже вони читають лише те, що з'явилось у dataLayer браузера, а цей Ecommerce плагін за замовчуванням не виводить туди дані про товар, ціну чи ID замовлення. Відповідно нам потрібно побудувати міст за допомогою власного PHP-кода, або ще простіше — встановити плагін GTM Kit:

1. Перейдіть в адмінпанель WordPress → Plugins → Add Plugin → встановіть та активуйте.

2. В налаштуваннях плагіна вкажіть GTM Container ID і потім просто натискайте Save and Continue, не змінюючи налаштування за замовчуванням.

У GTM Kit є зручний майстер Template Assistant (Dashboard → Open Template Assistant), який обіцяє згенерувати готовий файл із тегами, тригерами й змінними для імпорту в GTM. Вам треба лише вибрати тип сайту (E-commerce), сервіси (GA4) і вказати Measurement ID. У теорії це набагато швидше, ніж налаштовувати кожен тег окремо.

Однак під час тестування я отримав помилку «Error generating template. Please check your connection and try again», а в консолі браузера (F12 → Console) було повідомлення: запит до api.gtmkit.com заблокований CORS-політикою — сервер плагіна не дав дозволу на запит саме з домену мого тестового сайту. Це, найімовірніше, особливість тимчасового домену пісочниці, а не системна проблема плагіна. Але враховуйте цей момент: якщо у вас з'явиться така сама помилка, не варто витрачати на неї час — просто переходьте до ручного налаштування.

Для кожної з трьох подій (view_item, add_to_cart, purchase) послідовність однакова. Я покажу, як створити Ecommerce подію в Google Tag Manager на прикладі view_item:

1. Перейдіть в Google Tag Manager → Triggers → New → Trigger Configuration → Custom Event.

2. Додайте Event Name — view_item, інші дані залиште за замовчуванням, додайте назву, наприклад, «CE — View Item» та натисніть Save.

3. Перейдіть в Tags → New → Tag Configuration → Google Analytics: GA4 Event → вставте Measurement ID з GA4 та view_item в Event Name, а у налаштуваннях Ecommerce виберіть «Send Ecommerce data» → Data source «Data Layer».

4. В Triggering виберіть створений нами тригер, наприклад, в мене це «CE — View item», додайте назву та натисніть Save.

Точно за такою ж схемою створіть тригер та тег для add_to_cart, а потім — для purchase. Змінюйте лише Event Name та назву тригера/тега на кожному кроці. Налаштування Ecommerce, Data Layer, Measurement ID залишаються такими ж, як і для view_item.

Тригер для add_to_cart

Тег для add_to_cart

Тригер для purchase

Тег для purchase

Коли всі три тригери й теги будуть готові, поверніться в Google Tag Manager, натисніть «Надіслати» (Submit) та опублікуйте зміни (Publish).

Що ви отримуєте після налаштування Google Tag Manager

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

Розглянемо конкретні дані з Google Analytics 4 через Google Tag Manager:

• Reports → Business objectives → View user engagement and retention → Events — таблиця з усіма подіями сайту та їхньою кількістю.
• Explorations → Free Form — побудова власних звітів, наприклад, зіставлення подій з пристроєм, країною чи джерелом трафіку.
• Business objectives → Drive sales → Ecommerce purchases — перегляди, додавання в кошик, покупки та дохід по кожному товару окремо.
• Business objectives → Drive sales → Purchase journey — воронка з п'яти кроків з відсотком відмови на кожному етапі.
• Business objectives → Drive sales → Transactions — список окремих замовлень з деталізацією, наприклад, ID транзакції, сума та інші дані.
• Business objectives → Generate leads → Traffic acquisition — тривалість сесії, події за сесію, дохід розрізі кожного джерела трафіку.
• Realtime overview — відображення всіх за секунди, ще до появи в звітах вище.

Google Tag Manager дає змогу отримувати всі вищевказані звіти, яких немає при стандартних налаштуваннях GA4. Але GA4 — не єдиний сервіс, який можна підключити через той самий контейнер: так само просто додаються Facebook Pixel, конверсії Google Ads, TikTok Pixel чи будь-який інший рекламний та аналітичний скрипт. І головне — GTM постійно розвивається, додаючи нові можливості та сервіси, які ви тепер зможете підключати самостійно, розуміючи основи роботи з тегами, тригерами та змінними.