Де взяти код GTM-контейнера?

Зайдіть на tagmanager.google.com, виберіть свій контейнер, натисніть на ID контейнера (вигляд GTM-XXXXXXX) у верхньому меню — з'явиться вікно з двома фрагментами коду. Перший фрагмент ( ) вставляється в , другий ( ) — одразу після відкривного . Якщо вікно закрили — Admin → Install Google Tag Manager.

Чи обов'язковий noscript-фрагмент GTM?

Технічно ні — сайт і теги GTM без нього працюватимуть для 99.9% відвідувачів. Але Google рекомендує вставляти noscript для коректної роботи без JavaScript. Якщо ваш CMS чи генератор не дозволяє вставити код після — пропустіть noscript, це не критично. Важливіший перший фрагмент у .

Як встановити GTM на WordPress без плагіна?

Знайдіть файл header.php вашої теми (Appearance → Theme File Editor або через FTP). Вставте перший фрагмент GTM перед закривним . Відкрийте header.php або відповідний шаблон де є , вставте другий фрагмент одразу після відкривного . Збережіть. Мінус: після оновлення теми правки зітруться — краще використовувати child-theme або плагін Insert Headers and Footers.

Що таке Preview Mode у GTM і як ним перевірити встановлення?

Preview Mode — вбудований debug-режим GTM. Натисніть кнопку Preview у правому верхньому куті робочого простору, введіть URL вашого сайту — відкриється два вікна: сайт з debug-банером унизу і Tag Assistant з переліком подій. Якщо контейнер встановлено правильно, у Summary побачите подію Page View і статус тегів. Якщо Tag Assistant не підключається — перевірте, чи код вставлено на всіх сторінках, а не тільки на головній.

Як перевірити GTM через розширення Tag Assistant?

Встановіть розширення Tag Assistant Companion для Chrome. Перейдіть на свій сайт — розширення покаже зелену іконку, якщо GTM завантажився без помилок. Клікніть на іконку: побачите ID контейнера, версію і статус тегів. Жовта іконка — попередження (наприклад, код не одразу після ). Червона — критична помилка (код відсутній або завантажується двічі).

Що робити, якщо GTM не відображається в Tag Assistant?

Перевірте по порядку: (1) чи вставлено обидва фрагменти на всіх сторінках, не тільки головній; (2) чи немає typo в ID контейнера (GTM-XXXXXXX); (3) чи не блокує фрагмент GTM якийсь кешувальний плагін або CDN; (4) очистіть кеш браузера і сайту та перевірте у режимі Incognito; (5) через View Source перевірте, чи є gtm.js у HTML-сторінки.

Чи можна встановити GTM на Hugo/Gatsby/Next.js?

Так. Для Hugo — додайте перший фрагмент у layouts/_default/baseof.html між і , другий — одразу після . Для Next.js — використовуйте компонент next/script зі strategy='afterInteractive' для першого фрагмента і custom _document.tsx для noscript. Для Gatsby — gatsby-plugin-google-tagmanager. Принцип той самий: перший фрагмент якомога вище в , другий — одразу після .

Як встановити GTM на конструктор Wix, Squarespace або Webflow?

Wix: Settings → Custom Code → Add Code → Head вставте перший фрагмент, Body вставте другий, Apply to all pages. Squarespace: Settings → Advanced → Code Injection → Header для першого фрагмента, Footer для другого. Webflow: Project Settings → Custom Code → Head Code і Body Code відповідно. Тildа: Налаштування сайту → Аналітика → Google Tag Manager → вставте тільки ID контейнера (GTM-XXXXXXX).

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

До 500 контейнерів на один акаунт — на практиці більш ніж достатньо. Типова практика: окремий контейнер для кожного домену. Також безкоштовно можна мати кілька акаунтів GTM під одним Google-акаунтом (до 400 акаунтів), якщо потрібна ізоляція (наприклад, агентство + клієнт).

Gtm

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

Q: Який плагін використовувати для GTM на WordPress?

Найпростіший варіант — Insert Headers and Footers (від WPCode або SOGO): легковаговий, вставляє перший фрагмент у head, а другий у body. Для глибшої інтеграції з dataLayer (особливо WooCommerce) використовуйте GTM4WP (duracelltomi). Плагін Site Kit by Google (офіційний, безкоштовний) орієнтований передусім на пряме підключення GA4 та інших сервісів Google, а не на вставку довільного GTM-контейнера, тому для самого GTM зручніший Insert Headers and Footers. Не використовуйте застарілий плагін «Google Tag Manager for WordPress» без регулярних оновлень.

Покроковий посібник: створення акаунта і контейнера GTM, вставка коду в head і body, встановлення на WordPress/Hugo/конструкторах, перевірка через Preview і Tag Assistant.

24 June 2026 Автор: Андрій Коваленко 8 хв читання

gtm google-tag-manager installation

Зміст

Google Tag Manager встановлюється один раз — два фрагменти коду в <head> і <body> сайту — і після цього будь-які теги аналітики чи рекламні піксели додаються без правок вихідного коду. Нижче — покрокова інструкція: від створення акаунта до перевірки через Preview Mode.

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

Крок 1. Створення акаунта і контейнера

Перейдіть на tagmanager.google.com під тим самим Google-акаунтом, де у вас Google Analytics або Google Ads.

Структура: акаунт → контейнер

GTM організований ієрархічно:

Акаунт — верхній рівень, зазвичай = компанія або клієнт. Один акаунт може містити десятки контейнерів.
Контейнер — прив’язаний до конкретного сайту чи мобільного додатку. Саме контейнер генерує код для вставки.

Натисніть Create Account:

Поле	Що вводити
Account Name	Назва компанії або проєкту
Country	Ваша країна
Container name	Домен сайту: `example.com`
Target platform	Web

Натисніть Create, погодьтесь з Terms of Service — відкриється вікно з кодом контейнера.

ID контейнера

Після створення ви побачите ID у форматі GTM-XXXXXXX (7 букв/цифр після «GTM-»). Саме цей ID — унікальний ідентифікатор вашого контейнера. Якщо закрили вікно з кодом, знайти його знову: Admin → Install Google Tag Manager.

Крок 2. Розуміння двох фрагментів коду

GTM надає два обов’язкових фрагменти:

