21.10.2024

2 +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 уже установлен на вашем сайте и вам нужно получить ID без входа в GTM:

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

Эта команда загружает исходный код вашей страницы и извлекает любую строку идентификатора контейнера GTM с помощью шаблона regex — полезно для аудита сторонних сайтов или проверки того, какой контейнер фактически активен.

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

Добавьте тег Custom 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.

Последовательность тегов: Когда несколько тегов срабатывают на одном триггере, порядок выполнения не гарантирован, если вы явно не настроили Последовательность тегов (Setup Tag / Cleanup Tag) в расширенных настройках тегов 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 — особенно синхронные теги Custom HTML или тяжёлые сторонние скрипты — могут существенно влиять на время загрузки страницы. Регулярно проверяйте теги в вашем контейнере, используйте встроенные элементы управления приоритетом и последовательностью срабатывания тегов GTM, а для сайтов с высоким трафиком рассмотрите серверный GTM, где накладные расходы клиентских скриптов являются измеримой проблемой.

Сэкономьте 15% на всех хостинговых услугах