В одной из прошлых статей мы разобрались с тем, как отслеживать клики с передачей данных другого связанного элемента с помощью Google Tag Manager. В этой статье речь пойдёт о том, как передавать такие данные с помощью JavaScript. Этот метод будет полезен в тех случаях, когда значение элемента должно быть отлично от того, которое было задано по умолчанию. Например, покупатель в интернет-магазине хочет добавить несколько единиц какого-либо товара. Наша задача — отследить количество добавленного в корзину товара.
Для этого сперва проверим, установлен ли код Менеджера тегов Google на сайте. Если его ещё нет, тогда необходимо его вставить.
Как известно, отслеживание добавления товара в корзину в Ecommerce с помощью Google Tag Manager осуществляется с помощью dataLayer (скрипта):
<script>
dataLayer.push({
'event': 'addToCart',
'ecommerce': {
'currencyCode': 'RUB',
'add': {
'products': [{
'name': 'Apple iPhone X',
'id': 'CN27',
'price': '63790.00',
'brand': 'Moguta.CMS',
'category': 'Электроника/Смартфоны',
'variant': '64 серебристый',
'quantity': 1
}]
}
}
});
</script>
Из этого скрипта видно, что количество товара — ключ quantity у нас 1 штука. Но если необходимо добавить 2 и более штук, и при этом отправить эти данные в системы аналитики, то в него нужно вставить значение поля, в котором пользователь укажет количество. Для этого в коде сайта поменяем значение ключа quantity и добавим ещё один скрипт, который будет отслеживать это значение. Теперь выглядеть это будет примерно так:
<script>
dataLayer.push({
'event': 'addToCart',
'ecommerce': {
'currencyCode': 'RUB',
'add': {
'products': [{
'name': 'Apple iPhone X',
'id': 'CN27',
'price': '63790.00',
'brand': 'Moguta.CMS',
'category': 'Электроника/Смартфоны',
'variant': '64 серебристый',
'quantity': prodQuantity(this)
}]
}
}
});
</script>
<script>
function prodQuantity(currentProduct) {
var currentElement = document.querySelector('a.addToCart.product-buy.js-add-to-cart');
var currentProductQuantity = currentElement.parentElement.parentElement.parentElement.parentElement.parentElement.querySelector('div > div > div > div > div.product-bar > div > form > div > div.c-buy > div > div > input').value;
return parseInt(currentProductQuantity) || parseInt(1);
}
</script>
Принцип действия такого метода следующий:
В количество товара (ключ quantity) вместо статического значения подставляется функция prodQuantity(this). Далее идёт описание этой функции: объявляется переменная currentElement, описывающая селектор текущего элемента, который совершает событие, затем переменная currentProductQuantity, которая позволяет «добраться» до элемента, с которого необходимо выдернуть определённые данные (в нашем случае — поле с введённым количеством). И наконец, функция возвращает введённое количество, а если пользователь не ввёл — тогда количество должно быть равно 1.
parseInt у нас служит для перевода из строкового значения в целое число.
parentElement позволяет подняться вверх по HTML-структуре документа, а затем querySelector обращается к объекту, с которого тянет данные.
querySelector и количество parentElement зависит от структуры документа (HTML-шаблона), который используется на сайте, поэтому на каждом сайте они будут свои. Вычислить всё это можно при помощи консоли Google Chrome.
Проверяем передачу значения в dataLayer:
Видим, что quantity у нас 4. Значит работает.
Поделиться ссылкой:
