Данный метод будет полезен в тех случаях, когда необходимо извлечь данные об электронной коммерции или электронной торговли без внедрения скриптов сбора данных ecommerce на сайт.
Этот пост — продолжение ранее опубликованной статьи об отслеживании ecommerce с некоторыми корректировками. Упор в нём сделан на то, что Google Tag Manager будет служить именно инструментом сбора данных, а не транслятором массивов dataLayer.
Для начала необходимо убедиться, что код Google Tag Manager присутствует в исходном коде сайта, иначе ничего работать не будет. Также нужно выполнить все настройки электронной торговли в Google Аналитике и/или электронной коммерции в Яндекс Метрике.
Здесь будет описано несколько примеров реализации данной задачи:
- клики по товарам — productClick
- показ сведений о товарах — detail
- добавление товара в корзину — addToCart
- показы товаров — impressions
Предположим, что данные, которые необходимо собрать, содержатся в атрибутах. Это могут быть data-атрибуты или title — это не важно, метод извлечения данных из атрибутов идентичен.
Как видно из скриншота выше, все необходимые для ecommerce данные присутствуют в data-атрибутах.
1. Клики по товарам
Для извлечения данных в ГТМ в Переменных создадим несколько переменных типа Переменная автоматического события:
- aev — productName
- aev — productSKU
- aev — productPrice
- aev — productBrand
- aev — productCategory
- aev — productVariant
- aev — productPosition
В каждой из них в Типе переменной необходимо выбрать Атрибут элемента, а в Названии атрибута — соответствующий data-атрибут
Затем переходим в Триггеры, и создадим триггер для перехода по ссылке (то есть в показ сведений о товаре). Назовём его, например, Click — productClick, и выберем тип — Только ссылки.
В условиях активации триггера привяжемся например к классу элемента, и если у товара имеется картинка с другим классом, можно записать их регулярным выражением с использованием оператора «или» (как на скриншоте ниже)

Также не забываем создать триггер типа Пользовательское событие productClick, как это было указано в предыдущей статье.
После этого переходим в Теги и создадим там тег с именем ecommerce — productClick, выберем тип Пользовательский HTML, пропишем там скрипт:
<script> dataLayer.push({ 'event': 'productClick', 'ecommerce': { 'click': { 'actionField': {'list': '{{aev - productList}}'}, 'products': [{ 'name': '{{aev - productName}}', 'id': '{{aev - productSKU}}', 'price': '{{aev - productPrice}}', 'brand': '{{aev - productBrand}}', 'category': '{{aev - productCategory}}', 'variant': '{{aev - productVariant}}', 'position': parseInt({{aev - productPosition}}) }] } }, }); </script>
и привяжем к нему триггер Click — productClick
В строчке ‘position’… необходимо обязательно перевести из формата строкового значения в цифровое — с помощью parseInt
Проверяем и убедимся, что событие выполняется
Показ сведений о товарах
Здесь немного проще. Создаём тег со скриптом:
<script> var detail = document.querySelector('h1.c-title'); var detailList = detail.getAttribute("data-product-list"); var detailName = detail.getAttribute("data-product-name"); var detailID = detail.getAttribute("data-product-sku"); var detailPrice = detail.getAttribute("data-product-price"); var detailBrand = detail.getAttribute("data-product-brand"); var detailCategory = detail.getAttribute("data-product-category"); var detailVariant = detail.getAttribute("data-product-variant"); dataLayer.push({ 'ecommerce': { 'detail': { 'actionField': {'list': detailList}, 'products': [{ 'name': detailName, 'id': detailID, 'price': detailPrice, 'brand': detailBrand, 'category': detailCategory, 'variant': detailVariant }] } } }); </script>
и привяжем к нему триггер gtm.dom
Проверяем, чтобы тег срабатывал
3. Добавление товара в корзину
Здесь мы воспользуемся переменными автоматического события, которые создали для кликов по товарам (пункт 1), а для того, чтобы учитывалось количество добавляемых товаров в корзину, создадим переменную с именем cjs — productQuantityValue типа Собственный код JavaScript, в котором с помощью селектора надо добраться до поля ввода количества value, который является связанным элементом.
В данном примере код будет выглядеть так:
function(){ var productQuantityValue = google_tag_manager["GTM-XXXXXXX"].dataLayer.get('gtm.element').parentElement.parentElement.parentElement.parentElement.parentElement.querySelector('div > div > div > div > div.product-bar > div > form > div > div.c-buy > div > div > input').value; return productQuantityValue; }
где GTM-XXXXXXX — это id контейнера Google Tag Manager

Более подробно об этом способе можно почитать здесь: https://www.r-business.org/analytics/nastroyka-otslezhivaniya-klikov-s-peredachey-dannyh-drugogo-svyazannogo-elementa-s-pomoschyu-gtm/
Затем в Триггерах создадим триггер с названием Click — addToCart, выберем тип Все элементы, и, если кнопка добавления товара не одна, или просто имеет несколько классов, то в условиях активации можно записать их регулярным выражением с использованием оператора «или» (как на скриншоте ниже)
Также не забываем создать триггер типа Пользовательское событие addToCart, как это было указано в предыдущей статье.
Далее переходим в Теги и создадим тег типа Пользовательский HTML, назовём его ecommerce — addToCart, пропишем в него следующий код:
<script> dataLayer.push({ 'event': 'addToCart', 'ecommerce': { 'currencyCode': 'RUB', 'add': { 'products': [{ 'name': '{{aev - productName}}', 'id': '{{aev - productSKU}}', 'price': '{{aev - productPrice}}', 'brand': '{{aev - productBrand}}', 'category': '{{aev - productCategory}}', 'variant': '{{aev - productVariant}}', 'quantity': parseInt({{cjs - productQuantityValue}}) || parseInt(1) }] } } }); </script>
и привяжем к нему триггер Click — addToCart
В строчке ‘quantity’… необходимо обязательно перевести из формата строкового значения в цифровое — с помощью parseInt, а также с помощью оператора «или» указать значение 1 (по умолчанию) для тех случаев, когда покупатель не вводит количество товара.
Проверяем и убедимся, что тег срабатывает правильно
4. Показы товаров
Так как в списке товаров может быть несколько, их необходимо собрать в один массив. Для этого создадим переменную с именем cjs — products — impressions типа Собственный код JavaScript, и впишем в него следующий код:
function getData(impressions) { var data = []; var products = document.querySelectorAll('a.c-goods__title'); for (var i = 0, n = products.length; i < n; i++) { if (products[i]) { data.push({'name': products[i].getAttribute('data-product-name'), 'id': products[i].getAttribute('data-product-sku'), 'price': products[i].getAttribute('data-product-price'), 'brand': products[i].getAttribute('data-product-brand'), 'category': products[i].getAttribute('data-product-category'), 'variant': products[i].getAttribute('data-product-variant'), 'list': products[i].getAttribute('data-product-list'), 'position': parseInt(products[i].getAttribute('data-product-position'))}); } } return data; }
Здесь мы по селектору и data-атрибутам обходим список товаров, а затем задаём необходимые ключи и привязываем к ним значения этих data-атрибутов.
После этого переходим в Теги и создадим тег с именем ecommerce — impressions, выберем тип Пользовательский HTML, впишем туда следующий код:
<script> dataLayer.push({ 'ecommerce': { 'currencyCode': 'RUB', 'impressions': {{cjs - products - impressions}} } }); </script>
и привяжем к нему триггер gtm.dom
Проверяем, собирает ли JavaScript массив с данными
а также работу тега

Если данные отображаются корректно, значит всё работает 🙂
Поделиться ссылкой: