Настройка контейнера Google Tag Manager и объекта Data Layer для подключения e-commerce в Google Universal Analytics

1. Установка Data Layer для eCommerce

Подробная документация для разработчиков - https://developers.google.com/tag-manager/enhanced-ecommerce  

При клике на кнопку “Оформить заказ” и переходе на страницу “Заказ оформлен” должен сработать нижеуказанный код.

Ниже приведен пример с описанием и типами переменных.

ВАЖНО! Значения из примеров (например: 'id', 'affiliation', 'revenue', 'tax', 'shipping', 'coupon', 'price', 'brand', 'category', 'variant', 'quantity') должны подставляться динамически на стороне сервера. 

<script>
// Send transaction data with a pageview if available
// when the page loads. Otherwise, use an event when the transaction
// data becomes available.
dataLayer.push({
'event': 'transaction',
  'ecommerce': {
    'purchase': {
      'actionField': {
        'id': 'T1234',                         // Transaction ID. Required for purchases and refunds.
        'affiliation': 'Online Store',
        'revenue': '546',                     // Total transaction value (incl. tax and shipping)
        'tax':'',
        'shipping': '',
        'coupon': 'для купона'
      },
      'products': [{                            // List of productFieldObjects.
        'name': 'Корпус фильтра воздушного 1016000585-01',     // Name or ID is required.
        'id': '12345',
        'price': '365',
        'brand': 'Китай (лицензия)',
        'category': 'Фильтр воздушный',
        'variant': '',
        'dimension1': ''         //размер .
        'quantity': 1,
        'coupon': ''                // Optional fields may be omitted or set to empty string.
       },
       {
        'name': 'Прокладка насоса топливного 1016001526',
        'id': '123456',
        'price': '181',
        'brand': 'Китай (лицензия)',
        'category': 'Топливный бак',
        'variant': '',
        'dimension1': ''           //размер .
        'quantity': 1
       }]
    }
  }
});
</script>

1.1 Типы используемых переменных

2. Дополнительные настройки отслеживания действий пользователя для расширенной электронной торговли

2.1 Код отслеживания просмотра товаров

В этом примере пользователь впервые видит товар в результатах поиска. Данный фрагмент кода необходимо установить на каждую страницу, где представлен широкий ассортимент товаров интернет магазина (например, категория или поиск). Для регистрации этого показа информация о товаре передается в объекте impressionFieldObject:

<script>
// Product impressions are sent by pushing an impressions object
// containing one or more impressionFieldObjects.
dataLayer.push({
  'ecommerce': {
    'currencyCode': 'UAH',                       // Local currency is optional.
    'impressions': [
     {
       'name': 'Triblend Android T-Shirt',       // Name or ID is required.
       'id': '12345',
       'price': '15.25',
       'brand': 'Google',
       'category': 'Apparel',
       'variant': 'Gray',
       'list': 'Search Results',
       'position': 1
     },
     {
       'name': 'Donut Friday Scented T-Shirt',
       'id': '67890',
       'price': '33.75',
       'brand': 'Google',
       'category': 'Apparel',
       'variant': 'Black',
       'list': 'Search Results',
       'position': 2
     }]
  }
});
</script>

2.2 Код отслеживания клика по товару

Пользователь нажимает на заинтересовавший его товар, чтобы узнать о нем подробнее.
Данный фрагмент кода необходимо установить для каждой карточки товара в представленном списке категории. Чтобы зарегистрировать этот клик, информация о нем должна передаваться в data layer вместе с productFieldObject. Пример:

<script>
/**
 * Call this function when a user clicks on a product link. This function uses the event
 * callback datalayer variable to handle navigation after the ecommerce data has been sent
 * to Google Analytics.
 * @param {Object} productObj An object representing a product.
 */
