Маркетологу нужно поставить на сайт пиксель Вконтакте, счётчик Яндекс.Метрики и код отслеживания конверсий Google. Без GTM это три отдельных обращения к разработчику, три задачи в трекере, три ожидания. С GTM — три действия в интерфейсе за 15 минут без единой строки кода. Разбираем что такое Google Tag Manager, как он устроен и как его правильно настроить.
Что такое Google Tag Manager
Google Tag Manager (GTM, диспетчер тегов Google) — бесплатный инструмент Google для управления тегами, счётчиками, пикселями и скриптами сторонних систем на сайте или в мобильном приложении. Вместо того чтобы вставлять каждый скрипт напрямую в код сайта, вы один раз устанавливаете контейнер GTM — и дальше управляете всеми тегами через веб-интерфейс без участия разработчика.
Принцип работы: разработчик один раз вставляет мастер-код GTM в шаблон сайта. После этого маркетолог может самостоятельно добавлять, изменять и удалять любые теги — счётчики аналитики, пиксели рекламных систем, коды отслеживания конверсий — через интерфейс GTM, не трогая исходный код.
GTM доступен бесплатно на tagmanager.google.com. Требуется аккаунт Google. Поддерживает веб-сайты и мобильные приложения (iOS и Android).
Зачем нужен GTM: преимущества перед прямой вставкой кода
| Без GTM | С GTM |
|---|---|
| Каждый новый скрипт — задача разработчику | Маркетолог добавляет теги самостоятельно |
| Ожидание очереди на деплой | Изменения публикуются мгновенно |
| Нет возможности откатить изменения | Контроль версий — откат в два клика |
| Скрипты могут замедлять загрузку | Асинхронная загрузка — минимальное влияние на скорость |
| Нет проверки до публикации | Режим предпросмотра — тест перед запуском |
| Каждое изменение — риск сломать сайт | Изменения изолированы в контейнере GTM |
Ключевые термины GTM
Прежде чем работать с GTM, важно понять четыре базовых понятия.
Тег — фрагмент JavaScript-кода, который выполняется на странице. Это может быть счётчик Google Analytics 4, пиксель ВКонтакте, код отслеживания конверсий Google Ads или любой другой скрипт. GTM содержит библиотеку готовых шаблонов для популярных сервисов — для большинства задач писать код не нужно вовсе.
Триггер — условие, при котором тег активируется. Триггер отвечает на вопрос «когда?»: при загрузке любой страницы, при клике на конкретную кнопку, при отправке формы, при прокрутке страницы на 50%, при просмотре определённого видео. Без триггера тег не запустится никогда.
Переменная — параметр, который передаёт дополнительные данные тегу или триггеру. Например, переменная «Click URL» передаёт адрес ссылки, по которой кликнул пользователь. Переменная «Page URL» — адрес текущей страницы. Переменные позволяют делать настройки гибкими и точными.
Контейнер — оболочка, которая хранит все теги, триггеры и переменные проекта. Один аккаунт GTM может содержать несколько контейнеров (например, отдельный для каждого сайта компании).
| Элемент | Что делает | Аналогия |
|---|---|---|
| Тег | Выполняет код — отправляет данные в аналитику или рекламную систему | Инструмент, который что-то делает |
| Триггер | Определяет когда тег сработает | Кнопка запуска инструмента |
| Переменная | Передаёт данные для уточнения условий или параметров | Настройки инструмента |
| Контейнер | Хранит все элементы проекта | Ящик с инструментами |
Как установить GTM на сайт: пошаговая инструкция
Создание аккаунта и контейнера
Перейдите на tagmanager.google.com и войдите под аккаунтом Google. Нажмите «Создать аккаунт». Укажите название компании и страну. Создайте контейнер: задайте имя (обычно это домен сайта) и выберите тип платформы — «Веб-сайт». Нажмите «Создать» и примите условия использования.
Установка кода на сайт
После создания контейнера GTM предоставит два фрагмента кода. Первый фрагмент (скрипт) необходимо вставить как можно ближе к открывающему тегу <head>. Второй фрагмент (noscript) вставляется сразу после открывающего тега <body>. Размещение в начале страницы критично: если посетитель закроет страницу до её полной загрузки, GTM успеет зафиксировать визит.
Идентификатор контейнера имеет вид GTM-XXXX — его можно найти в разделе «Администрирование» в любой момент.
Установка на WordPress через плагин
Для WordPress рекомендуется использовать плагин «Google Tag Manager for WordPress» (автор Thomas Geiger) вместо ручного редактирования кода темы. Установка: Плагины → Добавить новый → найти по названию → установить и активировать. В настройках плагина вставьте ID контейнера (GTM-XXXX). Выберите размещение кода в <head> и noscript после <body>. Размещение в подвале (footer) снижает точность сбора данных.
Проверка установки
Нажмите кнопку «Предварительный просмотр» в интерфейсе GTM. Откройте ваш сайт в новой вкладке — в нижней части страницы появится отладочная панель GTM. Если контейнер отображается как «Connected» — установка выполнена корректно. Дополнительная проверка: установите расширение Chrome «Tag Assistant Companion» для диагностики тегов.
Как создать тег и настроить цель
Рассмотрим самый частый сценарий — настройку отслеживания отправки формы.
- В интерфейсе GTM нажмите «Теги» → «Создать».
- Выберите тип тега — для Google Analytics 4 это «Событие GA4».
- Укажите Measurement ID (вида G-XXXX из аккаунта GA4).
- Задайте название события, например «form_submit».
- Затем создайте триггер: нажмите на блок «Триггеры» → «Создать» → выберите тип «Отправка формы».
- Настройте условие — например, только для форм на конкретной странице или для всех форм сайта.
- Сохраните тег и триггер.
- Нажмите «Предварительный просмотр», протестируйте отправку формы на сайте — убедитесь, что событие фиксируется в отладочной панели.
- Опубликуйте версию кнопкой «Отправить».
GTM и gtag.js: важное предупреждение
Многие сайты уже имеют установленный глобальный тег gtag.js — это прямая интеграция Google Analytics без GTM. Если такой код уже есть на сайте и вы дополнительно добавляете тег GA4 Configuration через GTM, данные будут задваиваться. Это искажает показатели просмотров на 40–50%.
Правило простое: используйте либо gtag.js напрямую, либо GTM — но не оба метода одновременно для одного ресурса GA4. При переходе на GTM прямой код gtag.js нужно удалить из шаблона сайта.
Что можно отслеживать через GTM
GTM позволяет настроить отслеживание практически любого действия на сайте. Стандартные сценарии:
- клики по кнопкам и ссылкам (в том числе по телефонным номерам и email-адресам),
- отправки форм,
- глубина прокрутки страницы,
- просмотры видео,
- переходы между страницами в SPA-приложениях,
- время на странице,
- клики по элементам с конкретными CSS-классами.
Расширенные сценарии:
- передача данных электронной торговли (ecommerce) в GA4 — просмотры товаров, добавления в корзину, покупки;
- отслеживание событий в чате (JivoSite, Carrot Quest);
- передача данных из CRM в аналитику через Data Layer;
- A/B тестирование элементов без участия разработчика.
Типичные ошибки при работе с GTM
- Публикация без тестирования. Режим предпросмотра существует именно для того, чтобы проверить теги до публикации. Непроверенный тег может отправлять дублированные события или не срабатывать вовсе.
- Слишком широкие триггеры. Тег GA4 с триггером «Все клики» будет фиксировать каждый клик на сайте и засорять данные аналитики. Триггеры нужно ограничивать конкретными условиями — классом кнопки, URL страницы, идентификатором элемента.
- Отсутствие контроля версий. GTM автоматически сохраняет историю версий. Перед каждым значимым изменением стоит публиковать новую версию с понятным названием — это позволит откатиться, если что-то пойдёт не так.
- Один аккаунт на несколько клиентов. Если агентство управляет GTM нескольких клиентов под одним аккаунтом — при смене подрядчика клиент теряет доступ к данным. Правильная практика: отдельный аккаунт для каждого клиента на его корпоративном Gmail.
Комментарии скоро откроются. А пока — пишите нам в Telegram-канал.