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

Теги в 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 и Пользовательское изображение.Типы тегов в GTM

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

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

      1. Что такое теги в Google Tag Manager и зачем они нужны
      2. Тег Google Analytics — Universal  Analytics
      3. Тег Google Optimize
      4. Тег Hotjar Tracking Code
      5. Custom HTML тег
      6. Custom Image тег
      7. Расширенные настройки при создании тегов

      Перед тем как мы начнем, небольшая вступительная часть о том, что такое теги. Если вы это уже знаете, например, со статьи об основах диспетчера тегов 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 Manager. Расширенное руководство.

Тег Google Analytics — Universal  Analytics

      Шаблон тега для настройки Google Analytics является одним из самых популярных и часто используемых. Количество настроек в нем просто зашкаливает. Среди них и выбор типов отслеживания, и дополнительные поля для настройки, пользовательские параметры и показатели, электронная торговля и группы контента, настройка междоменного отслеживания и многое другое. В этом небольшом обзоре мы разберем два основных типа отслеживания: просмотр страницы и событие.Типы отслеживания в теге Google Analytics - Universal Analytics

Тип отслеживания — Просмотр страницы

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

      Для отправки данных с помощью этого типа тега необходимо всего лишь выбрать переменную с настройками Google Analytics.

Тип отслеживания — Событие

      Для События количество полей (параметров) немногим больше, а именно:

      • Категория — здесь указываем общую черту группы событий, например, для отслеживания взаимодействия с видео можем использовать значение Video Tracking.
      • Действие — основное действие, которое сделал пользователь. Например, для видео это может быть Play или Pause; для отслеживания форм — Submit (отправка формы) или Change (начало заполнения формы), а для отслеживания скроллинга — процент скролла.
      • Ярлык — дополнительная информация, которую вы хотите передать. Например, для видео это может быть название видеоролика, который посмотрел пользователь, для отслеживания форм — название формы, а для скроллинга — страница, на которой было совершено это действие.
      • Ценность — ценность принесенная бизнесу и выраженная в денежном эквиваленте. Если какое-то событие несет бизнесу ценность — мы можем передавать ее в это поле и потом использовать значение в отчетах Google Analytics. Про это поле важно знать два нюанса: во-первых, ценность которую вы передадите, можно использовать при настройки цели. Во-вторых, поскольку это поле принимает любое числовое значение, иногда в него передают не только ценность в деньгах, но и, например, время, как это сделал Андрей Осипов в своей статье.
      • Не взаимодействие — значение в этом поле позволяет определить, будет ли событие влиять на показатель отказов или нет. Из-за отрицания в своем названии этот параметр очень часто вызывает путаницу. Если вы укажите в нем False, то по правилам двойного отрицания такое событие будет являться взаимодействием пользователя и соответственно оно будет влиять на показатель отказов. Если же указать True, то такое событие никак не будет влиять на показатель отказов.Событие в теге типа Google Analytics - Universal Analytics

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

Тег Hotjar Tracking Code

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

Настройка тега Hotjar Tracking Code в GTM

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

Тег Google Optimize

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

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

Custom HTML тег

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

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

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

Custom Image тег

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

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

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

      В поле 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.

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

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

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

  • Приоритет активации тегов — параметр определяет порядок запуска тегов. Можно указать как положительное, так и отрицательное значение. Тег с большим значением будет срабатывать раньше. Например, тег с приоритетом 100 сработает раньше чем теги с приоритетом 50 и -2. По умолчанию приоритет тега равен 0. В любом случае не стоит забывать, что теги будут срабатывать асинхронно.
  • Включить специальное расписание активации тега — настройка позволяет включить тег на выбранный промежуток времени. При этом, обязательно указать оба значения: и дату старта, и дату окончания. Например, вы можете запускать определенные теги только в период перед Новым годом:Cпециальное расписание активации тега
  • Активировать этот тег только в опубликованных контейнерах — запрещает тегу срабатывать в тестовых средах, таких как режим предварительного просмотра.
  • Настройки активации тега — позволяют настроить количество срабатываний тега на странице:
    1. Безлимитно — тег будет срабатывать при каждом выполнении события указанного в триггере.
    2. Один раз на событие — тег сработает один раз для каждого события. Например, один раз для события клик и один раз для события клика по ссылке.
    3. Один раз на страницу — независимо от количества событий тег сработает только один раз на страницу.Настройка активации тега
  • Порядок активации тега — позволяет запускать другие теги перед или после активации текущего. Вы также можете блокировать загрузку тега, если предыдущий не был выполнен успешно. Данный пункт является примером необычного способа запуска тегов и заслуживает отдельного разбора в одной из следующих статей.Порядок активации тега

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

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