Со статьей помог Александр Наене, веб-аналитик в Unisender.
Необязательно нанимать программиста или вебмастера, чтобы встроить в сайт различные счетчики аналитики, JS-коды или трекеры. Это можно сделать самостоятельно и без знания кода. При этом быстро и бесплатно — с помощью сервиса Google Tag Manager.
В статье рассказываем, что такое Google Tag Manager и зачем его использовать, разбираемся в интерфейсе и объясняем, как работать с различными разделами.
Google Tag Manager (GTM) — это система управления тегами (фрагментами JavaScript-кода), которая помогает добавлять в сайт сторонние коды вроде пикселей соцсетей или систем аналитики.
Благодаря GTM можно настраивать и публиковать теги прямо в интерфейсе без привлечения программистов. То есть, чтобы отслеживать, сколько людей кликнули на контактную форму или нажали на кнопку «зарегистрироваться», не придется нанимать специалиста и прописывать отдельный код. Можно будет взять готовый код из GTM и сразу вставить его в сайт.
GTM используют для создания разных тегов:
С помощью GTM за несколько минут можно добавить в сайт коды отслеживания Google Analytics и Яндекс.Метрики. После этого можно отслеживать визиты и действия посетителей в обоих системах аналитики: даже не придется настраивать их по отдельности.
Переходим по ссылке и нажимаем «Создать аккаунт». В открывшемся окне пишем название аккаунта и наше местоположение.
(GTM — сервис из экосистемы Google. Поэтому для его использования обязательно требуется почта на Gmail.)
Дальше прописываем название контейнера и выбираем целевую платформу, для которой будем работать с тегами.
Всего есть 5 платформ:
В нашем случае выбираем сайт. (На практике с другими платформами редко работают, поэтому останавливаться не будем.)
После этого нажимаем на кнопку «Создать» в левом нижнем углу. Появится окошко, в котором нужно согласиться с правилами GTM. После этого вы увидите 2 кода — сначала понадобится фрагмент для раздела <head>.
Когда скопировали фрагмент, открывайте редактор кода нужного сайта. Это можно сделать в панели хостинга, а можно в специальных редакторах кода по типу Notepad++ или Visual Studio Code.
Код нужно вставить как можно ближе к тегу <head>. Так мы сможете отследить даже тех пользователей, которые закрыли сайт до его полной загрузки.
После этого нужно скопировать вторую часть кода и вставить ее после тега <body>. Это нужно для того, чтобы собирать более полную статистику о действиях пользователя на сайте.
Если вы работаете с сайтом на CMS, то GTM будет проще добавить через плагин. Так не придется копаться в коде — можно будет установить готовое расширение в панели управления CMS. Подробно останавливаться на установке не будем, объясню кратко: переходите в CMS (например, WordPress), в магазине плагинов пишете Google Tag Manager и устанавливаете плагин. Лучше выбирать тот, у которого больше отзывов: это значит, что он проверенный и реально работает.
После этого возвращаетесь в GTM и копируете ID контейнера (начинается с GTM), который написан на верхней панели.
Вновь переходите к настройкам плагина, находите строку Google Tag Manager ID. Обычно она находится в разделе «General». И вставляете код.
Всего в интерфейсе 6 разделов и 3 вкладки. Обсудим каждый подробно, но сначала разберемся в основных терминах. Так будет проще понять, о чем идет речь.
Контейнер — оболочка для хранения всех тегов вашего сайта или мобильного приложения. По сути, контейнер — основной код, который добавляется на сайт и отвечает за запуск тегов сторонних сервисов.
Тег — фрагмент JavaScript-кода, который помогает отслеживать трафик и поведение посетителей, анализировать эффективность рекламы и настраивать ремаркетинг. По сути, это те коды, которые размещаются в сайте. Например, пиксель соцсетей или счетчики систем коллтрекинга. К каждому тегу подключается триггер.
Триггер — какое-то определенное событие, которое запускает или блокирует тег. По сути, это правило, по которому срабатывают теги. Например, триггером может быть загрузка страницы или клик по кнопке.
Переменная — параметр, для которого передается значение. Переменная — это дополнительное условие для триггеров, а для тегов — дополнительная информация. Например: Click URL (текст URL ссылки, по которой кликнул пользователь) или Click Text (текст элемента, по которому кликнул пользователь — например, по кнопке).
Теперь разберемся, как работать с интерфейсом.
Допустим, есть магазин, который представлен в 10 городах страны, у каждого свой сайт. Владелец бизнеса сделал 1 GTM контейнер, 10 папок, по 1 для каждого из сайтов. Поиск позволяет находить нужное среди всех элементов, разложенных по папкам.
Здесь есть несколько подразделов:
«Описание», «Редактирование» и «Изменения» помогают быстрее ориентироваться в созданных тегах, триггерах и настраивать рабочие области.
Настраивать сами теги и триггеры можно в подразделе «Новый тег».
На этой вкладке можно настроить существующий тег, а можно — настроить триггер, который этот тег будет активировать.
Придумывать свой тег необязательно, его можно выбрать из готовой библиотеки. В ней есть теги для Google Analytics, Google Ads, других платформ и соцсетей, например, Twitter, LinkedIn, Pinterest.
Или добавить свой собственный тег через HTML. Так можно добавить код из Яндекс.Метрики, пиксель Facebook* или ВКонтакте. Подробнее о том, как это сделать технически — в справке Google.
Мы разберемся, как подключать теги на примере Google Analytics 4 (потому что Universal Analytics перестает работать с 1 июля 2023 года). Для этого кликаем на «Конфигурация тега» и выбираем «Google Аналитика: конфигурация GA4».
Теперь нужно открыть GA4 в отдельной вкладке, зайти в панель администратора → «Потоки данных» → «Ваш сайт».
Здесь нужно скопировать идентификатор потока данных.
И вернуться с ним в GTM.
Следующий этап — настроить триггеры. Они делятся на три типа:
Фактически они работают на основе одного и того же события — загрузки страницы. Отличаются только критерии того, когда триггер должен сработать.
Кроме стандартных, есть и другие триггеры, их можно добавить через плюс в правом верхнем углу экрана.
Там есть триггеры для просмотра страниц, кликов, взаимодействия пользователя с сайтом и другие. Если перечислять все, придется писать отдельную статью, поэтому проще прочитать о них в справке Google.
После того, как выбрали тег и триггер, нужно нажать на «Сохранить» в правом верхнем углу экрана.
Теги и триггеры настроены. Теперь можно отслеживать, сколько людей просматривают страницу.
Сначала настроенные теги можно проверить в режиме предпросмотра. По сути, это будет тестовая версия сайта, доступная только вам до закрытия браузера. (Посетители смогут увидеть ее только после публикации изменений, о чем мы поговорим дальше.)
Чтобы создать такую тестовую версию, сначала нужно установить расширение Google Tag Assistant и подключить сайт — без этого ничего не получится.
После этого можно публиковать созданный контейнер и открыть сайт. В его правом нижнем углу будет такая плашка:
В окошке видно, как все работает на сайте. Если теги и триггеры настроены корректно и Google Tag Assistant ни на что не ругается, можно выгружать сайт с тегом в открытый доступ.
В целом переменные нужны для того, чтобы:
Переменные делятся на встроенные и пользовательские.
Есть в 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.
Фактически это свои собственные переменные. Чтобы их создать, нужно перейти в раздел «Переменные» и нажать кнопку «Создать».
Создать собственную переменную можно для 5 категорий из предложенных:
Подробнее о том, что означает каждая из категорий, можете читайте в в справке Google.
Папки это хранилище для всех тегов, триггеров и переменных. Если вы отслеживаете много событий на сайте, легко запутаться, а с помощью папок все можно систематизировать:
По проектам. Создайте папку для каждого микросайта или рекламной кампании.
По командам. Создайте папку для каждого агентства, с которым вы работаете.
По типам тегов. Создайте одну папку для Google Аналитики, другую — для Google Рекламы, третью — для тегов сторонних поставщиков, четвертую — для пользовательских тегов HTML и так далее.
По сути, шаблоны — это готовые решения для добавления тегов. Они полезны в нескольких случаях:
В GTM есть два вида шаблонов: готовые и кастомные. Готовые можно брать из галереи, их очень много, есть даже для Яндекс.Метрики. Кроме того, готовые шаблоны можно редактировать под свои нужды. Это удобно, когда нужно настроить какой-то новый тег или переменную, но как это сделать — непонятно. Можно взять готовый вариант из библиотеки и адаптировать его под нужды своего сайта.
Также в GTM можно создать свой шаблон с нуля: написать код, добавить скрипты и все протестировать. Подробнее о том, как работать с собственными шаблонами, — в справке Google.
В разделе «Администратор» можно создавать и настраивать существующие аккаунты и контейнеры. Изменять доступы и подключать других сотрудников к работе с разными контейнерами. При этом права можно выдавать на уровне аккаунта GTM или на уровне конкретного контейнера.
Здесь же можно настраивать ресурс:
Делимся новостями и свежими статьями, рассказываем о новинках сервиса
Искренние письма о работе и жизни. Свежие статьи из блога. Эксклюзивные кейсы и интервью с экспертами диджитала.