Фрагмент 1 — JavaScript у `<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 -->

Цей фрагмент завантажує GTM-контейнер. Вставляти якомога вище у <head> — до будь-яких інших скриптів. Чому: якщо тег у GTM запускає інший скрипт (наприклад, Hotjar), він повинен завантажитись до того, як браузер дорендерив сторінку.

Фрагмент 2 — noscript у `<body>`

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

Цей фрагмент потрібен для відвідувачів без JavaScript (дуже рідко, але буває у корпоративних мережах). Вставляти одразу після відкривного <body> — не у підвал, не перед </body>, а саме після першого <body>.

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

Крок 3. Встановлення на WordPress

WordPress — найпоширеніша CMS, тому розглядаємо детально. Є три варіанти.

Варіант A — плагін Insert Headers and Footers (рекомендовано для початківців)

Plugins → Add New → Insert Headers and Footers (від WPCode або SOGO).
Активуйте. Settings → Insert Headers and Footers.
У поле Scripts in Header вставте перший фрагмент GTM.
У поле Scripts in Body вставте другий фрагмент (noscript).
Save.

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

Варіант B — Site Kit by Google або GTM4WP

Плагін Site Kit by Google (офіційний, безкоштовний) орієнтований передусім на пряме підключення GA4, Search Console та інших сервісів Google, а не на вставку довільного GTM-контейнера. Якщо вам потрібна саме глибша інтеграція GTM з dataLayer (особливо для WooCommerce) — використовуйте GTM4WP (duracelltomi): він автоматично формує події ecommerce у dataLayer і вставляє код контейнера.

Мінус Site Kit: він додає кілька своїх скриптів і трохи навантажує сторінку. Якщо вам потрібен тільки GTM без інших продуктів Google — краще варіант A.

Варіант C — ручна вставка у functions.php (для досвідчених)

// У functions.php child-теми
function add_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 -->
    <?php
}
add_action( 'wp_head', 'add_gtm_head', 1 ); // priority 1 = якомога раніше

function add_gtm_body() {
    ?>
    <!-- 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) -->
    <?php
}
add_action( 'wp_body_open', 'add_gtm_body', 1 );

Важливо: wp_body_open — хук WordPress 5.2+, що спрацьовує одразу після <body>. Якщо ваша тема його не підтримує — додайте <?php wp_body_open(); ?> у header.php вашої теми після <body>.

Ніколи не редагуйте файли батьківської теми — після оновлення теми зміни зітруться. Тільки child-theme або functions.php вашого child-теми.

Крок 4. Встановлення на Hugo

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

Відкрийте layouts/_default/baseof.html (або відповідний layout вашої теми):

<!DOCTYPE html>
<html lang="{{ .Site.Language.Lang }}">
<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 -->
    <meta charset="utf-8">
    {{ block "head" . }}{{ end }}
</head>
<body>
    <!-- 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) -->

    {{ block "main" . }}{{ end }}
    {{ block "footer" . }}{{ end }}
</body>
</html>

Для білінгвальних Hugo-сайтів з параметром GTM ID у hugo.toml:

[params]
  gtmId = "GTM-XXXXXXX"

Тоді у шаблоні:

<script>...j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;...
})(window,document,'script','dataLayer','{{ .Site.Params.gtmId }}');</script>

Після змін запустіть hugo --minify — GTM буде у всіх згенерованих HTML-файлах.

Крок 5. Встановлення на конструкторах

Wix

Settings → Custom Code.
Add Code → вставте перший фрагмент, виберіть Head, Apply to all pages.
Add Code ще раз → вставте другий фрагмент (noscript), виберіть Body — start, Apply to all pages.
Publish.

Squarespace

Settings → Advanced → Code Injection.
Поле Header — вставте перший фрагмент.
Поле Footer — вставте другий фрагмент. (Squarespace не дозволяє вставити код одразу після <body>, тому noscript у Footer — прийнятний компроміс.)
Save.

Webflow

Project Settings → Custom Code.
Секція Head Code — вставте перший фрагмент.
Секція Body Code — вставте другий фрагмент.
Save and publish.

Tilda

Налаштування сайту → Аналітика → Google Tag Manager.
Вставте тільки ID контейнера (GTM-XXXXXXX) — Tilda сама вставляє обидва фрагменти.
Republish.

Shopify

Online Store → Themes → Actions → Edit Code.
Відкрийте theme.liquid.
Вставте перший фрагмент у <head> (до </head>), другий — одразу після <body>.
Save.

Крок 6. Перевірка через Preview Mode

Код вставлено — тепер переконайтесь, що GTM справді завантажується.

Як запустити Preview

Поверніться у tagmanager.google.com.
Натисніть кнопку Preview у правому верхньому куті.
У полі «Your website’s URL» введіть адресу вашого сайту.
Натисніть Connect.

Відкриються два вікна:

Ваш сайт з синім банером «Tag Assistant Connected» унизу.
Tag Assistant з хронологією подій і тегів.

Що перевіряти в Tag Assistant

У лівій панелі побачите список подій (Summary, GTM.init, Page View). Клікніть на Page View — у правій панелі відображаються:

Tags Fired — теги, що спрацювали (якщо контейнер порожній — список пустий, це нормально).
Tags Not Fired — теги, умови яких не виконались.
Variables — поточні значення всіх змінних GTM.
Data Layer — стан об’єкта dataLayer на момент події.

Якщо бачите подію Page View і банер «Connected» — GTM встановлено правильно.

Крок 7. Перевірка через Tag Assistant Companion

Встановіть розширення Tag Assistant Companion для Chrome (посилання у Chrome Web Store).

Перейдіть на свій сайт — розширення покаже іконку поруч з адресним рядком:

Колір	Що означає
Зелена	GTM завантажено без помилок
Жовта	Попередження: порядок коду чи конфлікти
Червона	Критична помилка: GTM не знайдено або завантажується двічі

Клікніть на іконку — побачите ID вашого контейнера, версію і список тегів поточної сторінки.

Додаткова перевірка через View Source

У браузері натисніть Ctrl+U (View Source) і пошукайте googletagmanager.com у HTML:

Ctrl+F → googletagmanager.com

Повинно знайтися двічі: один раз у <head> (JavaScript-фрагмент) і один раз після <body> (noscript iframe). Якщо знайдено тільки один раз або більше двох — є проблема з дублюванням або неповним встановленням.

Крок 8. Публікація порожнього контейнера

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

У GTM натисніть Submit (кнопка у верхньому правому куті).
Виберіть Publish and Create Version.
Назва версії: «Initial setup» або «Empty container».
Натисніть Publish.

Тепер у GTM є версія 1 — порожній контейнер. Всі подальші зміни (додавання тегів GA4, Meta Pixel тощо) теж публікуються через Submit і зберігаються як окремі версії з можливістю відкоту.

Типові помилки при встановленні GTM

1. Код вставлено тільки на головну сторінку

Найпоширеніша помилка. GTM повинен бути на кожній сторінці сайту. Якщо ви вставили код у header.php, але частина сторінок використовує інший шаблон (наприклад, WooCommerce cart-page із custom header) — там GTM відсутній.

Перевірте кілька сторінок різних типів: головна, стаття/продукт, сторінка контактів, checkout. У Tag Assistant на кожній повинна бути зелена іконка.

2. Фрагменти переставлені місцями

JavaScript-фрагмент потрапив у <body>, а noscript — у <head>. Технічно сайт «не впаде», але GTM може завантажуватись із затримкою і деякі теги не встигнуть спрацювати до рендерингу сторінки.

3. Дублювання коду GTM

Трапляється, коли GTM додають і через плагін, і вручну у functions.php. У результаті googletagmanager.com завантажується двічі — усі події рахуються подвійно: переглядів сторінок вдвічі більше, конверсій вдвічі більше. Перевірте через View Source.

4. Неправильний ID контейнера

GTM-XXXXXXX — ID саме цього контейнера. Якщо у вас є тестовий і продакшн-контейнери, або ви брали код у колеги — перевірте, що ID відповідає тому контейнеру, де ви налаштовуєте теги.

5. GTM блокується CSP-заголовком

Content Security Policy (CSP) на вашому сервері може забороняти завантаження зовнішніх скриптів. Якщо GTM не завантажується і в консолі браузера є помилка типу Refused to load script 'https://www.googletagmanager.com/gtm.js' — додайте домен до whitelist:

Content-Security-Policy: script-src 'self' https://www.googletagmanager.com;

6. Кеш не очищено після вставки коду

WordPress-кешувальні плагіни (WP Rocket, W3 Total Cache, LiteSpeed Cache) можуть зберігати стару версію HTML без GTM. Після будь-яких змін у коді — очистіть кеш плагіна і Cloudflare/CDN.

7. noscript не одразу після `<body>`

Деякі теми WordPress додають <body class="..."> з атрибутами, і код вставляється після тегів типу <div id="wrapper"> замість після <body>. Перевірте через View Source — noscript повинен іти відразу після відкривного <body>, до будь-яких <div> чи <header>.

8. GTM встановлено, але контейнер не опубліковано

GTM завантажує поточну опубліковану версію контейнера. Якщо ви тільки що створили контейнер і ще жодного разу не натискали Submit — на сайті завантажується порожній контейнер. Це нормально (і правильно), але переконайтесь, що після додавання тегів і перевірки в Preview ви натиснули Submit → Publish.

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

Контейнер встановлено і перевірено. Наступні кроки:

Налаштувати GA4 через GTM — додати GA4 Configuration Tag з вашим Measurement ID і налаштувати першу подію. Детально у чеклісті налаштування GA4.
Зрозуміти тег — що таке теги GTM, які бувають типи і як їх створювати.
Зрозуміти тригер — коли і за якими умовами спрацьовують теги.
Перевірити архітектуру контейнера — детальніше про теги, тригери, змінні і dataLayer читайте у основах GTM.