Google Tag Manager: Как отправить пользовательское событие в Analytics

Категория: Аналитика

Руководство по настройке Google Tag Manager для передачи кастомных событий в Google Analytics на примере нажатия на кнопку.

Шаги

Что нам нужно сделать для отслеживания (передачи в Google Analytics, далее GA) любых кастомных событий с помощью Google Tag Manager (далее GTM):

  1. Подключить на сайте скрипт gtm.js с настроенным Тегом Universal Analytics;
  2. Настроить проброс/передачу событий от GTM к GA через dataLayer:
    1. Добавить 4 переменных "Уровня данных" (gaEventCategory, gaEventAction, gaEventLabel, gaEventValue);
    2. Добавить триггер для проброса приходящего в GTM события в GA.
    3. Создать тег который будет отвечать за саму передачу события в GA.
  3. Отправить dataLayer событие при определенном действии пользователя;
  4. Смотрим статистику событий в панели Google Analytics.

Поехали!

1. Подключить GTM к GA

В интернетах по этой теме уже исписано.

2. Настроить передачу событий от GTM к GA через dataLayer

Примечание

Все действия выполняем в админке GTM вкладка "Рабочая область" (Workspace) вашего Контейнера.

2.1 Создать переменные уровня данных

Открываем панель Переменные » Пользовательские переменные.

Создаем 4 пользовательские "Переменные уровня данных":

  1. gaEventCategory - объект с которым взаимодействует пользователя (Banner, Video, Product, Audio, Post, ..);
  2. gaEventAction - действие пользователя с объектом (Click, Play, Download, Like, ..);
  3. gaEventLabel - ярлык (название видеозаписи,  название или id товара, название баннера, заголовок поста)
  4. 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 отправить событие в аналитикс