21.10.2024

1 +1

Адміністрація

Як налаштувати Google Tag Manager та знайти свій GTM ID

Google Tag Manager (GTM) — це безкоштовна система управління тегами (TMS) від Google, яка дозволяє розгортати та керувати фрагментами коду відстеження JavaScript — так званими тегами — на вашому веб-сайті через централізований веб-інтерфейс, без безпосереднього редагування вихідного коду сайту. Ваш ідентифікатор контейнера GTM (у форматі GTM-XXXXXXX) — це унікальний ідентифікатор, який пов’язує встановлений на вашому сайті фрагмент контейнера з вашим обліковим записом GTM, і він необхідний щоразу, коли ви інтегруєте GTM із зовнішніми платформами, такими як Google Analytics 4, Meta Pixel або будь-яким стороннім споживачем рівня даних.

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

Що таке Google Tag Manager і чому він важливий для архітектури сайту

Перш ніж переходити до будь-якого налаштування, корисно зрозуміти, що GTM насправді робить на рівні інфраструктури. Коли браузер завантажує вашу сторінку, фрагмент контейнера GTM надсилає запит до https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXXX. Сервери Google повертають скомпільований пакет JavaScript, що містить лише теги, тригери та змінні, які ви опублікували у поточній версії контейнера. Це означає:

Жодних жорстко закодованих скриптів відстеження не розкидано по ваших HTML-шаблонах.
Спрацювання тегів є умовним — тригери оцінюють події DOM, шаблони URL або користувацький JavaScript перед виконанням тегу.
Контроль версій вбудований — кожна опублікована версія контейнера зберігається, і ви можете миттєво відкотитися назад.
Один контейнер може містити сотні тегів від різних постачальників, якими керують з єдиної панелі.

Ця архітектура особливо цінна, коли ваш сайт працює в середовищі VPS Хостингу, де ви контролюєте весь стек, оскільки вона повністю відокремлює маркетингову інструментацію від вашого конвеєра розгортання.

Крок 1: Створення облікового запису та контейнера Google Tag Manager

Обліковий запис і контейнер — розуміння ієрархії

GTM використовує дворівневу ієрархію:

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

Змішування цих двох рівнів є поширеною помилкою. Якщо ви керуєте відстеженням для shop.example.com та blog.example.com як окремих властивостей, вони повинні бути окремими контейнерами в межах одного облікового запису, а не окремими обліковими записами.

Створення облікового запису

Перейдіть на tagmanager.google.com і увійдіть за допомогою облікового запису Google, який є власником або має права адміністратора у вашій властивості Google Analytics.
Натисніть Створити обліковий запис.
Введіть Назву облікового запису (назву вашої компанії або бренду).
Виберіть вашу Країну.
Залиште прапорець Анонімно ділитися даними з Google встановленим або зніміть його відповідно до вимог вашої політики конфіденційності.

Налаштування контейнера

У тому ж процесі створення:

Введіть Назву контейнера — для зручності використовуйте повне доменне ім’я (наприклад, example.com).
У розділі Цільова платформа виберіть відповідний варіант:

Варіант платформи	Випадок використання
—	—
Web	Стандартні HTML/JavaScript веб-сайти
iOS	Нативні iOS-застосунки з використанням Firebase SDK
Android	Нативні Android-застосунки з використанням Firebase SDK
AMP	Accelerated Mobile Pages
Server	Серверне тегування (серверний контейнер GTM)

Для більшості веб-проєктів виберіть Web.

Натисніть Створити та прийміть Умови використання Google Tag Manager. Якщо ви працюєте в юрисдикції GDPR, перед прийняттям ознайомтеся з Доповненням щодо обробки даних.

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

Крок 2: Встановлення фрагмента контейнера GTM на ваш веб-сайт

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

Два необхідні фрагменти

Фрагмент 1 — розміщення <head> (JavaScript):

<!-- 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 -->

Розмістіть його якомога вище в <head> — в ідеалі одразу після відкриваючого тегу <head>.

Фрагмент 2 — розміщення <body> (резервний варіант noscript):

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

Розмістіть його одразу після відкриваючого тегу <body>. Цей iframe <noscript> є резервним варіантом для браузерів із вимкненим JavaScript — він забезпечує базове спрацювання тегів через завантаження iframe-пікселя.

Важлива примітка: Замініть GTM-XXXXXXX на ваш фактичний ідентифікатор контейнера в обох фрагментах.

