Главная / Блог / Как пользоваться Google Tag Manager
Гайды

Как пользоваться Google Tag Manager

Зачем нужна система управления тегами, как установить и настроить GTM
Михаил Шумовский
Михаил Шумовский
26 июля, 2023
19317
Как пользоваться Гугл Тег Менеджмером и самостоятельно установить GTM
Форма регистрации
Что такое Google Tag Manager Как установить Google Tag Manager Как работать с интерфейсом Google Tag Manager Как использовать поиск Как работать с разделом «Обзор» Как работать с разделом «Переменные» Как работать с разделом «Папки» Как работать с разделом «Шаблоны» Как работать с разделом «Администрирование»

Со статьей помог Александр Наене, веб-аналитик в Unisender.

Необязательно нанимать программиста или вебмастера, чтобы встроить в сайт различные счетчики аналитики, JS-коды или трекеры. Это можно сделать самостоятельно и без знания кода. При этом быстро и бесплатно — с помощью сервиса Google Tag Manager. 

В статье рассказываем, что такое Google Tag Manager и зачем его использовать, разбираемся в интерфейсе и объясняем, как работать с различными разделами.

Что такое Google Tag Manager

Google Tag Manager (GTM) — это система управления тегами (фрагментами JavaScript-кода), которая помогает добавлять в сайт сторонние коды вроде пикселей соцсетей или систем аналитики.

Зачем использовать Google Tag Manager

Благодаря GTM можно настраивать и публиковать теги прямо в интерфейсе без привлечения программистов. То есть, чтобы отслеживать, сколько людей кликнули на контактную форму или нажали на кнопку «зарегистрироваться», не придется нанимать специалиста и прописывать отдельный код. Можно будет взять готовый код из GTM и сразу вставить его в сайт.

GTM используют для создания разных тегов:

  • кодов отслеживания поисковых систем;
  • кодов ремаркетинга контекстной рекламы;
  • отслеживания просмотров определенных страниц или контента;
  • нажатия каких-либо кнопок;
  • отправки форм;
  • отслеживания переходов по внешним и внутренним ссылкам.

С помощью GTM за несколько минут можно добавить в сайт коды отслеживания Google Analytics и Яндекс.Метрики. После этого можно отслеживать визиты и действия посетителей в обоих системах аналитики: даже не придется настраивать их по отдельности.

Пример. Цветочный онлайн-магазин хочет настроить рекламу через Яндекс.Директ и отслеживать статистику по кликам на форму заказа через Google Analytics: он проще в использовании и дает больше информации о пользователях.

Вставлять вручную два кода отслеживания в сайт сложно и неудобно, проще воспользоваться Google Tag Manager: сначала интегрировать GTM в сайт, а уже потом внутри инструмента добавлять все необходимые сервисы аналитики.

Как установить Google Tag Manager

Переходим по ссылке и нажимаем «Создать аккаунт». В открывшемся окне пишем название аккаунта и наше местоположение.

(GTM — сервис из экосистемы Google. Поэтому для его использования обязательно требуется почта на Gmail.)

Название для аккаунта можно выбрать любое, а страну на всякий случай лучше указать какую-нибудь соседнюю с РФ
Название для аккаунта можно выбрать любое, а страну на всякий случай лучше указать какую-нибудь соседнюю с РФ

Дальше прописываем название контейнера и выбираем целевую платформу, для которой будем работать с тегами.

Контейнер — это совокупность всех параметров, которые настроены для определенного сайта или приложения. Фактически это главный код, который встраивается в сайт и дает возможность запускать коды других сервисов.

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

Всего есть 5 платформ:

  • сайт;
  • iOS;
  • Android;
  • Server;
  • AMP — страницы, которые быстро загружаются и удобны для просмотра на мобильных устройствах.

В нашем случае выбираем сайт. (На практике с другими платформами редко работают, поэтому останавливаться не будем.)

Создание контейнера в GTM

После этого нажимаем на кнопку «Создать» в левом нижнем углу. Появится окошко, в котором нужно согласиться с правилами GTM. После этого вы увидите 2 кода — сначала понадобится фрагмент для раздела <head>.

Код для установки GTM

Когда скопировали фрагмент, открывайте редактор кода нужного сайта. Это можно сделать в панели хостинга, а можно в специальных редакторах кода по типу Notepad++ или Visual Studio Code. 

Код нужно вставить как можно ближе к тегу <head>. Так мы сможете отследить даже тех пользователей, которые закрыли сайт до его полной загрузки.

После этого нужно скопировать вторую часть кода и вставить ее после тега <body>. Это нужно для того, чтобы собирать более полную статистику о действиях пользователя на сайте.

CMS или конструктор сайта
Создаём сайт: что выбрать — CMS или конструктор

Если вы работаете с сайтом на CMS, то GTM будет проще добавить через плагин. Так не придется копаться в коде — можно будет установить готовое расширение в панели управления CMS. Подробно останавливаться на установке не будем, объясню кратко: переходите в CMS (например, WordPress), в магазине плагинов пишете Google Tag Manager и устанавливаете плагин. Лучше выбирать тот, у которого больше отзывов: это значит, что он проверенный и реально работает.

Поиск плагинов GTM

После этого возвращаетесь в GTM и копируете ID контейнера (начинается с GTM), который написан на верхней панели.

ID контейнера GTM

Вновь переходите к настройкам плагина, находите строку Google Tag Manager ID. Обычно она находится в разделе «General». И вставляете код.

Как работать с интерфейсом Google Tag Manager

Всего в интерфейсе 6 разделов и 3 вкладки. Обсудим каждый подробно, но сначала разберемся в основных терминах. Так будет проще понять, о чем идет речь.

Основные термины GTM

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

Тег — фрагмент JavaScript-кода, который помогает отслеживать трафик и поведение посетителей, анализировать эффективность рекламы и настраивать ремаркетинг. По сути, это те коды, которые размещаются в сайте. Например, пиксель соцсетей или счетчики систем коллтрекинга. К каждому тегу подключается триггер.

Триггер — какое-то определенное событие, которое запускает или блокирует тег. По сути, это правило, по которому срабатывают теги. Например, триггером может быть загрузка страницы или клик по кнопке. 

Переменная — параметр, для которого передается значение. Переменная — это дополнительное условие для триггеров, а для тегов — дополнительная информация. Например: Click URL (текст URL ссылки, по которой кликнул пользователь) или Click Text (текст элемента, по которому кликнул пользователь — например, по кнопке).

Теперь разберемся, как работать с интерфейсом.

Как использовать поиск

Допустим, есть магазин, который представлен в 10 городах страны, у каждого свой сайт. Владелец бизнеса сделал 1 GTM контейнер, 10 папок, по 1 для каждого из сайтов. Поиск позволяет находить нужное среди всех элементов, разложенных по папкам.

Поиск в GTM

Как работать с разделом «Обзор»

Здесь есть несколько подразделов:

  • новый тег;
  • описание;
  • редактирование;
  • изменения.

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

Главное в этом разделе — изменения. Если в течении рабочего дня мы меняем 5-10 элементов, но не публикуем их, то тут мы увидим все изменения, и к ним будет легко вернуться. Не нужно запоминать, что и как мы изменили.

Настраивать сами теги и триггеры можно в подразделе «Новый тег».

Раздел Обзор GTM

Новый тег

На этой вкладке можно настроить существующий тег, а можно — настроить триггер, который этот тег будет активировать.

Придумывать свой тег необязательно, его можно выбрать из готовой библиотеки. В ней есть теги для Google Analytics, Google Ads, других платформ и соцсетей, например, Twitter, LinkedIn, Pinterest.

Или добавить свой собственный тег через HTML. Так можно добавить код из Яндекс.Метрики, пиксель Facebook* или ВКонтакте. Подробнее о том, как это сделать технически — в справке Google.

Мы разберемся, как подключать теги на примере Google Analytics 4 (потому что Universal Analytics перестает работать с 1 июля 2023 года). Для этого кликаем на «Конфигурация тега» и выбираем «Google Аналитика: конфигурация GA4».

Выбор GA4

Теперь нужно открыть GA4 в отдельной вкладке, зайти в панель администратора → «Потоки данных» → «Ваш сайт».

Потоки данных GA4

Здесь нужно скопировать идентификатор потока данных.

ID потока данных для GTM

И вернуться с ним в GTM.

Настройка тега GA4
Вставляем код в «Идентификатор потока данных»

Следующий этап — настроить триггеры. Они делятся на три типа: 

  • All Pages;
  • Consent Initialization;
  • Initialization.

Фактически они работают на основе одного и того же события — загрузки страницы. Отличаются только критерии того, когда триггер должен сработать.

Кроме того, триггеры «Consent Initialization» и «Initialization» в СНГ практически не используются, так как заточены под Европу и США. Поэтому мы выбираем All Pages. Он срабатывает, когда веб-браузер начинает загружать страницу.

Кроме стандартных, есть и другие триггеры, их можно добавить через плюс в правом верхнем углу экрана. 

Добавление триггера GTM

Там есть триггеры для просмотра страниц, кликов, взаимодействия пользователя с сайтом и другие. Если перечислять все, придется писать отдельную статью, поэтому проще прочитать о них в справке Google.

После того, как выбрали тег и триггер, нужно нажать на «Сохранить» в правом верхнем углу экрана.

Сохранение настроек тега GTM

Теги и триггеры настроены. Теперь можно отслеживать, сколько людей просматривают страницу.

Сначала настроенные теги можно проверить в режиме предпросмотра. По сути, это будет тестовая версия сайта, доступная только вам до закрытия браузера. (Посетители смогут увидеть ее только после публикации изменений, о чем мы поговорим дальше.)

Чтобы создать такую тестовую версию, сначала нужно установить расширение Google Tag Assistant и подключить сайт — без этого ничего не получится.

Google Tag Assistant

После этого можно публиковать созданный контейнер и открыть сайт. В его правом нижнем углу будет такая плашка:

Плашка Google Tag Assistant

В окошке видно, как все работает на сайте. Если теги и триггеры настроены корректно и Google Tag Assistant ни на что не ругается, можно выгружать сайт с тегом в открытый доступ.

Разделы «Теги» и «Триггеры» пропускаем, потому что из дополнительного функционала там можно только проверять и изменять существующие триггеры и теги. В плане создания ничего не отличается от раздела «Обзор».

Как работать с разделом «Переменные»

В целом переменные нужны для того, чтобы:

  • Хранить информацию, используемую при определении триггера.
  • Передавать различные данные в тег. Например, стоимость продукции или ID аккаунта Google Analytics. При этом источником информации могут быть DataLayer, переменные JavaScript, cookies или HTML-объекты.
  • Связи с триггерами. От них зависит, когда будет запускаться какой-то из тегов. Например, триггер «Просмотр страницы» сработает в том случае, если переменная «Page URL» равна значению site.ru. Другой вариант — при выборе триггера «Инициализация согласия» вы можете активировать триггер после согласия на сбор куков.

Переменные делятся на встроенные и пользовательские.

Встроенные переменные

Есть в GTM изначально и их нельзя изменить. Обычно часть из них неактивна. Чтобы включить их или отключить, нужно нажать на «Настроить» в разделе «Переменные». А затем — поставить чекбокс напротив нужной из переменной.

Настройка переменных GTM

В GTM есть 9 категорий встроенных переменных, но чаще работают со страницами.

Пример работы с переменными. Допустим, у цветочного онлайн-магазина есть основной сайт flowers.happy.ru, а есть личный кабинет по адресу flowers.happy.account.ru. Нам не нужно, чтобы аналитика работала на flowers.happy.account.ru, поэтому понадобится тег, в котором будут ограничение: из-за него аналитика не будет срабатывать на странице со словом account в домене.

Для этого создается новый триггер с типом page_view (просмотр страницы) → some page view (некоторые просмотры страниц) → добавляется активация  page URL → добавляется переменная doesn’t contains (не содержит) → прописывается адрес домена, по которому не нужно собирать статистику.

использовать созданный триггер

После этого нужно перейти к тегам и использовать созданный триггер.

Подробнее об остальных категориях можно узнать из справки Google.

Пользовательские переменные

Фактически это свои собственные переменные. Чтобы их создать, нужно перейти в раздел «Переменные» и нажать кнопку «Создать».

Как пользоваться Google Tag Manager 18

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

  • навигация;
  • переменные страницы;
  • элементы страницы;
  • утилиты;
  • данные контейнера.

Подробнее о том, что означает каждая из категорий, можете читайте в в справке Google.

Как работать с разделом «Папки»

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

По проектам. Создайте папку для каждого микросайта или рекламной кампании.

По командам. Создайте папку для каждого агентства, с которым вы работаете.

По типам тегов. Создайте одну папку для Google Аналитики, другую — для Google Рекламы, третью — для тегов сторонних поставщиков, четвертую — для пользовательских тегов HTML и так далее.

Как работать с разделом «Шаблоны»

Раздел появился совсем недавно и работать с ним стоит только специалистам: иначе можно запутаться и только потерять время. 

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

Агентство может создать 5 тег-шаблонов для всех проектов и предоставить их своим внутренним специалистам и клиентам. В итоге все смогут пользоваться отлаженными шаблонами и не тратить время на настройку пикселей.

По сути, шаблоны — это готовые решения для добавления тегов. Они полезны в нескольких случаях:

  • Когда нужно сэкономить время специалиста. Например, можно создать один шаблон тега и затем использовать его на разных аккаунтах. 
  • Когда есть большая команда и нужно делегировать задачи. Так можно передать паттерны для отслеживания другим сотрудникам.

В GTM есть два вида шаблонов: готовые и кастомные. Готовые можно брать из галереи, их очень много, есть даже для Яндекс.Метрики. Кроме того, готовые шаблоны можно редактировать под свои нужды. Это удобно, когда нужно настроить какой-то новый тег или переменную, но как это сделать — непонятно. Можно взять готовый вариант из библиотеки и адаптировать его под нужды своего сайта.

Также в GTM можно создать свой шаблон с нуля: написать код, добавить скрипты и все протестировать. Подробнее о том, как работать с собственными шаблонами, — в справке Google.

Как работать с разделом «Администрирование»

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

Здесь же можно настраивать ресурс:

  • работать с контейнерами: настраивать, смотреть аналитику, выгружать и так далее;
  • настраивать уведомления по электронной почте;
  • настраивать среды: тестировать изменения, внесенные в контейнер, перед их публикацией на сайте;
  • анализировать охват тега: проверять, где добавлен ваш тег и определять страницы, на которых не собираются данные.
Эксклюзивы — читайте только в блоге Unisender
Как прогревать клиентов в B2G через рассылки 21 млн ₽ за 9 месяцев в B2B-продажах с помощью рассылок Почему текст — не главное в работе копирайтера Ищете фрилансера, но боитесь ошибок? Как нанимать фрилансеров и самозанятых

СВЕЖИЕ СТАТЬИ

«Архитектурные излишества»: как личный блог об архитектуре стал топовым нишевым медиа
25.03.2025
Как определить CMS сайта: 5 способов
25.03.2025
Как организовать и провести вебинар
25.03.2025
Чек
25.03.2025
Черный лебедь
24.03.2025
Диплинк
23.03.2025