Данный метод будет полезен в тех случаях, когда необходимо извлечь данные об электронной коммерции или электронной торговли без внедрения скриптов сбора данных 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 массив с данными
а также работу тега
Если данные отображаются корректно, значит всё работает 🙂
Поделиться ссылкой:
