Теги в Google Tag Manager. Руководство для новичков и не только

На момент написания статьи в Google Tag Manager существует 76 типов тегов. Из них 74 - это различные предустановленные шаблоны, например, Google Analytics - Universal  Analytics, Google Ads Remarketing, Google Optimize, Hotjar Tracking Code, Google Ads Calls from Website Conversion. Есть также 2 пользовательских типа тегов - Пользовательский  HTML и Пользовательское изображение.

Такое разнообразие сложно описать в одной статье, да и не нужно, ведь на практике я еще не встречал ни одну компанию, в которой бы они все использовались одновременно.

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

• Что такое теги в Google Tag Manager и зачем они нужны
• Google Tag
• Тег Hotjar Tracking Code
• Тег Google Optimize
• Custom HTML тег
• Custom Image тег
• Расширенные настройки при создании тегов

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

Что такое теги в Google Tag Manager и зачем они нужны

Как я уже писал в предыдущей статье, теги - это фрагменты кода, которые вы хотите установить себе на сайт. Для большинства таких фрагментов существуют свои заготовленные шаблоны, особенно это касается сервисов Google. Например, для установки на сайт Google Analytics вам необходимо использовать тип тега (шаблон) Google Analytics - Universal  Analytics, а для установки Google Optimize существует свой соответствующий тег. Это также касается и не гугловских сервисов, например, есть шаблоны тегов Quora Pixel и Twitter Universal Website Tag.

Если же вам не удалось найти нужный сервис, вы всегда можете использовать пользовательские типы, такие как Custom HTML и Custom Image, которые позволяют выполнять на сайте любые фрагменты кода. Примером такого сервиса является Facebook. Читайте детально об установке кода Facebook Pixel на сайт. 

Какое бы разнообразие тегов не существовало в Google Tag Manager, процесс настройки всегда можно разделить на три основных этапа:

• Настройка основных параметров тега;
• Расширенные настройки (при необходимости);
• Добавление триггера.

Работу с первым этапом мы разберем на примере каждого тега отдельно. Второй этап одинаков, независимо от выбранного типа тега, и его мы разберем в последней части статьи. Что касается последнего этапа, то триггер - это условие, когда наш тег должен срабатывать. Более детально читайте об этом в следующей статье - Триггеры в Google Tag Manager. Расширенное руководство.

Google Tag

Шаблон тега для настройки Google Analytics 4 является одним из самых популярных и часто используемых. Этот тег называется Google Tag и отвечает за установку базового кода Google Analytics 4 на сайт.

Тег Hotjar Tracking Code

Тепловые карты кликов и скроллинга содержат множество интересной информации о взаимодействии пользователей с вашим сайтом. Один из сервисов, который предоставляет такую информацию -  Hotjar. Для его установки в GTM существует специальный шаблон, в который нужно ввести только идентификатор сервиса. Более подробно об установке Hotjar можно почитать в соответствующей статье - Установка основных систем аналитики с помощью Google Tag Manager.

Как видите, работа с шаблонами тегов в GTM очень проста. Давайте разберем еще несколько.

Тег Google Optimize

Собрав и проанализировав различную информацию, собранную с помощью Google Analytics, Hotjar и других систем аналитики, вы возможно захотите заняться оптимизацией конверсии. Основной способ этого достичь - провести A/B тестирование. Например, через Google Optimize.

Базовая настройка этого тега содержит всего два параметра. В первом указываем идентификатор контейнера, во втором - переменную с настройками Google Analytics.

Custom HTML тег

Надеюсь, вы заметили, что работать с шаблонами одно удовольствие: никакого программирования и всего несколько полей для заполнения. Существуют случаи, когда шаблонов не достаточно, тогда на помощь приходят специальные типы тегов.

Тип тега Пользовательский HTML позволяет нам установить на сайт любой JavaScript код. Все что нужно - это прописать его в поле HTML.

Помимо этого поля в теге существует всего одна основная настройка: поле Поддержка document.write. Во времена плохого интернета, этот метод позволял отображать текст вместо элемента страницы до тех пор, пока нужный элемент не загрузится. Позже его начали использовать также для подгрузки различных скриптов. С 54 версии Google Chrome начал ограничивать подгрузку скриптов таким образом. Да и в целом использование данного метода не очень хорошо сказывается на производительности сайта, поэтому лучше избегайте его использования.

Custom Image тег

Если нет нужного шаблона тега - мы используем тип Пользовательский HTML. Но что делать, если нам нужно запустить скрипт, а в браузере отключен JS? В таком случае мы используем тип Пользовательское изображение. Этот тип тега работает благодаря второй части кода GTM, которую вы размещаете в <body>:

Именно эта часть позволят GTM отправлять данные даже когда JS недоступен. Схожая часть есть у большинства систем аналитики. Вот так это выглядит в коде Facebook:

При установке Facebook Pixel данный фрагмент кода необходимо добавлять именно в тег типа Пользовательское изображение:

В поле URL изображения указываете адрес изображения со всеми нужными параметрами. Например, для передачи данных о просмотре страницы в Facebook URL будет следующим:

https://www.facebook.com/tr?id=226645594772463&ev=PageView&noscript=1.

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

https://www.facebook.com/tr?id=226645594772463&ev=PageView&noscript=1&gtmcb=12345678.

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

Расширенные настройки при создании тегов

Расширенные настройки не зависят от типа тега и позволяют задать дополнительные условия выполнения:

• Tag firing priority — Параметр определяет порядок срабатывания тегов. Можно указать как положительное, так и отрицательное значение. Тег с большим значением сработает раньше. Например, тег с приоритетом 100 сработает раньше, чем теги с приоритетом 50 и -2. По умолчанию приоритет тега равен 0. Важно помнить, что теги срабатывают асинхронно.
• Only fire this tag in published containers — Запрещает тегу срабатывать в тестовых средах, таких как режим предварительного просмотра.
• Enable custom tag firing schedule — Настройка позволяет активировать тег только в выбранный промежуток времени. При этом обязательно нужно указать и дату начала, и дату окончания. Например, вы можете запускать определённые теги только в период перед Новым годом.

Параметры срабатывания тега — позволяют настроить количество срабатываний тега на странице:

• Unlimited — тег будет срабатывать при каждом выполнении события, указанного в триггере.
• Once per event — тег сработает один раз для каждого типа события. Например, один раз для события «клик» и один раз для события «клик по ссылке».
• Once per page — вне зависимости от количества событий, тег сработает только один раз на странице.

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

Вместо заключения

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