Настройка передачи данных другого связанного элемента с помощью JavaScript

 

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

Поделиться ссылкой:

 

Читайте также