Встановлення на WordPress

WordPress є найпоширенішою CMS для розгортань GTM. Є три методи:

Метод A — functions.php теми (прямий, без залежності від плагіна):

// Add to your child theme's functions.php
function add_gtm_head() {
    echo "<!-- 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 -->";
}
add_action('wp_head', 'add_gtm_head', 1);

function add_gtm_body() {
    echo '<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX" height="0" width="0"></iframe></noscript>';
}
add_action('wp_body_open', 'add_gtm_body', 1);

Метод B — Плагін (Insert Headers and Footers або GTM4WP): Встановіть плагін, вставте Фрагмент 1 у поле заголовка, а Фрагмент 2 — у поле тіла/після тіла. Плагін GTM4WP є кращим вибором порівняно із загальними плагінами для заголовків/підвалів, оскільки він також автоматично передає специфічні для WordPress дані (тип запису, автор, дані кошика WooCommerce) до dataLayer.

Метод C — Пряме редагування шаблону: Відредагуйте header.php у вашій темі, щоб вставити обидва фрагменти в правильних місцях. Завжди використовуйте дочірню тему — редагування батьківської теми безпосередньо означає, що ваші зміни будуть видалені під час наступного оновлення теми.

Встановлення на Shopify

Shopify обмежує прямий доступ <head> до файлу theme.liquid. Перейдіть до Інтернет-магазин > Теми > Редагувати код > Макет > theme.liquid та вставте обидва фрагменти у відповідних місцях. Зверніть увагу, що сторінки оформлення замовлення Shopify вимагають плану Shopify Plus для додавання користувацьких скриптів.

Встановлення на користувацькому HTML/серверному сайті

Якщо ви керуєте користувацьким застосунком на Виділеному сервері або VPS, відредагуйте базовий HTML-шаблон безпосередньо. Для серверних фреймворків (Node.js/Express, Django, Laravel) додайте фрагменти до файлу базового шаблону макета.

Для застосунку Node.js/Express з використанням шаблонів EJS:

# Locate your base layout template
find /var/www/myapp/views -name "layout.ejs"

Потім відредагуйте файл, щоб вставити обидва фрагменти GTM у правильних місцях у <head> та одразу після <body>.

Міркування щодо Content Security Policy

Якщо ваш сайт застосовує заголовок Content Security Policy (CSP) — а він повинен бути на будь-якому захищеному виробничому сервері — вам необхідно внести домени GTM до білого списку. Додайте наступне до ваших директив CSP:

script-src 'self' https://www.googletagmanager.com;
img-src 'self' https://www.googletagmanager.com;
frame-src https://www.googletagmanager.com;

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

Крок 3: Знайдіть ваш ідентифікатор Google Tag Manager

Ідентифікатор контейнера GTM завжди має формат GTM- з наступним буквено-цифровим рядком (наприклад, GTM-K2F9XP3). Є три надійні способи його знайти.

Метод 1 — Панель контейнера (основний метод)

Увійдіть на tagmanager.google.com.
На сторінці огляду Облікових записів ви побачите всі ваші облікові записи та пов’язані з ними контейнери, відображені у картках.
Ідентифікатор контейнера (GTM-XXXXXXX) відображається безпосередньо під назвою контейнера на кожній картці — видимий без переходу до контейнера.

Метод 2 — Панель адміністратора контейнера

Відкрийте потрібний контейнер.
Натисніть Адміністратор у верхній панелі навігації.
У стовпці Контейнер натисніть Налаштування контейнера.
Поле Ідентифікатор контейнера у верхній частині цієї сторінки показує ваш повний GTM ID.

Метод 3 — Джерело встановленої сторінки

Якщо GTM вже встановлено на вашому сайті і вам потрібно отримати ідентифікатор без входу до GTM:

curl -s https://example.com | grep -o 'GTM-[A-Z0-9]*'

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

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

Пропуск перевірки — це єдина найдорожча помилка при розгортанні GTM. Неправильно розміщений фрагмент, блокування CSP або перевизначення теми можуть непомітно зламати все ваше налаштування відстеження.

Режим попереднього перегляду GTM (рекомендовано)

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

Якщо контейнер завантажується правильно, ви побачите gtm.js у списку спрацьованих тегів та gtm.load як завершену подію на панелі зведення.

Розширення Chrome Google Tag Assistant

