Отслеживание событий в GTM

Newser

Moderator
Команда форума
Регистрация
5 Фев 2019
Сообщения
294
Селекторы — один из фундаментальных механизмов CSS и важная составляющая при работе с диспетчером тегов Google, поскольку благодаря им мы можем создавать различные условия активации и извлекать нужную для переменных, триггеров и тегов информацию. Селекторы определяют то, к каким элементам будут применены стили. У каждого HTML-элемента может быть N-ое количество селекторов, которое определяет его на странице.

Подписывайся на наш Телеграм канал и паблик ВК и узнавай первым о новых событиях!

Существуют различные виды селекторов:
  • селектор тегов (в качестве селектора выступает имя тега);
  • универсальный селектор (применяется для изменения необходимых свойств всех элементов на странице и обозначается символом *);
  • классы (применяются для элементов с атрибутом class и обозначаются именем, которое следует за точкой .)
  • идентификаторы (применяются для элементов с атрибутом id, должны быть уникальными и обозначаются именем, которое следует за знаком решетки #);
  • псевдо-селекторы (псевдо-классы и псевдо-элементы);
  • селекторы атрибутов (позволяют стилизовать элемент не только по значению тега, но и по значению атрибута);
  • контекстные селекторы (стилизация элементов, находящихся внутри другого элемента);
  • дочерние селекторы (стилизация элемента, расположенного сразу за другим элементом и являющегося его прямым потомком);
  • соседние селекторы (предназначены для стилизации соседних элементов, у которых общий родитель);
  • родственные селекторы (схожи с соседними селекторами, но стилизуются все соседние элементы, а не только первый соседний элемент).
Многое из этого с примерами разобрано в статье, посвященной CSS-селекторам. Я также написал еще несколько материалов по селекторам, с которыми рекомендую ознакомиться для большего понимания данной темы.
В HTML5 для любого элемента можно использовать собственные атрибуты, начинающиеся с префикса data-, так называемые атрибуты данных.

Отслеживание событий в GTM с помощью data-* атрибутов
Пример data-атрибута для HTML-элемента (graphanalytics.ru)

Они позволяют хранить информацию, связанную с различными DOM-элементами, которая может помочь в работе скриптов, а также для оформления элементов через CSS. Для пользователей она может быть несущественной, а для разработчиков и веб-аналитиков упрощает жизнь.

Может произойти такое, что в процессе работы над сайтом разработчик поменяет идентификатор или класс элемента, и забудет оповестить об этом веб-аналитика. А привязывшись к данным селекторам, мы рискуем потерять часть данных, поскольку собьется настройка и все условия активации в GTM. Дата-атрибуты, как правило, не меняются при обновлении и служат гарантом корректного отслеживания. Но опять же, не всегда … 😉

data-атрибуты всегда начинаются с приставки data- и заканчиваются чем-то более понятным для того, кто его создавал и использует. В имени могут содержаться латинские буквы в нижнем регистре, цифры и символы дефис (-), двоеточие :)), подчеркивание (_). В моем примере выше (на скриншоте) у кнопки Весь перечень есть data-атрибут с именем data-tariff и значением Веб-аналитика.

Элемент может содержать в себе любое количество дата-атрибутов. Например, data-tariff (тариф), data-price (цена) и data-id (идентификатор услуги):

1<a href="#web-analytics" data-tariff="Веб-аналитика" data-price="10000" data-id="1" class="purchase-btn tariff-order fancybox ">Весь перечень</a>

В data-атрибуте могут храниться любые данные с типом string (строка) или которые можно перекодировать в строку. Преобразования типов выполяются в JavaScript. data-атрибуты в CSS можно использовать для стилизации элементов с помощью селекторов атрибутов.

Примечание: поисковые роботы не индексируют данные, содержащиеся в data-атрибутах.

Имена атрибутов трансформируются в переменные, к которым затем можно обращаться и получать значения, по следующим правилам:
  • data- удаляется;
  • любой дефис, идущий перед буквой удаляется, а буква за ним становится заглавной (стиль camelCase);
  • любые другие буквы остаются неизменными.
Например, атрибут data-my-personal-tariff преобразуется в переменную myPersonalTariff.

Чтение (извлечение) data-атрибутов


Осуществляется с помощью:
  • метода getAttribute ();
  • jQuery и функции attr ();
  • объекта dataset.
Давайте разберем более подробно. В качестве примера я буду использовать тестовый проект graphanalytics.ru, на котором некоторые HTML-элементы имеют дата-атрибуты (см. скриншот выше). Для этого нам понадобится консоль разработчика (F12 — в Google Chrome, вкладка Console).

Пример получения всех элементов, которые присутствуют на странице с атрибутом data-tariff:

1document.querySelectorAll('[data-tariff]');

В консоли разработчика нам вернуться все элементы с этим атрибутом:

Отслеживание событий в GTM с помощью data-* атрибутов
Все элементы с атрибутом data-tariff

В jQuery можно использовать такое написание, команда эквивалентна вызову document.querySelectorAll():

1$$('[data-tariff]');
Пример получения конкретного элемента с определенным значением атрибута data-tariff:

1document.querySelector('[data-tariff="Веб-аналитика"]');
В консоли разработчика возвращается только один элемент со значением Веб-аналитика:
Отслеживание событий в GTM с помощью data-* атрибутов
Элемент с определенным значением атрибута data-tariff

В jQuery можно использовать такое написание:

1$$('[data-tariff="Веб-аналитика"]');
Пример получения значения из data-атрибута с помощью метода getAttribute для первого элемента:

1
2
3
var myTariff = document.getElementsByClassName ('purchase-btn');
var tariff = myTariff[0].getAttribute('data-tariff');
tariff
Сначала с помощью переменной myTariff и команды document.getElementsByClassName возвращается значение всех элементов по имени класса purchase-btn. Затем с помощью переменной tariff получаем из атрибута data-tariff по 0 элементу значение Веб-аналитика.

Отслеживание событий в GTM с помощью data-* атрибутов
Пример метода getAttribute в консоли разработчика

Для 0 элемента — Веб-аналитика, для 1 элемента — Контекстная реклама, для 2 элемента — Консультация. В Google Tag Manager мы могли бы создать пользовательскую переменную типа Собственный код JavaScript и добавить туда такую конструкцию:

Отслеживание событий в GTM с помощью data-* атрибутов
Пример метода getAttribute в GTM

Чтобы извлечь значение атрибута с помощью jQuery и функции attr (), можно воспользоваться следующей конструкцией (для моего примера!):

1$('.purchase-btn').eq(0).attr('data-tariff');
, где метод .eq(0) — выбирает элемент с конкретным индексом (у меня 0) из набора выбранных элементов, чтобы получить значение Веб-аналитика.
Можно в jQuery использовать и такую команду (метод .data):

1$('.purchase-btn').eq(0).data('tariff')
Но есть и более простой способ чтения data-атрибутов, который мы будем использовать в Google Tag Manager. Для этого используется объект dataset. Чтобы получить data-атрибут, необходимо взять свойство объекта dataset и написать его с учетом правил, о которых я написал выше (без префикса data-, без дефисов и с помощью стиля camelCase).

Подробнее о свойстве dataset читайте в документации Mozilla.

Я покажу пример отслеживания клика по кнопке Весь перечень. Событие будет передаваться стандартным способом со значением дата-атрибута (тарифа) в инструменты веб-аналитики с помощью соответствующих тегов. Для этого необходимо создать пользовательскую переменную типа Переменная уровня данных со значением, которое соответствует конструкции gtm.element.dataset.{имя атрибута по правилам с помощью стиля camelCase}.

В результате из data-tariff в GTM я получу переменную gtm.element.dataset.tariff:

Отслеживание событий в GTM с помощью data-* атрибутов
Переменная уровня данных gtm.element.dataset.tariff

Далее следует создать триггер типа Клики — Все элементы с условием активации — Некоторые клики — Click Element — соответствует селектору CSS — [data-tariff], [data-tariff] *

Отслеживание событий в GTM с помощью data-* атрибутов
Триггер активации по дата-атрибуту

Звездочка означает, что клики будут фиксироваться на любых вложенных элементах. Сохраняем триггер. Осталось создат тег Google Аналитика — Universal Analytics с типом отслеживания Событие.

Отслеживание событий в GTM с помощью data-* атрибутов
Тег Universal Analytics

В качестве Категория и Действие я указал произвольные значения, а в Ярлык поместил переменную уровня данных gtm.element.dataset.tariff, которая будет передавать значение дата-атрибута элемента, по которому был клик. Сохраняем.

Проверить корректность настройки можно с помощью режима отладки GTM и отчетов В режиме реального времени Google Analytics. Кликнув несколько раз по разным кнопкам, в отчете появятся данные по нашим событиям:

Отслеживание событий в GTM с помощью data-* атрибутов
События со значениями дата-атрибутов

Через некоторое время все данные по событиям появятся в отчете Поведение — События — Лучшие события.

Источник
 
Сверху