Настройка отслеживания значений data-атрибутов с помощью GTM

 

data-атрибуты хранят в себе различные данные элемента. Их может быть любое количество. Начинаются со слова data- и заканчиваться могут чем угодно, на вкус разработчика. Могут присутствовать во многих HTML-тегах: div, span, a и т.д. По спецификации, допускаются только символы нижнего регистра и тире. Например, data-id, data-name, data-item-id, data-article-title, data-product-name и т.п., как душе угодно.

В данной статье разберёмся, как отслеживать значения data-атрибутов с помощью Google Tag Manager и отправлять эти данные в виде событий в системы аналитики.

Для начала необходимо убедиться, что в исходном коде сайта присутствует код ГТМ. Иначе ничего не получится.

В этом примере будем отслеживать атрибут data-item-id, который прописан в ссылке (в теге a). Это будет id товара в интернет-магазине. При клике на кнопку Купить он будет передавать данные в Google Tag Manager.

Переходим в ГТМ в Переменные и создадим там пользовательскую переменную с именем aev — data-item-id. Выберем тип переменной — Переменная автоматического события

и зададим ей следующие параметры:

  • тип переменной — Атрибут элемента
  • название атрибута — data-item-id

Затем переходим в Триггеры и создадим триггер с названием click — addToCart

В настройках триггера выберем тип Клик — Все элементы и в условиях активации зададим:

 

Click ClassesсодержитaddToCart

так как кнопка имеет классы addToCart, product-buy и js-add-to-cart.

После этого переходим в Теги и создадим тег с названием GA — click — addToCart. Выберем тип Google Аналитика — Universal Analytics

и в Конфигурации тега зададим ему следующие параметры:

  • тип отслеживания — Событие
  • категория — addToCart
  • действие — click
  • ярлык — product id: {{aev — data-item-id}}
  • настройки Google Analytics: {{GA ID}}

и привяжем к нему триггер click — addToCart

Сохраняем и опубликовываем контейнер.

Проверяем:

Сохраняем и опубликовываем контейнер.

Как видно из скриншота выше, тег GA — click — addToCart успешно запустился и передал данные в Google Аналитику

Если необходимо отслеживать несколько data-атрибутов в одном HTML-теге, то создаём переменные аналогично с выше описанными настройками, только с разными данными, и в теге для GA пропишем эти переменные в нужных местах. Главное — чтобы они в нём присутствовали.

Поделиться ссылкой:

 

Читайте также