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

Отслеживание событий в Google Tag Manager с помощью data-* атрибутов.

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

Существуют различные виды селекторов:

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

Многое из этого с примерами разобрано в статье, посвященной CSS-селекторам. Я также написал еще несколько материалов по селекторам, с которыми рекомендую ознакомиться для большего понимания данной темы.

• Селекторы в jQuery
• Регулярные выражения в CSS-селекторах и GTM
• Отслеживание вложенных элементов в GTM с помощью *

В HTML5 для любого элемента можно использовать собственные атрибуты, начинающиеся с префикса data-, так называемые атрибуты данных.

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

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

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

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

В 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:

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

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

Пример получения конкретного элемента с определенным значением атрибута data-tariff:

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

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

Пример получения значения из data-атрибута с помощью метода getAttribute для первого элемента:

Сначала с помощью переменной myTariff и команды document.getElementsByClassName возвращается значение всех элементов по имени класса purchase-btn. Затем с помощью переменной tariff получаем из атрибута data-tariff по 0 элементу значение Веб-аналитика.

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

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

, где метод .eq(0) - выбирает элемент с конкретным индексом (у меня 0) из набора выбранных элементов, чтобы получить значение Веб-аналитика.

Можно в jQuery использовать и такую команду (метод .data):

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

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

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

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

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

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

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

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