Google Tag Manager: что это и зачем он нужен сайту

Что такое Google Tag Manager

Яндекс Практикум описывает GTM как бесплатный диспетчер тегов от Google: с его помощью теги настраивают и контролируют без навыков программирования. Тег здесь означает фрагмент кода, который что-то измеряет или показывает: счётчик Метрики, рекламный пиксель, код коллтрекинга.

Раньше каждый такой код вставляли в шаблон страницы, и любая правка шла через разработчика. Автор статьи на Хабре, руководитель SEO в компании Тензор, объясняет принцип так: тег-менеджер работает как контейнер, на страницу устанавливается один его код, а внутри подключаются и управляются десятки других скриптов.

В том же материале Практикума перечислено, кто пользуется диспетчером: маркетологи, трафик-менеджеры, веб-аналитики и другие специалисты, которые собирают информацию о пользователях. Там же сказано, что GTM подойдёт и небольшой компании с одним специалистом по трафику, и крупному бизнесу с большим штатом маркетологов. Подключать можно и Яндекс Метрику, и Google Analytics, и другие сервисы.

Для маркетолога это означает скорость: новую цель, пиксель или событие можно запустить в тот же день, и не приходится ждать очереди в задачах разработки. Для владельца сайта это ещё и порядок: все подключённые коды видны в одном списке, и они не лежат россыпью по файлам темы.

Как устроен GTM: теги, триггеры, переменные и слой данных

На четырёх понятиях держится вся работа диспетчера, и справка Google разбирает их в отдельном разделе.

• Тег: код, который отправляет данные в систему вроде Google Analytics.
• Триггер: условие запуска, он слушает события, например клики, отправку форм или загрузку страницы.
• Переменная: именованное значение, которое меняется, скажем название товара, цена или дата.
• Слой данных: временное хранилище значений, из которого их забирают теги, триггеры и переменные.

Значения можно брать из JavaScript-переменных, файлов cookie и разметки страницы, но, по рекомендации той же справки, надёжнее держать их в аккуратно организованном слое данных. Тогда случайная правка вёрстки не ломает сбор статистики, и проверять цепочку проще. Справка прямо называет плюсы такого подхода: меньше риск потерять данные при неожиданных изменениях кода и проще искать причину сбоя.

Встроенные переменные закрывают простые задачи без слоя данных. Допустим, тег должен запускаться только на странице квитанции после покупки: создаётся триггер просмотра страницы с условием «URL содержит» нужный адрес, и тег срабатывает исключительно там. Так решают задачи, где достаточно адреса и источника перехода.

В руководстве Google для разработчиков есть наглядный сценарий: тег ремаркетинга запускается, когда значение purchase_total превышает 7000 рублей. Там же описан порядок обработки: если сообщение в слое данных содержит событие, диспетчер запускает все теги, чьи условия выполнены, и только потом берёт следующее сообщение.

Порядок обработки сообщений тоже влияет на результат. Если вызов dataLayer.push выполняется внутри пользовательского шаблона или HTML-тега, его сообщение встаёт в очередь после всех остальных, и свежие значения могут быть недоступны следующему событию. Чтобы избежать этого, добавляйте к сообщению имя события и слушайте его специальным триггером.

Типовой случай разобран в справке о триггере «Специальное событие». Форма отправляется нестандартным способом, и обычный триггер отправки не срабатывает. Разработчик один раз добавляет к кнопке вызов dataLayer.push с событием button1-click, маркетолог создаёт триггер с тем же именем, и тег начинает запускаться. В том же примере вместе с событием уходит значение конверсии, равное 25, и его можно подставить в тег Google Рекламы.

Эксперт по GTM Симо Ахава в разборе слоя данных предупреждает о другой ловушке: по его оценке, одна из главных ошибок состоит в том, чтобы в начале проекта составить огромный список требований и один раз внедрить его на все страницы.

Слой данных нужно воспринимать как живую и гибкую модель.

Симо Ахава, эксперт по Google Tag Manager, в том же материале

Как установить GTM и настроить первый тег?

Базовый порядок действий агентство Kokoc описывает в пять шагов, и он подходит большинству сайтов.

1. Создайте аккаунт и контейнер типа Web на tagmanager.google.com, вы получите идентификатор вида GTM-XXXX.
2. Вставьте основной скрипт в раздел head, а фрагмент noscript сразу после открывающего тега body.
3. Включите предварительный просмотр, откройте страницу и убедитесь, что контейнер загрузился.
4. Создайте тег конфигурации GA4 с идентификатором потока данных и триггером All Pages.
5. Опубликуйте версию и дайте ей понятное название, чтобы при сбое было проще откатиться.

Агентство оценивает такую первичную настройку в 20-30 минут без написания кода. Для сайта на WordPress подойдёт готовый плагин Google Tag Manager for WordPress, он избавляет от правки файлов темы. Код контейнера стоит держать в head: размещение в подвале приводит к потере части сессий на ранних этапах загрузки.

Коварная ошибка на этом этапе касается дублей. Допустим, на странице уже стоит прямой код gtag.js, а в контейнер добавили ещё и тег конфигурации GA4. В том же материале расчёт такой: одновременная работа двух вариантов искажает показатель просмотров на 40-50%. Выход простой: оставить один способ, то есть либо убрать прямой код, либо не добавлять конфигурацию в контейнер.

Когда контейнер работает, настройте права. Практикум показывает, что доступ выдают по почте пользователя, а уровней всего четыре: публикация, одобрение, редактирование и чтение. Подрядчику хватит редактирования, а публиковать версии лучше оставить владельцу или ответственному маркетологу, тогда случайная правка не попадёт к посетителям.

Где GTM помогает маркетологу и SEO-специалисту

Главная задача диспетчера для маркетолога: передавать в Метрику и Google Analytics события, которые счётчик сам не видит. Авторы Texterra в руководстве для продвинутых показывают, что после настройки не придётся просить программиста устанавливать маркеры целевых действий вручную. Такие события потом становятся целями и помогают считать конверсию по каждому каналу, а вместе с UTM-метками показывают, какая реклама привела к заявке.

В том же руководстве разобран сложный случай: нужно отследить ошибку валидации в поле ИНН, а цвет поля меняется без отдельного события. Авторы подсчитали через консоль разработчика, что в документе 8 элементов с нужным классом, перебрали их циклом и передали триггеру признак, когда нашлось красное поле с нужным идентификатором. Итог: ошибку заполнения формы видно в отчётах без правок кода сайта.

Есть и вспомогательные сценарии. Например, Timeweb приводит таймер, который срабатывает каждые 25 минут и продлевает сеанс в Google Analytics. Кроме того, через тег с произвольным HTML подключают микроразметку, но после публикации проверьте её валидатором, потому что скрипты выполняются в браузере. Как это влияет на индексацию и скорость, разбираем в материале про JavaScript.

С чего начать, если событий пока нет: клик по телефону и почте, отправка форм, нажатие на кнопку заказа, прокрутка страницы до нужной точки. Для каждого события заведите отдельный тег и понятное имя, чтобы через полгода команда помнила, что за цифры лежат в отчёте. Если цели уже настроены в Метрике, не дублируйте их без необходимости.

Теги грузятся асинхронно, поэтому, как отмечает Click.ru, их использование не замедляет загрузку страниц. Это не отменяет простого правила: каждый лишний тег добавляет вес, и неиспользуемые лучше удалять.

Плюсы и ограничения диспетчера

В таблице собрано то, что стоит учесть до внедрения. Большинство пунктов описывает Яндекс Практикум в том же материале, где даёт определение, остальное добавляют практики.

Практикум называет и ещё два минуса: готовых тегов мало, и разбираться с проблемами придётся самостоятельно. Агентство Kokoc в своём материале добавляет примеры интеграций, которые требуют обходных путей: данные виджета Jivosite не передаются в Метрику напрямую, кроме того, цели на формы GetCourse требуют предварительной интеграции платформы с Google Analytics 4.

Ещё одно ограничение организационное. Kokoc напоминает, что привязка к экосистеме Google требует корпоративного аккаунта Gmail, иначе доступы к контейнеру теряются при смене подрядчика. Заведите аккаунт на компанию, а не на личную почту сотрудника, и добавляйте подрядчиков через управление доступом с нужным уровнем прав.

Показателен эксперимент автора из Хабра. Он на десять дней поставил Метрику на один сайт четырьмя способами и сверил данные со своей аналитикой. Прямая вставка кода дала наибольшее расхождение со своей аналитикой по формам и покупкам, а контейнеры ЯТМ и GTM отклонились заметно слабее. Его вывод: Яндекс Тег Менеджер и GTM дают примерно одинаковую погрешность, и для большинства задач этого достаточно.

Можно ли использовать GTM в России и чем его заменить?

Вопрос законности лучше закрыть до установки. Автор из Хабра напоминает, что Роскомнадзор заявил: системы веб-аналитики собирают персональные данные пользователей и иногда передают их за границу. Код GTM грузится с серверов Google, поэтому, по логике регулятора, вопрос касается и диспетчера.

Сам автор запрашивал официальный ответ и получил такой: если в контейнере нет кодов, собирающих персональные данные, использовать диспетчер можно. Он оговаривается, что проверить содержимое контейнера со стороны сложно. Для Google Analytics 4 он описывает путь через уведомление о трансграничной передаче и обновление политики конфиденциальности и cookie-баннера. Конкретное решение по вашему сайту согласуйте с юристом.

Заменить диспетчер можно. В Метрике появился Яндекс Тег Менеджер: его включают в настройках счётчика, он даёт единый интерфейс для тегов и простую настройку целей для аналитики и рекламы. Российским аналогом GTM считают именно его, а среди открытых решений есть Matomo Tag Manager, который можно развернуть на собственных серверах.

Какие ошибки делают чаще всего?

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

• Не открыть предварительный просмотр: агентство Kokoc утверждает, что связка Preview и Tag Assistant выявляет до 80% ошибок до релиза.
• Оставить код контейнера в подвале и потерять часть ранних сессий.
• Одновременно держать прямой gtag.js и тег конфигурации GA4.
• Забыть про одностраничный сайт: стандартный триггер All Pages не фиксирует переходы, пока браузер не перезагружает документ.
• Не назвать версию понятно и потом не найти, к какой откатываться.

Для сайтов на React, Vue и Angular агентство предлагает два пути: привязать к тегу GA4 триггер «Изменение истории» либо отправлять событие просмотра через dataLayer.push из самого приложения. После правки откройте Preview: каждый внутренний переход должен появляться отдельной строкой.

Отдельная тема касается согласий посетителя. По оценке Kokoc, если нарушить порядок и отправить данные раньше статуса согласия, теряется от 20 до 30% событий. Сначала задавайте состояние согласия, затем запускайте теги, и проверьте это в предпросмотре, а текст баннера утвердите с юристом.

После релиза проверьте поступление хитов в отчёт реального времени: для GA4 подойдёт DebugView. Сверьте названия событий и параметры, например event_name и form_id, с техническим заданием. Если данных нет, откройте версию в предпросмотре и посмотрите, какой триггер не сработал. Так вы найдёте причину за несколько минут, а не за неделю статистики с нулями.

Частые вопросы