Google Tag Manager, он же гугл тег менеджер, — прослойка между сайтом и всем, что на него навешивают: счётчиками, пикселями, обработчиками событий. Разбираю установку, связку тегов с триггерами, работу с dataLayer через генератор кода и то, о чём в руководствах молчат: как GTM влияет на скорость и почему доступ к нему равен доступу к коду сайта.
- GTM позволяет менять счётчики и события без правки кода сайта и без ожидания релиза.
- Через него ставят не только сервисы Google: Яндекс.Метрика заводится типом «Пользовательский HTML».
- Три сущности: тег — что сделать, триггер — когда, переменная — с какими данными.
- Свои события передаются через dataLayer.push и становятся триггерами в интерфейсе.
- Доступ к GTM равен доступу к фронтенду: через «Пользовательский HTML» выполняется произвольный код.
Что такое Google Tag Manager и кому он нужен
Google Tag Manager — прослойка между сайтом и всем, что на него навешивают: счётчиками, пикселями, обработчиками событий. Вместо того чтобы каждый раз просить разработчика вставить очередной фрагмент кода, вы один раз ставите контейнер GTM, а дальше добавляете и меняете теги в его интерфейсе.
По-русски название пишут и «гугл тег менеджер», и «джи ти эм» — это одно и то же, сокращённо GTM.
Практический смысл для того, кто занимается сайтом: скорость правок. Поставить счётчик, добавить цель, повесить событие на кнопку — минуты вместо недели ожидания релиза. Для агентства или подрядчика это ещё и доступ: клиент даёт права в GTM, не пуская чужого человека в код сайта.
Частое заблуждение: GTM считают инструментом «для Google Analytics». Через него ставят что угодно, включая Google Analytics и Яндекс.Метрику — она в списке поддерживаемых тегов не значится, но заводится через тип «Пользовательский HTML» за пару минут. В российских проектах это самый частый сценарий использования GTM.
Установка контейнера и три сущности внутри
Установка занимает один раз и состоит из трёх шагов.
- Создайте аккаунт и контейнер. Контейнер привязывается к одному сайту, идентификатор выглядит как
GTM-XXXXXXX. На аккаунт можно завести сколько угодно контейнеров. - Вставьте два фрагмента. Первый — как можно выше внутри
<head>, второй — сразу после открывающего<body>. Второй нужен для браузеров с отключённым JavaScript и без него часть данных теряется. - Проверьте предпросмотром. Кнопка «Предварительный просмотр» открывает сайт в режиме отладки и показывает, какие теги сработали. Пока в отладчике пусто, публиковать нечего.
Дальше вся работа идёт тремя сущностями, и понимание связи между ними экономит часы:
Формула простая: тег отвечает на вопрос «что сделать», триггер — «когда», переменная — «с какими данными».
dataLayer: как передать в GTM своё событие
Встроенные триггеры GTM закрывают простые случаи: клик по ссылке, отправка формы, прокрутка. Как только нужно передать что-то своё — сумму заказа, название тарифа, факт успешной оплаты, — в дело идёт dataLayer.
Это массив, в который сайт складывает сообщения для GTM. Одна строка dataLayer.push в коде — и в интерфейсе появляется событие, на которое можно повесить любой тег.
Порядок здесь важнее синтаксиса: сначала событие должно появиться в отладчике, потом создаётся триггер, и только потом тег. Если делать наоборот, будете отлаживать три сущности сразу и гадать, какая из них молчит.
Через этот же механизм в GTM удобно заводить цели аналитики: событие из dataLayer становится триггером, а тегом выступает вызов счётчика. Как устроены сами цели и какие бывают типы — в разборе про цели в Яндекс.Метрике.
Чего в руководствах не пишут
У GTM есть цена, о которой в руководствах обычно молчат.
Отдельно про порядок в контейнере. Через полгода работы там накапливается два десятка тегов с именами вроде «тег 3 копия». Заведите правило именования сразу: тип, площадка, действие. И раз в квартал открывайте контейнер, чтобы выключить то, что уже не нужно, — это самый дешёвый способ ускорить сайт.
Частые вопросы
Что такое Google Tag Manager простыми словами?
Чем GTM отличается от Google Analytics?
Можно ли поставить Яндекс.Метрику через Google Tag Manager?
Что такое dataLayer и зачем он нужен?
Замедляет ли GTM сайт?
Насколько безопасно давать доступ к GTM подрядчику?
Как проверить, что тег в GTM работает?
Главное
GTM решает одну задачу: позволяет менять аналитику и события на сайте без правки кода. Логика держится на трёх сущностях — тег, триггер, переменная, — а всё нестандартное передаётся через dataLayer. Помните про обратную сторону: контейнер тянет за собой все теги внутри, поэтому раз в квартал его надо чистить, а доступ к нему выдавать так же осторожно, как доступ к админке.
Соберите код события генератором выше и проверьте его предпросмотром до публикации контейнера. Нужна аналитика, по которой видно деньги, — разберём на консультации.