Рубрики
Статьи

Как отслеживать JavaScript события в Google Analytics через Tag Manager

Когда у нас был простой и уютненький Google Analytics, мы отслеживали события, просто выполняя одну строчку JavaScript кода:

ga('send','event','button','pressed');

Но Google, чтобы упростить нам жизнь, придумал Tag Manager. И когда Analytics установлен через GTM, так отслеживать JavaScript события уже не получится. У нас появилась еще одна прослойка GTM, которая называется dataLayer. И данные о событии мы можем передать сначала в dataLayer, а только оттуда — в Analytics.

В каких случаях это нужно?

Если вам нужно отслеживать клики по ссылкам, нажатия на кнопки или обычные отправки формы, это реализуется стандартными методами Tag Manager.

Но если форма отправляется каким-нибудь самописным скриптом, либо нужно отслеживать сложное событие вроде установки маркера на карте в определенном радиусе, приходится отправлять событие прямо из JavaScript кода. И здесь возникает вопрос, как это сделать, т.к. стандартный ga(‘send’, ‘event’, …) уже не работает.

Что же делать?

Есть 2 метода: простой и сложный (для тех, кто хочет разобраться подробнее, что же такое dataLayer и как через него передавать данные).

Простой состоит в том, чтобы просто задать пустое имя трекера в настройках тега Universal Analytics. Вот так:

Имя трекера Analytics в GTM

Это все. Серьезно 🙂

Сложное же решение состоит из 2 пунктов:

  1. «Пробросить» событие через dataLayer GTM в Google Analytics
  2. Немного видоизменить код отправки события

Как «пробросить» событие через GTM в Google Analytics

1. Создаем 4 переменных уровня данных в Tag Manager:

  • eventCategory
  • eventAction
  • eventLabel
  • eventValue
Заходим в раздел создания переменных в GTM
Заходим в раздел создания переменных в GTM
Создаем 4 переменных уровня данных
Создаем 4 переменных уровня данных

2. Создаем триггер (пользовательское событие), по которому мы будем отправлять событие в Google Analytics

Создаем пользовательское событие с произвольным условием активации. К примеру, "event-to-ga".
Создаем пользовательское событие с произвольным условием активации. К примеру, «event-to-ga».

3. Создаем само событие, которое будет отправляться в Analytics. Используем в качестве category, action, label и value созданные нами переменные. Активируем событие по созданному нами триггеру (пользовательскому событию).

Создаем тег Google Analytics типа "событие".
Создаем тег Google Analytics типа «событие».
Продолжаем настройку тега. Задаем в качестве параметров события наши переменные. Настраиваем активацию тега по нашему триггеру.
Продолжаем настройку тега. Задаем в качестве параметров события наши переменные. Настраиваем активацию тега по нашему триггеру.

Если не хотите, чтобы эти события влияли на показатель отказов, выставьте «Не взаимодействие» («Non interaction») в значение «true».

Публикуйте ваш контейнер. Поздравляю, теперь события будут «пробрасываться» через GTM в Google Analytics.

Как будет выглядеть код отслеживания события

Теперь вместо

ga(‘send’,’event’,’category_value’,’action_value’,’label_value’,’value_value’);

Используем

dataLayer.push({‘event’: ‘event-to-ga‘, ‘eventCategory’ : ‘category_value’, ‘eventAction’ : ‘action_value’, ‘eventLabel’ : ‘label_value’, ‘eventValue’ : ‘value_value’ });

event-to-ga‘ — параметр из нашего триггера (подчеркнут на скриншоте).

Обязательные параметры только:

  • eventCategory
  • eventAction

Остальные параметры передавайте по необходимости.

Вот и все. Теперь вы можете отправлять события с помощью JavaScript в Google Analytics как и раньше, лишь немного изменив код отправки события.

Если есть вопросы, идеи, замечания или предложения, пишите их в комментариях.

Автор: Алексей Ярошенко

Data Scientist / ML Engineer. Раньше занимался интернет-маркетингом и учил людей контексту. Сертифицированный тренер Google в Беларуси.

Добавить комментарий

Ваш адрес email не будет опубликован.

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.