function(productObj) {
  dataLayer.push({
    'event': 'productClick',
    'ecommerce': {
      'click': {
        'actionField': {'list': 'Search Results'},      // Optional list property.
        'products': [{
          'name': productObj.name,                      // Name or ID is required.
          'id': productObj.id,
          'price': productObj.price,
          'brand': productObj.brand,
          'category': productObj.cat,
          'variant': productObj.variant,
          'position': productObj.position
         }]
       }
     },
     'eventCallback': function() {
       document.location = productObj.url
     }
  });
}
</script>

2.3 Код отслеживания просмотра информации о товаре

После клика на продукт пользователь попадает на страницу товара, где видит его детальное описание.
Данный код необходимо установить непосредственно на саму страницу товара.
Измеряет просмотры описания (Полное/Детальное описание) товара путем отправки detail в data layer, вместе с одним или несколькими productFieldObjects, представляющими информацию об одном или нескольких товарах, которые были просмотрены:

<script>
// Measure a view of product details. This example assumes the detail view occurs on pageload,
// and also tracks a standard pageview of the details page.
dataLayer.push({
  'ecommerce': {
'event': 'productDetails',
    'detail': {
      'actionField': {'list': 'Apparel Gallery'},    // 'detail' actions have an optional list property.
      'products': [{
        'name': 'Triblend Android T-Shirt',         // Name or ID is required.
        'id': '12345',
        'price': '15.25',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Gray'
       }]
     }
   }
});
</script>

2.4 Код для отслеживания добавления/удаления товара в/из корзины

Пользователь собирается купить товар, предварительно отправив его в корзину. Аналогично Вы можете отслеживать добавление или удаление товаров из корзины используя add или remove actionFieldObject и список productFieldObjects:

Adding a Product to a Shopping Cart (Добавление товара в корзину)

Данный фрагмент кода устанавливается непосредственно на кнопку «Добавить в корзину».

<script>
// Measure adding a product to a shopping cart by using an 'add' actionFieldObject
// and a list of productFieldObjects.
dataLayer.push({
  'event': 'addToCart',
  'ecommerce': {
    'currencyCode': 'UAH',
    'add': {                                // 'add' actionFieldObject measures.
      'products': [{                        //  adding a product to a shopping cart.
        'name': 'Triblend Android T-Shirt',
        'id': '12345',
        'price': '15.25',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Gray',
        'quantity': 1
       }]
    }
  }
});
</script>

Ниже представленный фрагмент кода необходимо установить на кнопку «Удалить из корзины»:

<script>
// Measure the removal of a product from a shopping cart.
dataLayer.push({
  'event': 'removeFromCart',
  'ecommerce': {
    'remove': {                               // 'remove' actionFieldObject measures.
      'products': [{                          //  removing a product to a shopping cart.
          'name': 'Triblend Android T-Shirt',
          'id': '12345',
          'price': '15.25',
          'brand': 'Google',
          'category': 'Apparel',
          'variant': 'Gray',
          'quantity': 1
      }]
    }
  }
});
</script>

2.5 Дополнительный код для отслеживания шагов конверсии

При переходе с корзины на страницу заполнения контактных данных вызывать нижеуказанный код:

<script>
dataLayer.push({
  "event": "checkout",
  "ecommerce": {
    "checkout": {
      "actionField": {
        "step": 1
      },
      "products": [{
        "id": "bc823",
        "name": "Fuelworks T-Shirt",
        "price": "92.00",
        "brand": "Fuelworks",
        "category": "T-Shirts",
        "variant": "red",
        "dimension1": "M",
        "position": 0,
        "quantity": 1
      },
      {
        "id": "dc646",
        "name": "Lunchpod T-Shirt",
        "price": "90.00",
        "brand": "Lunchpod",
        "category": "T-Shirts",
        "variant": "red",
        "dimension1": "M",
        "position": 1,
        "quantity": 1
      }]
    },
    "promoView": {
      "promotions": [{
        "id": "bts",
        "name": "Back To School",
        "creative": "CHECKOUT right",
        "position": "right sidebar"
      }]
    }
  }
});
</script>