В одной из прошлых статей мы разобрались с тем, как отслеживать клики с передачей данных другого связанного элемента с помощью 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. Значит работает.
Поделиться ссылкой: