Отслеживание клик ссылка

Передача событий с использованием data layer

/

Исходник → https://osipenkov.ru/datalayer/

С помощью уровня данных можно передавать пользовательские события. Давайте разберем простой пример – передать данные в Google Analytics с помощью метода push () по клику на кнопке одной из форм.

Кнопка на одной из форм

Если бы вы не использовали GTM в своей работе, а только Google Analytics (код отслеживания Global Site Tag), и библиотеку gtag.js, то конструкция в коде страницы выглядела бы так:

Пример кода реализации конструкцией из Google Analytics

Событие onclick возникает при щелчке левой кнопкой мыши на элементе, к которому добавлен атрибут onclick. Таким образом, когда пользователь нажимает на кнопку «Весь перечень», срабатывает событие, которое передает два обязательных условия (Категория event_category и Действие event_action) в Google Analytics, тем самым фиксируя цель.

Но когда Google Analytics установлен через GTM, так отслеживать события уже не получится. И поможет нам в этом уровень данных. Данные о событии мы можем передать сначала в dataLayer, а только оттуда — в Analytics.

Добавляем уровень данных к нашему элементу:

Добавление dataLayer.push () к элементу

где ‘event’: ‘UAevent’ – пользовательское событие, а eventCategory и eventAction – все те же обязательные условия.

Крайне важно: следите за символами кавычек. Копирование из разных мест (из чужих блогов и сайтов) и кодировок недопустимо.

Используйте одинаковые кавычки

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

Переходим к настройкам в интерфейсе Google Tag Manager. Нам необходимо создать:

  1. две переменных уровня данных (eventCategory и eventAction);
  2. триггер «Пользовательское событие» со значением UAevent;
  3. тег для передачи данных в Google Analytics с типом отслеживания «Событие» и триггером активации UAevent;
  4. цель в Google Analytics типа «Событие» со значениями категорий/действий = click/knopka соответсвенно.

В GTM на основании передаваемых с помощью dataLayer данных можно создавать переменные и триггеры. Создадим их:

Переходим в «Переменные» — «Создать пользовательскую переменную». Выбираем из категории «Переменные страницы» — «Переменная уровня данных». Задаем значение eventCategory и такое же имя. Сохраняем.

Переменная уровня данных

Аналогично создаем вторую переменную уровня данных, только с именем eventAction. Далее создаем триггер типа «Пользовательское событие» с тем именем, которое указали в коде страницы у кнопки. В нашем случае – это UAevent. Вводим название и сохраняем триггер.

Пользовательское событие

Теперь создаем тег типа «Universal Analytics» с настройками:

  • Тип отслеживания – Событие
  • Категория – {{eventCategory}}
  • Действие – {{eventAction}}
  • Идентификатор отслеживания – наш код отслеживания Google Analytics (можно создать переменную типа «Константа» и добавить туда идентификатор UA)
  • Триггер активации – Пользовательское событие «Клик по кнопке».

Настройки тега

На последнем шаге переходим в Google Analytics и создаем цель «Событие» с условиями (те, которые указаны в коде страницы сайта):

  • Категория – click
  • Действие — knopka

Настройка события в Google Analytics

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

Событие UAevent в режиме отладки GTM

А с помощью отчетов «В режиме реального времени» в Google Analytics вы можете убедиться в корректности ее настройки и передачи данных.

Отладка события в «Режиме реального времени»

Чтобы проверить, что передается в dataLayer, можно воспользоваться консолью в панели инструментов разработчика (в Google Chrome – F12). Вводим dataLayer и нажимаем клавишу «Enter».

Console – dataLayer – Enter

Как мы уже знаем, Google Tag Manager по умолчанию передает на уровень данных набор значений gtm.js (когда GTM готов к работе), gtm.dom (когда готова модель DOM) и gtm.load (когда окно полностью загружено). Последнее по счету событие UAevent  – это наш клик по кнопке.

Использование уровня данных полезно при отслеживании отправки форм, данных по e-commerce, динамического ремаркетинга, функции User ID и других событий на сайте.

от  Комментарии к записи Передача событий с использованием data layer отключены