Встановіть розширення Tag Assistant Legacy або скористайтеся новішим розширенням Tag Assistant Companion. Перейдіть на ваш сайт, і розширення підтвердить, чи виявлено GTM, відобразить знайдений ідентифікатор контейнера та позначить будь-які помилки реалізації (наприклад, фрагмент розміщено в неправильному місці або він спрацьовує кілька разів).

Ручна перевірка через консоль браузера

Відкрийте Chrome DevTools (F12), перейдіть на вкладку Мережа, відфільтруйте за gtm.js та перезавантажте сторінку. Ви повинні побачити успішну відповідь 200 від www.googletagmanager.com. Якщо ви бачите заблокований або невдалий запит, перевірте ваші заголовки CSP та правила брандмауера сервера.

# Check response headers from GTM's script endpoint
curl -I "https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXXX"

Крок 5: Використання вашого GTM ID зі сторонніми платформами

Після перевірки контейнера GTM ID використовується в кількох контекстах інтеграції:

Google Analytics 4

Не встановлюйте фрагмент gtag.js GA4 безпосередньо на сторінці, якщо присутній GTM. Натомість створіть тег Google (раніше — тег конфігурації GA4) у GTM, введіть ваш ідентифікатор вимірювання GA4 (G-XXXXXXXXXX) та встановіть тригер на Всі сторінки. Це дозволяє централізувати все відстеження в GTM.

Meta (Facebook) Pixel

Додайте тег Користувацький HTML у GTM, що містить базовий код Meta Pixel. Використовуйте вбудовані змінні GTM ({{Page URL}}, {{Click URL}}) для динамічного заповнення параметрів подій, а не жорсткого їх кодування.

Плагіни WordPress, що запитують GTM ID

Плагіни, такі як Rank Math, MonsterInsights або WooCommerce Google Analytics, можуть запитувати ваш GTM ID безпосередньо. Якщо ви вже встановили фрагмент GTM вручну або через GTM4WP, не вводьте ваш GTM ID також у ці плагіни — це призведе до подвійного завантаження контейнера, подвоєння всіх спрацювань тегів та спотворення ваших аналітичних даних.

Серверний GTM (розширений рівень)

Для сайтів із великим трафіком або розгортань, чутливих до конфіденційності, GTM підтримує серверний контейнер, що працює на вашій власній інфраструктурі. Замість того, щоб браузер завантажував теги безпосередньо з CDN постачальників, всі запити спочатку надходять на ваш сервер. Це покращує продуктивність завантаження сторінок, обходить блокувальники реклами та надає вам повний контроль над тим, які дані залишають вашу інфраструктуру. Запуск серверного контейнера GTM добре підходить для VPS з cPanel або звичайного VPS, де ви можете налаштувати Node.js або контейнеризований сервер тегування.

Порівняння типів контейнерів GTM

Тип контейнера	Місце розгортання	Основний випадок використання	Потребує серверної інфраструктури
—	—	—	—
Web	Браузер (на стороні клієнта)	Стандартне відстеження веб-сайту	Ні
iOS / Android	Мобільний застосунок	Відстеження подій застосунку через Firebase	Ні
AMP	AMP-сторінки	Відстеження на Accelerated Mobile Pages	Ні
Server	Ваш сервер	Відстеження з пріоритетом конфіденційності та високою продуктивністю	Так

Поширені помилки та граничні випадки

Подвійне спрацювання контейнерів: Якщо ваша тема WordPress вже містить GTM через жорстко закодований фрагмент, а ви також активуєте плагін, який вставляє GTM, обидва спрацюють. Завжди перевіряйте вихідний код вашої сторінки за допомогою curl -s https://example.com | grep -c 'GTM-', щоб підрахувати кількість входжень.

Неправильне середовище контейнера: GTM підтримує кілька Середовищ (Live, Development, Staging). Якщо розробник ділиться посиланням для попереднього перегляду з використанням токена не-живого середовища, теги можуть поводитися інакше, ніж у виробництві. Завжди тестуйте в середовищі Live перед остаточним затвердженням.

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

Вимога HTTPS: gtm.js GTM завжди обслуговується через HTTPS. Якщо ваш сайт досі працює через HTTP, політика змішаного вмісту в сучасних браузерах заблокує скрипт GTM. Переконайтеся, що ваш сайт має дійсний SSL-сертифікат — SSL-сертифікати є обов’язковою умовою для будь-якого виробничого розгортання GTM.

