Google Tag Manager: Как отправить пользовательское событие в Analytics
Руководство по настройке Google Tag Manager для передачи кастомных событий в Google Analytics на примере нажатия на кнопку.
Шаги
Что нам нужно сделать для отслеживания (передачи в Google Analytics, далее GA) любых кастомных событий с помощью Google Tag Manager (далее GTM):
- Подключить на сайте скрипт gtm.js с настроенным Тегом Universal Analytics;
- Настроить проброс/передачу событий от GTM к GA через dataLayer:
- Добавить 4 переменных "Уровня данных" (gaEventCategory, gaEventAction, gaEventLabel, gaEventValue);
- Добавить триггер для проброса приходящего в GTM события в GA.
- Создать тег который будет отвечать за саму передачу события в GA.
- Отправить dataLayer событие при определенном действии пользователя;
- Смотрим статистику событий в панели Google Analytics.
Поехали!
1. Подключить GTM к GA
В интернетах по этой теме уже исписано.
2. Настроить передачу событий от GTM к GA через dataLayer
Примечание
Все действия выполняем в админке GTM вкладка "Рабочая область" (Workspace) вашего Контейнера.
2.1 Создать переменные уровня данных
Открываем панель Переменные » Пользовательские переменные.
Создаем 4 пользовательские "Переменные уровня данных":
- gaEventCategory - объект с которым взаимодействует пользователя (Banner, Video, Product, Audio, Post, ..);
- gaEventAction - действие пользователя с объектом (Click, Play, Download, Like, ..);
- gaEventLabel - ярлык (название видеозаписи, название или id товара, название баннера, заголовок поста)
- gaEventValue - перевод не "значение", а "значимость", "ценность"! Это целое число, значимости события.
Названия переменных вы можете сократить или изменить. Я посчитал уместным использовать префикс gaEvent.
2.2 Создаем триггер для передачи события
Создаем триггер для проксирования dataLayer события в Google Analytics. Я назвал событие "Proxy Event to GA".
Открываем панель Триггеры » Создать, тип события "Пользовательское событие", имя "proxyEventToGa" (можете заменить на другое).
2.3 Тег для передачи события
Создаем Тег "GA Event Sender" с типом "Universal Analytics". Задаем UID код аналитики, выбираем "Тип отслеживания": "Событие", в качестве значений блока "Параметры отслеживания событий" указываем созданные ранее переменные: {{gaEventCategory}} и т.д., выбираем триггер "Proxy Event to GA". Сохраняем.
Примечание
Опция "Non interaction" (Не взаимодействие) с опцией "False" - не позволит событиям влиять на "Показатель отказов".
3. Отправить dataLayer событие
Пример кнопки по которой будет отправляться событие в GA:
<button onclick="dataLayer.push({'event': 'proxyEventToGa', 'gaEventCategory': 'Product', 'gaEventAction': 'Add to favorite', 'gaEventLabel': 'LED лампа диодная', 'gaEventValue': 1 })">
Добавить в избранное
</button>
Внимание!
Еще раз, запомните, что параметр gaEventValue - это целое число, не строка! Это значение характеризует Ценность события. Гугл в некоторых документах переводит название параметра как значение события, но более точно это параметр звучит как значимость события. Подробнее в справке гугл - https://support.google.com/analytics/answer/1033068?hl=ru
4. Смотрим статистику событий в панели Google Analytics
Пользовательские события доступны в админке GA в нескольких экранах:
- В режиме реального времени » События - мгновенное отображение событий;
- Поведение » События » Лучшие события - обновление с задержкой в несколько минут. Отображает "ценность" событий.
Параметры события используются для группировки событий в отчетах. Вы можете задавать значения параметров так, как вам нужно.
Рефакторинг
Если провести небольшой рефакторинг и вынести отправку события в аналитикс в отдельный метод - мы не плохо сэкономим и будем иметь дополнительный слой абстракции, если захотим переименовать переменные:
<script>
window.gtmManager = {
sendGaEvent: function(category, action, label, valueInt) {
var dlParams = {
'event': 'proxyEventToGa',
'gaEventCategory': category,
'gaEventAction': action,
'gaEventLabel': label,
'gaEventValue': valueInt
};
dataLayer.push(dlParams);
}
};
</script>
<button onclick="gtmManager.sendGaEvent('Product', 'Add to favorite', 'LED лампа диодная', 1)">
Добавить в избранное
</button>
Мы сократили код трекинга вдвое. Вместо глобального объекта window, стоит использовать выделенный вами scope, это для наглядности.
#gtm send event to analytics, #google tag manager send ga event, #gtm отправить событие в аналитикс