GTM: что такое и как его правильно настроить

Он также известен как Менеджер тегов Google или GTM. Это бесплатный инструмент от Google, который позволяет легко вносить изменения в код сайта или мобильного приложения. Эти правки и называются тегами. Разберём на примере. Представим подростковую комнату: в ней, среди прочего, есть стол, кровать и коробка с игрушками.

• Комната — это общий код всего сайта.
• Стол, кровать и прочее — коды разных других систем (Метрика, GA4, Calltouch).
• Коробка — код Google Tag Manager.
• Игрушки в коробке — те самые кусочки JavaScript-кода.

Зачем нужен Google Tag Manager? Обратимся к той же ассоциации. Ребёнку проще взять или положить игрушку в коробку, чем передвинуть стол. Здесь не обойтись без помощи взрослого: без разработчика сайта. GTM же позволяет самостоятельно вносить изменения в сайт, не имея глубоких знаний программирования и JavaScript. Это и есть основное назначение Менеджера тегов Google.

Какие задачи помогает решить gtm?

• Настроить событие на клик по кнопке.
• Отследить, сколько времени посетитель провёл в каталоге.
• Установить счётчик Метрики и код Google Analytics.
• Поставить пиксели соцсетей.
• Настроить отслеживание отправки формы.
• Подключить электронную торговлю.
• Создать кастомные cookie-файлы.

Это не все возможности GTM, они довольно широки. И чем глубже понимание JavaScript, тем более впечатляющие результаты можно получить.

Переходим на страницу Google Tag Manager, кликаем на «Создать аккаунт». Заполняем поля и выбираем целевую платформу.

В одном аккаунте GTM можно создать несколько контейнеров, а «Название аккаунта» должно отражать общий признак. Страну выбираем любую — это ни на что не влияет. В «Название контейнера» указываем домен сайта.

Кликаем «Создать аккаунт» и принимаем условия пользовательского соглашения — аккаунт и контейнер GTM созданы. Откроется окно, содержащее техническое задание по установке Google Tag Manager на сайт — его необходимо передать разработчику. После его выполнения можно приступать к работе.

Это окно также открывается при нажатии на идентификатор контейнера GTM в верхнем правом углу.

Помимо главной вкладки, есть разделы «Версии» и «Администрирование»:

• В «Версиях» хранится подробная история всех опубликованных версий GTM, которые можно развернуть и посмотреть изменения.
• В «Администрировании» находятся ключевые настройки аккаунта и контейнера — здесь можно предоставить доступы другим людям, экспортировать контейнер и посмотреть историю действий.

На вкладке «Рабочая область» создаются теги, триггеры и переменные.

1. Теги — код, который будет срабатывать на сайте.
2. Триггеры — это набор условий, при которых запускается нужный тег.
3. Переменные — группа объектов вида «ключ = значение», где ключ остаётся неизменным, а значение подстраивается под разные действия.

Лимита по количеству тегов нет. Но стоит помнить, что даже самый простой тег замедляет скорость работы сайта. Поэтому, если есть возможность создать вместо трёх тегов один — лучше сделать именно так.

Рассмотрим, как установить счётчик Метрики и Google Analytics на сайт, а также настроить отслеживание клика по кнопкам соцсетей для этих систем.

Переходим на вкладку «Теги» в боковом меню, нажимаем «Создать» в верхнем правом углу. Появляется следующее меню:

Сначала создаём тег счётчика Яндекс Метрики. Важно указать в названии понятное обозначение сути кода: назначение тега должно быть очевидным для любого человека только по его названию. Например, «YM - Counter», «ЯМ - Счётчик» или «ЯМ - 12345678», где 12345678 — номер счётчика. Числовое обозначение будет полезно, когда много счётчиков.

Далее жмём в область «Конфигурация тега».

Чаще всего в работе используются выделенные оранжевым конфигурации, особенно «Пользовательский HTML». Он необходим для установки счётчика Метрики, поэтому выбираем его. Всплывёт окно настройки тега, где появится текстовое поле. В нём указываем код счётчика из настроек Метрики.

Жмём на поле «Триггеры» и выбираем доступный по умолчанию «All Pages». Этот триггер вызывает срабатывание тега при каждом просмотре страницы: при открытии, переходе или перезагрузке, когда и должен срабатывать счётчик Метрики.

Кликаем «Сохранить» — счётчик готов. Все манипуляции отнимают несколько минут, в то время как при участии разработчика сайта, это заняло бы несколько часов. Аналогично подключается большинство других рекламных или аналитических систем, например, ВК Реклама, myTarget, AdRiver.

Google Analytics настраивается по-другому. Повторяем все перечисленные выше шаги до выбора конфигурации тега. Затем выбираем «Google Аналитика → Тег Google». После этого появится поле «Идентификатор тега», в которое копируется идентификатор потока данных из Google Analytics.

Для данного тега также выбираем триггер «All Pages» и сохраняем — Google Analytics подключен к сайту.

Создадим тег, который будет передавать в GA4 событие при кликах по кнопкам соцсетей: VK, Дзен и Telegram-канал. Для этого создаём тег с конфигурацией «Google Аналитика → Google Аналитика: событие GA4». Вписываем идентификатор потока данных и добавляем название события — имя, с которым оно будет отображаться в отчётах GA4. В окне выбора триггеров нажимаем на плюс в верхнем правом углу.

В открывшемся окне также стоит давать понятные и ёмкие названия. В нашем случае «Клики по соцсетям - VK». После клика на поле «Настройка триггера» появляется окно выбора его типа. Рассмотрим самые популярные:

• Просмотр страницы — срабатывает при загрузке страницы.
• Все элементы — при любых кликах на сайте.
• Только ссылки — при нажатиях только по ссылкам.
• Таймер — срабатывает, если на странице проведено указанное количество времени.
• Глубина прокрутки.

В нашем случае берём тип «Клик - Только ссылки». Если оставить всё как есть и нажать «Сохранить», тег будет срабатывать при всех кликах по ссылкам. Отфильтровать лишние помогут «Переменные».

При нажатии на переключатель «Некоторые клики по ссылкам» появится виджет работы с переменными. Чтобы уточнить, какие именно клики нужны, существует переменная «Click URL», которую нужно включить. Для этого кликаем на название выбранной переменной по умолчанию и указываем «Выбрать встроенную переменную»:

В открывшемся окне находим «Click URL», пишем в правое поле vk.com, сохраняем. Теперь тег будет срабатывать при кликах по ссылкам, которые содержат любой адрес ВК.

В окне настройки тегов появится только что созданный триггер. При нажатии на «плюс» создаются триггеры для остальных соцсетей, то есть к одному тегу можно подключить несколько триггеров.

Если необходимо передавать данные о кликах по соцсетям, например, в Метрику, можно использовать эти же триггеры.

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

Если всё в порядке, кликаем «Опубликовать».


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