Послідовність тегів: Коли кілька тегів спрацьовують на одному тригері, порядок виконання не гарантований, якщо ви явно не налаштуєте Послідовність тегів (Тег налаштування / Тег очищення) у розширених налаштуваннях тегів GTM.

Практична матриця рішень

Використовуйте цей контрольний список перед тим, як вважати ваше налаштування GTM готовим до виробництва:

[ ] Фрагмент контейнера присутній у <head> та одразу після <body> на кожній сторінці, включаючи динамічно згенеровані сторінки.
[ ] GTM ID з’являється рівно один раз на сторінці — підтверджено через curl або перегляд джерела браузера.
[ ] Заголовки CSP вносять www.googletagmanager.com до білого списку для script-src, img-src та frame-src.
[ ] Режим попереднього перегляду підтверджує, що контейнер завантажується та gtm.js спрацьовує під час завантаження сторінки.
[ ] Жодних дублікатів фрагментів GA4 або інших постачальників не існує поза GTM.
[ ] dataLayer ініціалізовано до фрагмента GTM у вихідному коді HTML.
[ ] Якщо використовується WordPress, дочірня тема або спеціальний плагін (не батьківська тема) містить фрагмент.
[ ] Правила брандмауера сервера дозволяють вихідні запити до www.googletagmanager.com:443.
[ ] Для електронної комерції: передачі dataLayer для подій purchase, add_to_cart та view_item перевірено в режимі попереднього перегляду перед запуском.
[ ] Контейнер опубліковано — неопубліковані зміни існують лише в робочому просторі та не впливають на живий сайт.

Якщо ваше хостингове середовище — це керований план Спільного веб-хостингу без прямого доступу до сервера, зосередьтеся на методах встановлення на рівні CMS (плагін або файл теми) та покладайтеся на режим попереднього перегляду GTM для перевірки, а не на команди curl на рівні сервера.

FAQ

Що таке ідентифікатор контейнера GTM і де він використовується?

Ідентифікатор контейнера GTM — це унікальний ідентифікатор у форматі GTM-XXXXXXX, який пов’язує JavaScript-фрагмент, встановлений на вашому веб-сайті, з вашим конкретним контейнером GTM. Він використовується в коді фрагмента контейнера, в інтеграціях зі сторонніми платформами та у власному адміністративному інтерфейсі GTM для визначення того, яку конфігурацію тегів контейнера слід завантажити.

Чи можна використовувати один контейнер GTM на кількох доменах?

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

Чому мій контейнер GTM не спрацьовує, хоча фрагмент встановлено?

Найпоширеніші причини: Content Security Policy блокує www.googletagmanager.com, фрагмент розміщено всередині умовного коментаря або частково завантаженого шаблону, плагін кешування WordPress обслуговує кешовану сторінку, яка була створена до додавання фрагмента, або контейнер не має опублікованої версії. Перевірте консоль браузера на наявність порушень CSP та використовуйте режим попереднього перегляду GTM для локалізації проблеми.

У чому різниця між режимом попереднього перегляду GTM та Tag Assistant?

Режим попереднього перегляду GTM — це вбудована функція GTM, яка підключає сеанс налагодження безпосередньо до вашого контейнера, показуючи в реальному часі спрацювання тегів, оцінку тригерів та стан dataLayer для вашого конкретного сеансу браузера. Tag Assistant — це розширення Chrome, яке надає легкий оверлей, що показує, які теги Google (GTM, GA4, Ads) виявлено на сторінці, та позначає основні помилки реалізації. Для глибокого налагодження режим попереднього перегляду є авторитетним; Tag Assistant корисний для швидких поверхневих перевірок.

Чи впливає Google Tag Manager на продуктивність веб-сайту або швидкість завантаження сторінок?

Сам фрагмент GTM завантажується асинхронно, тому він не блокує розбір HTML або ресурси, що блокують рендеринг. Однак теги, що спрацьовують через GTM — особливо синхронні теги користувацького HTML або важкі сторонні скрипти — можуть суттєво впливати на час завантаження сторінки. Регулярно перевіряйте теги вашого контейнера, використовуйте вбудовані засоби керування пріоритетом спрацювання тегів та їх послідовністю в GTM, а також розгляньте серверний GTM для сайтів із великим трафіком, де накладні витрати на клієнтські скрипти є вимірюваною проблемою.

Збережіть 15% на всі хостинг-послуги