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 пропишем эти переменные в нужных местах. Главное — чтобы они в нём присутствовали.
Поделиться ссылкой:
