Общий тег событий в Google Tag Manager

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

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

Получается, что под каждое событие на сайте мы создаем свой собственный тег Google Аналитика - Universal Analytics с типом отслеживания Событие. А чем больше у нас тегов, тем сложнее становится управлять аккаунтом GTM.

Для упрощения работы с контейнером можно воспользоваться универсальным способом отслеживания событий с помощью конструкции dataLayer (уровень данных), используя общий синтаксис:

, где:

• 'event': 'mainEvent' - неизменное название для наших событий (может быть другим);
• 'category': 'eventCategory' - категория события (может быть другим);
• 'action': 'eventAction' - действие события (может быть другим);
• 'label': 'eventLabel' - ярлык события (может быть другим);
• 'value' : 'eventValue' - ценность события (может быть другим).

Подробнее о том, что из себя представляют 4 компонента (категория, действие, ярлык, ценность) события, читайте в статье про события Google Analytics.

Код такого вида ваш разработчик должен добавить на все элементы, которые вы хотите отслеживать. Причем 4 переменных будут иметь для каждого отслеживаемого элемента на сайте свои значения. К примеру, давайте настроим общий тег для сайта graphanalytics.ru на отслеживание клика по 3 кнопкам:

1. Консультация;
2. Заказать рекламу;
3. Скачать книгу.

Примечание: ярлык события и ценность события являются необязательными полями, поэтому их можно не назначать. Но поскольку переменные уровня данных связаны вместе с моделью данных GTM, рекомендуется все же помечать как undefined поля, которые вы не используете. Об этом подробно описано в статье Симо Ахавы (Simo Ahava).

Для моего примера коды на кнопках будут выглядеть так (событие onclick, клик):

Пример кода для зеленой кнопки Консультация:

Примечательно, что для одной кнопки я указал значения ярлыка и ценности, а для другой оставил их не присвоенными (undefined). Я это сделал осознанно, чтобы показать разницу. Аналогичный код и для третьей кнопки СКАЧАТЬ, только в категории и действии написаны другие значения:

Событие 'event' для всех кнопок одинаковое - mainEvent. Название этого события нам пригодится в дальнейшем при настройке триггера активации.

Все вышеописанное касается работы разработчика. Теперь настало наше время. Для того, чтобы извлечь информацию из уровня данных, нам необходимо создать 4 пользовательских переменных типа Переменная уровня данных с соответствующими названиями: category, action, label, value (с такими же именами, как указано в коде).

Повторяем с оставшимися 3 переменными. В результате получаем 4 пользовательские переменные:

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

На последнем шаге создается один тег типа Google Аналитика - Universal Analytics с типом отслеживания Событие, где в качестве 4 компонентов используются наши переменные уровня данных (см. выше). А триггер активации - пользовательское событие mainEvent.

Сохраняем настройки. Все, что осталось сделать, это проверить корректность отслеживания наших событий. Для этого включаем режим предварительного просмотра GTM и отчеты В режиме реального времени в Google Analytics. Кликаем поочередно по 3 кнопкам, которые отслеживаем.

При клике на отслеживаемый элемент событие mainEvent и тег Google Аналитики срабатывает для всех 3 кнопок. А если перейти на вкладку Data Layer с наведенным событием mainEvent, то можно увидеть, какая информация передается на уровне данных. Для кнопки СКАЧАТЬ - это:

category, action, label, value - то, что прописывал разработчик в коде кнопке. В Google Analytics информация также корректно передалась:

Таким образом, для отслеживания трех кнопок нам понадобилось всего 4 переменных, 1 триггер и 1 тег. А в обычной настройке, скорее всего, мы бы воспользовались 3 отдельными триггерами и 3 тегами. А если бы у нас было 10 кнопок? Все равно достаточно 4 переменных, 1 триггера и 1 тега. Через некоторое время все данные по событиям появятся в отчете Поведение — События — Лучшие события.

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