Gtm

Как установить Google Tag Manager на сайт

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

Автор: Андрій Коваленко 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 platformWeb

Нажмите 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 (рекомендуется для начинающих)

  1. Plugins → Add New → Insert Headers and Footers (от WPCode или SOGO).
  2. Активируйте. Settings → Insert Headers and Footers.
  3. В поле Scripts in Header вставьте первый фрагмент GTM.
  4. В поле Scripts in Body вставьте второй фрагмент (noscript).
  5. 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 дочерней темы
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-theme.

Шаг 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

  1. Settings → Custom Code.
  2. Add Code → вставьте первый фрагмент, выберите Head, Apply to all pages.
  3. Add Code ещё раз → вставьте второй фрагмент (noscript), выберите Body — start, Apply to all pages.
  4. Publish.

Squarespace

  1. Settings → Advanced → Code Injection.
  2. Поле Header — вставьте первый фрагмент.
  3. Поле Footer — вставьте второй фрагмент. (Squarespace не позволяет вставить код сразу после <body>, поэтому noscript в Footer — приемлемый компромисс.)
  4. Save.

Webflow

  1. Project Settings → Custom Code.
  2. Секция Head Code — вставьте первый фрагмент.
  3. Секция Body Code — вставьте второй фрагмент.
  4. Save and publish.

Tilda

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

Shopify

  1. Online Store → Themes → Actions → Edit Code.
  2. Откройте theme.liquid.
  3. Вставьте первый фрагмент в <head> (до </head>), второй — сразу после <body>.
  4. Save.

Шаг 6. Проверка через Preview Mode

Код вставлен — теперь убедитесь, что GTM действительно загружается.

Как запустить Preview

  1. Вернитесь на tagmanager.google.com.
  2. Нажмите кнопку Preview в правом верхнем углу.
  3. В поле «Your website’s URL» введите адрес вашего сайта.
  4. Нажмите 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. Публикация пустого контейнера

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

  1. В GTM нажмите Submit (кнопка в верхнем правом углу).
  2. Выберите Publish and Create Version.
  3. Название версии: «Initial setup» или «Empty container».
  4. Нажмите 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.

Что дальше после установки

Контейнер установлен и проверен. Следующие шаги:

  1. Настроить GA4 через GTM — добавить GA4 Configuration Tag с вашим Measurement ID и настроить первое событие. Подробно в чеклисте настройки GA4.
  2. Разобраться с тегом — что такое теги GTM, какие бывают типы и как их создавать.
  3. Разобраться с триггером — когда и при каких условиях срабатывают теги.
  4. Изучить архитектуру контейнера — подробнее о тегах, триггерах, переменных и dataLayer читайте в основах GTM.

Связанные материалы

Теги

gtm google-tag-manager installation wordpress getting-started tag-assistant preview-mode

Похожие статьи

Gtm

Google Tag Manager: что это и как настроить теги

Полное руководство по Google Tag Manager для начинающих: что такое GTM, как установить, как работают теги/триггеры/переменные, dataLayer, Preview Mode, server-side GTM и Consent Mode v2.

Gtm

dataLayer: как работает и как использовать

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

Gtm

Как настроить событие в GTM: тег и триггер

Пошаговая инструкция: настроить кастомный тег и триггер в GTM для отслеживания клика по кнопке — dataLayer.push, Custom Event trigger, GA4 event. Проверка через Preview.

Смотрите также

Гайды

Глоссарий

Инструменты

Эту статью пишет и обновляет Андрій Коваленко — без AI-воды и партнёрских ссылок. Заметил устаревший факт или неточность — напиши, перепишу в ту же неделю.

Кто ведёт сайт и почему без AI