Работа с пользовательскими событиями в Google Tag Manager. Тег автособытия

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

Как работает триггер пользовательского события
Передача данных о пользовательском событии в dataLayer
- Пишем ТЗ программисту
- Передаем самостоятельно с помощью тега типа Пользовательский HTML
Тег автособытия

Перед тем как мы начнем, давайте разберем как работают встроенные триггеры основных событий.

Примечание! Информация ниже описывает всего один небольшой аспект работы триггеров. На самом деле их работа сложнее.

Каждый из триггеров ждёт, когда в dataLayer переместится информация о соответствующем событии. Если вы проводили отладку настройки тегов, то скорее всего замечали эту информацию в отладчике:

При этом каждый триггер ожидает какое-то свое событие. Например:

1. - DOM Ready ожидает появления события gtm.dom;
  - Element Visibility — события gtm.elementVisibility;
  - а Just Links — события gtm.linkClick.

Поскольку каждый из предустановленных триггеров ожидает какое-то свое событие, то для всех остальных и используется триггер Пользовательского события.

Как работает триггер пользовательского события

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

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

Ну и стандартная возможность Активировать триггер только при определенных условиях.

Передача данных о пользовательском событии в dataLayer

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

Каким бы путем вы не пошли, рекомендую предварительно ознакомиться с базовыми принципами работы с dataLayer и уровнем данных.

Пишем ТЗ программисту

Для передачи данных о пользовательском событии используйте следующий фрагмент кода:

<script>

   window.dataLayer = window.dataLayer || [];

   window.dataLayer.push({ 'event' : 'YOUR_CUSTOM_EVENT_NAME'});

</script>

Где вместо YOUR_CUSTOM_EVENT_NAME укажите название события. Момент, когда вы будете передавать данные, вы определяете самостоятельно и дополнительно описываете программисту. Например, отправлять эти данные в момент успешной отправки формы.

Передаем самостоятельно с помощью тега типа Пользовательский HTML

Если вы хотите передать информацию о совершении какого-то события через GTM, то лучше всего для этой цели подойдет тег типа Пользовательский HTML. Фрагмент кода для передачи будет аналогичным предыдущему. Не забудьте только выбрать правильный триггер.

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

Тег автособытия в Google Tag Manager

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

1. - Настраиваем переменные Уровня данных для хранения нужной информации;
  - Создаем триггер пользовательского события;
  - Создаем тег передачи автособытия в Google Analytics;
  - Настраиваем тег для передачи информации на уровень данных.

Настраиваем переменные Уровня данных для хранения нужной информации

Нам понадобится четыре переменных для хранения информации о:

1. - категории события:
  - действии события:
  - ярлыке события:
  - значении параметра Не взаимодействие:

Создаем триггер пользовательского события

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

Создаем тег передачи автособытия в Google Analytics

Нам понадобится тег типа Google Analytics — Universal Analytics со следующими настройками:

Настраиваем тег для передачи информации на уровень данных

Осталось только правильно передавать данные на уровень данных. Все остальное за нас сделает тег автособытия. Структура кода для передачи следующая:

<script>
       dataLayer.push ({
                        'event':'autoEvent',
                        'eventCategory':'Value1',
                        'eventAction':'Value2',
                        'eventLabel':'Value3',
                        'eventNonInteraction':'Value4'
                        })
</script>

Где вместо Value1, Value2 и Value3 можно передавать любое значение, а вместо Value4 одно из двух логических — true/false.

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

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

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

Вопросы, которые у вас остались, смело задавайте в комментариях.