Работа с пользовательскими переменными в GTM. Извлечение данных для Ecommerce

 

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

а также работу тега

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

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

 

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