Для владельцев сайтов, аналитиков, маркетологов не секрет, как важно отслеживать, как ведут себя на ресурсе пользователи. В этих целях используют коды аналитики, пиксели рекламы и другие инструменты.
Раньше мониторинговые инструменты приходилось добавлять в код каждой страницы вручную. Это было некомфортно, отнимало массу времени и требовало хотя бы минимальных скиллов программирования. Однако сегодня есть удобное решение – Google Tag Manager.
Что такое Google Tag Manager и зачем он нужен
Google Tag Manager – это бесплатный онлайн-сервис от Google, который позволяет управлять скриптами (тегами) на сайте без необходимости вносить изменения в код вручную. Это интерфейс, функционал которого предусматривает возможность добавлять, редактировать и отключать коды отслеживания, рекламные пиксели и другие инструменты – и всё это без привлечения программистов.
Этот инструмент поможет маркетологам, которые хотят самостоятельно интегрировать на площадку сервисы аналитики и рекламы. Окажется он полезным и для веб-аналитиков, желающих выстроить точные и гибкие системы отслеживания KPI. Рекламным агентствам GTM поможет ускорить работу с клиентами.
Задачи, которые решает Google Tag Manager
Инструмент позволяет добавлять:
- счетчики посещаемости: Google Analytics, Яндекс Метрика и др.;
- пиксели ретаргетинга и ремаркетинга: TikTok, VK;
- мониторинг кликов, форм, скроллинга, видео – вообще любых действий юзера;
- микроразметку.
Перечисленные возможности делают GTM незаменимым инструментом для тех, кто занимается анализом сайтов.
Преимущества GTM
Google Tag Manager – это удобный инструмент, который предлагает ряд весомых преимуществ:
- Доступность и простота. В интерфейсе GTM сможет разобраться и интегрировать необходимый тег даже новичок.
- Безопасность. Тегами управляет интерфейс Google. Это значит, что при работе с GTM нет риска «положить» площадку.
- Версии на выбор. Любое обновление можно при необходимости отменить и вернуться к более удобному формату. Это возможно благодаря тому, что GTM сохраняет все версии настроек, которые когда-либо создавались пользователем.
- Масштабируемость. В одном аккаунте может храниться большое количество контейнеров (папок с тегами). Это удобно для специалистов, которые управляют множеством проектов.
Google Tag Manager: как установить на сайт
Установка GTM не требует особой технической подготовки и отнимает совсем немного времени. Главное, чтобы у вас был Google-аккаунт и доступ к редактированию кода сайта или панели управления CMS.
Для начала стоит зайти на официальный ресурс и нажать кнопку «Создать аккаунт». Затем появится специальная форма, где нужно будет указать имя профиля, страну, название контейнера, который станет связующим компонентом между сайтом и менеджером тегов. Следующий шаг – выбор типа платформы (веб-сайт).
После создания контейнера система предложит два фрагмента кода: один нужно будет вставить в раздел
, второй – сразу после тега . Первый нужен, чтобы отследить тех юзеров, которые ушли с сайта, еще когда он не до конца прогрузился. Второй отвечает за более расширенный функционал отслеживания.Место, куда нужно вставить коды – HTML-файлы вашей площадки. Если вы работаете с CMS, например WordPress, все можно упростить с помощью плагина. Достаточно установить специальное расширение и интегрировать ID контейнера.
Если по какой-то причине вы закрыли окно с кодами, ничего страшного. В правом верхнем углу интерфейса GTM всегда отображается ваш уникальный идентификатор контейнера, клик по которому вновь откроет нужную инструкцию с кодом.
Вставив коды, внесите изменения на сайт и удостоверьтесь, что проблем с загрузкой страницы нет. На этом этапе установка завершается.
Как настроить Google Tag Manager
После установки GTM важно разобраться, как функционирует его структура. Она состоит из четырех элементов – контейнеры, теги, триггеры и переменные.
Контейнер – это то самое хранилище, где содержатся настройки для конкретного сайта или приложения. Один контейнер включает информацию только по одному проекту – все нужные теги: для аналитики, ремаркетинга, отслеживания событий и так далее.
Тег – это фрагмент кода, который активируется на сайте при заранее заданных условиях. Например, тег может посылать данные о просмотре страницы в Google Analytics или фиксировать, когда посетитель нажал на кнопку.
Триггер – это правило, которое обусловливает срабатывание тега. Именно триггер идентифицирует, когда необходим запуск того или иного кода. «Импульсом» к запуску фрагмента может стать загрузка страницы, клик по элементу, отправка формы или даже задержка по времени.
Переменная – это дополнительная информация, которая уточняет условие срабатывания триггера или помогает передать данные в тег. Например, переменная Click URL указывает, по какому линку кликнул пользователь, а Page Path – какую страницу он открыл.
Первичная настройка
Чтобы протестировать, как работает сервис, можно начать с подключения Google Analytics.
Для этого необходимо:
- Создать соответствующий тег.
- Ввести индикатор отслеживания.
- Указать триггер, например, тег должен срабатывать при каждом просмотре страницы (All Pages).
- Сохранить настройки.
- Перейти в режим предпросмотра и проверить, активируется ли заданный тег на самом сайте.
- Опубликовать изменения, если все работает корректно.
Таким образом вы завершаете базовую настройку. Теперь можно давать GTM более сложные задачи.
Как настроить цели в Google Tag Manager
Цели – это конкретные действия, которых вы ждете от посетителя сайта. Например, вы хотите, чтобы он перешел на определенную страницу, заполнил форму, просмотрел видео. Цели позволяют понять, насколько эффективен сайт и что мешает или помогает пользователю выполнить целевое действие.
В Google Tag Manager настроить цели несложно. Разберем алгоритм на примере.
Мониторинг кликов
Например, вам нужно узнать, сколько человек кликает по кнопке «Купить». Для этого понадобится:
- Перейти в GTM и включить встроенные переменные – такие как Click URL, Click Text и Click Classes. Это делается в разделе «Переменные», где достаточно задать интересующие параметры.
- Создать новый триггер с типом «Только ссылки» или «Все элементы» – в зависимости от структуры кнопки, например, Click Text содержит «Купить».
- Предложить тег с типом «Google Аналитика: Событие». В этом теге нужно указать категорию события, действие и ярлык – например, категория: «Кнопка», действие: «Клик», ярлык: «Купить».
Когда посетитель сайта нажмет на кнопку, сработает триггер, активируется тег, после чего информация отправится в Google Analytics. Так вы сможете отследить, какие разделы сайта работают лучше и на каком этапе вы теряете пользователей. Как видите, в Google Tag Manager настройка целей – это несложное действие. Отличаются только теги и триггеры.
Использование триггеров в Google Tag Manager
В Google Tag Manager триггеры – это одновременно сердце и мозг этого «организма». Без срабатывания триггера никакой код не активируется, а значит, система не сработает. Именно поэтому важно понимать, как триггеры функционируют.
Типы триггеров
GTM предлагает несколько типов событий, которые могут стать триггерами:
- просмотр страницы: запускается, когда загружается определенная страница;
- клики: позволяют отследить, по каким кликабельным элементам нажимают посетители сайта;
- отправка формы: нужен, чтобы мониторить заявки, регистрации;
- глубина прокрутки: фиксирует, насколько далеко продвинулся пользователь в изучении страницы – ушел, прочитав пару абзацев, осилил 50 % или долистал до футера;
- таймер: помогает активировать тег спустя какое-то время, после того как пользователь открыл страницу;
- видимость элемента: срабатывает, когда посетитель сайта доходит до конкретного блока на странице;
- изменение истории: активируется, если без перезагрузки страницы изменяется адресная строка, – полезно для SPA-сайтов;
- ошибка JavaScript: указывает на критические сбои на ресурсе;
- пользовательские события: отслеживает действие, которое не вписывается в стандартные события вроде заполнения формы или клика.
Каждый тип триггера настраивается через понятный интерфейс. Например, чтобы отследить клик по кнопке с текстом «Заказать», достаточно выбрать тип триггера «Клик», затем «Некоторые клики по ссылкам» и задать условие: переменная Click Text содержит «Заказать».
Как связать триггер с тегом
После создания триггера его нужно привязать к соответствующему тегу. Делается это в процессе создания или редактирования тега – в нижней части формы выбирается нужный триггер из списка. Один триггер можно распространить на несколько тегов.
Например, вы хотите, чтобы при клике по кнопке одновременно отправлялись события в Google Analytics и пиксель ВКонтакте. В этом случае создаются два тега (для каждой платформы) и один общий триггер. При его срабатывании активируются оба тега.
Комбинация триггеров
В некоторых случаях веб-аналитикам нужны более сложные алгоритмы. Например, вы хотите зафиксировать не просто клик по линку, а нажатие, после которого посетитель провел на странице более 15 секунд. Для этого следует применить группу триггеров – специальный тип, который срабатывает при выполнении всех заданных условий.
Такой подход позволяет лучше отстраивать сценарии мониторинга и получать по-настоящему релевантные данные.
Google Tag Manager: электронная коммерция
Google Tag Manager оказывается особенно полезным, когда речь идет об интернет-магазинах и проектах с e-commerce. Здесь важно отслеживать не только посещения, но и поведение пользователя: что он просматривал, какие товары добавлял в «Корзину», где прервал покупку и наконец – завершил ли транзакцию.
Для интернет-магазинов предусмотрена расширенная электронная торговля (Enhanced Ecommerce) – специальный модуль, встроенный в Google Analytics. GTM позволяет удобно подключить и настроить его, не внося вручную изменения в шаблоны сайта.
С помощью GTM вы сможете отследить:
- просмотры карточек товара;
- добавление в «Корзину» или удаление из нее;
- начало оформления заказа;
- завершение покупки;
- промоакции, клики по баннерам, использование купонов;
- отказ от заказа и возврат.
Эти данные помогают оценивать воронку продаж, поведение клиентов и точки, в которых посетители сайта принимают решение не совершать покупку.
Проверка и отладка работы GTM
Не следует публиковать изменения сразу после настройки тегов. Лучше сначала воспользоваться кнопкой «Предварительный просмотр». Она запускает сайт в деморежиме с возможностью отредактировать заданные параметры. Панель отладки, появляющаяся внизу страницы, показывает:
- какие теги сработали, когда страница загрузилась;
- какие никак не среагировали на действие и почему;
- какие переменные работают в момент срабатывания;
- какие были зафиксированы события: прокрутка, форма и др.
Google Tag Assistant
Чтобы теги и триггеры работали без сбоев, лучше установить специальное расширение для браузера – Google Tag Assistant. Оно упрощает подключение, показывает, какие теги и трекеры работают на сайте, помогает отлаживать теги Google Analytics, Ads и другие.
Если что-то установлено некорректно, расширение даст знать и об этом, например, если вы нарушили алгоритм загрузки скриптов.
Проверка передачи данных
Убедившись, что все настроено правильно, проверьте, что данные действительно доходят до нужной платформы, например в Google Analytics. Если событие успешно передано, то при открытии Google Analytics в соответствующей вкладке вы найдете информацию о нем. Также ответ вам может подсказать консоль браузера (F12). Проверьте dataLayer, чтобы убедиться, что нужные объекты туда попадают.
Кроме того, можно проверить сетевые запросы. Вам нужна вкладка Network. Этот способ особенно актуален для проверки пикселей социальных сетей.
Публикация контейнера
Если проверка прошла успешно, можете публиковать изменения. Обязательно дайте понятное имя для новой версии, чтобы, если в будущем захотите вернуться, вы могли это сделать.
Частые ошибки при работе с GTM и как их избежать
Неправильное размещение кода контейнера
Классическая ошибка – вставить код GTM не туда. Многие размещают оба фрагмента кода либо только в
, либо только в . Но, по инструкции Google, первая часть обязательно должна идти в , а вторая – сразу после открытия тега . Только так обеспечивается полная загрузка и корректная работа всех функций. Чтобы избежать этой ошибки, всегда используйте официальную инструкцию при установке. Если работаете с CMS, лучше использовать проверенные плагины.Игнорирование предпросмотра
Иногда в спешке изменения публикуются без предварительной проверки. В результате можно активировать тег, который работает некорректно или вообще не запускается. Чтобы не столкнуться с этой проблемой, всегда тестируйте работу GTM, прежде чем публиковать изменения.
Отсутствие активации встроенных переменных
Некоторые переменные по умолчанию неактивны. Вы настроили триггер на Click URL, но он не срабатывает – и неясно почему. Причина проста: переменная в интерфейсе не активирована.
Заключение
Google Tag Manager – это платформа, которая значительно упрощает работу маркетологов и веб-аналитиков. С ее помощью вы не просто отследите, что делают пользователи на вашем сайте, но и лучше поймете их поведение. Стройте логичную структуру с понятной группировкой тегов и названиями, всегда тестируйте изменения, перед тем как их публиковать – и GTM станет отличным помощником в работе с аналитикой.
