Почему страница на русском?
Этот блог начинался давно, когда писать материалы на английском языке для меня было сложно, и для достижения большей аудитории он велся на русском. Но с началом полномасштабного вторжения в феврале 2022 года я решил прекратить писать на этом языке. Моя страна переживает тяжелые времена, но мы с верой смотрим в будущее, и я больше не хочу поддерживать использование русского языка для новых материалов. Те статьи, что уже есть, остаются на сайте как часть истории блога, напоминая о предыдущих этапах его развития.Як і Україна, цей блог продовжує активно зростати та зміцнюватись без використання російської мови, незважаючи на всі випробування, і впевнено рухається до майбутнього 💙💛
пт, 31 мая 2019 г.
Работа с пользовательскими событиями в Google Tag Manager. Тег автособытия
Google Tag Manager позволяет отследить огромное количество событий, происходящих на странице, с помощью стандартных триггеров, но в некоторых случаях их недостаточно. Тогда на помощь приходит передача пользовательских событий и соответствующий триггер для их отслеживания. Благодаря им можно отследить любые действия пользователя: от добавления товара в корзину до нажатия определенной клавиши на клавиатуре.
Примечание! Информация ниже описывает всего один небольшой аспект работы триггеров. На самом деле их работа сложнее.
Каждый из триггеров ждёт, когда в dataLayer переместится информация о соответствующем событии. Если вы проводили отладку настройки тегов, то скорее всего замечали эту информацию в отладчике:
При этом каждый триггер ожидает какое-то свое событие. Например:
- 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
Отдельным блоком при работе с триггером пользовательского события является настройка тега автособытия. Плюс этого подхода в том, что информацию о всех пользовательских событиях и их свойствах, вы передаете по заранее подготовленному шаблону. Это значительно уменьшает количество тегов, да и триггеров тоже. Принцип работы очень прост:
- Настраиваем переменные Уровня данных для хранения нужной информации;
- Создаем триггер пользовательского события;
- Создаем тег передачи автособытия в Google Analytics;
- Настраиваем тег для передачи информации на уровень данных.
Настраиваем переменные Уровня данных для хранения нужной информации
Нам понадобится четыре переменных для хранения информации о:
- категории события:
- действии события:
- ярлыке события:
- значении параметра Не взаимодействие:
Создаем триггер пользовательского события
Следующим шагом создаем триггер для нашего пользовательского события. Название события 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.
Осталось написать обработчики к интересующим нас событиям и настройка готова. На скриншоте ниже вы видите реализацию отслеживания взаимодействия с формой при помощи автособытия. Конечно же, перечень отслеживаемых действий может быть значительно больше.
Вместо заключения
Триггер пользовательского события - один из основных при настройке отслеживания с помощью диспетчера тегов. На нем строится огромное количество кастомных решений. И если вы действительно хотите использовать тег менеджер в полную силу, обязательно научитесь понимать принципы его работы.
Вопросы, которые у вас остались, смело задавайте в комментариях.
Вебаналитик, Маркетолог