Просування сайтів & web-аналітика

Відправити заявку    +38 096 558 75 14

Розширена електронна торгівля Google Analytics

Розширена електронна торгівля (Enhanced Ecommerce) Google Analytics - це можливість відстежувати дії користувача на сайті, починаючи від перегляду, закінчуючи замовленням на сайті, відстежити ланцюжок взаємодій на рівні великих даних, зробити системні висновки і прийняти рішення про структурні зміни.

Стандартна електронна торгівля - це інформація про замовлення з фінансовими даними в аналітиці. Розширена електронна торгівля - це та ж інформація, але вже з поведінкою користувачів, з можливостями формування воронки продажів. Як налаштувати і що можна отримати, говоримо про це. Отже, поїхали!

1

Підключаємо розширену електронну торгівлю на рівні Google Analytics:

налаштування електронної торгівлі в Google Analytics
2

Формуємо пакет ТЗ для програмістів по відправці подій в Tag Manager, який в свою чергу буде передавати події в Google Analytics.

Всередині, коду Tag Manager або в будь-якому іншому місці, наприклад в Footer, ми будемо розміщувати контейнер даних, які будуть передаватися через Data Layer в Google Tag Manager, а потім в Analytics.

Data Layer – це стандартизований формат для передачі даних з сайту в сторонні сервіси.

Кожна сторінка буде віддавати свою інформацію про взаємодію з сайтом зі своїми спец параметрами.

2.1 Покази товарів

Подія: impressions.

Розміщення: сторінка каталогу товару.

Опис: показ товарів в каталозі, або в результаті пошуку конкретного товару, або просто відкриття категорії.

Спрацьовування події: в момент показу товару у видимій області.

Код в даному випадку буде мати такий вигляд нижче. Думаю, навіть не варто розписувати, що означає кожна змінна, так як все гранично зрозуміло.


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
     }]
  },
 'event': 'gtm-ee-event',
 'gtm-ee-event-category': 'Enhanced Ecommerce',
 'gtm-ee-event-action': 'Impressions',
 'gtm-ee-event-non-interaction': 'True',
});
    

де:

'event': 'gtm-ee-event' - назва користувальницькї події, може бути довільною

'gtm-ee-event-category': 'Enhanced Ecommerce' - категорія події

'gtm-ee-event-action': 'Impressions' - дія

Цей блок відправляє дані в Tag Manager про вчинення події. В даному випадку, в ідеалі, щоб подія спрацьовувала тільки тоді, коли товар знаходиться у видимій області екрана.

2.2 Кліки по товарах

Подія: productClick.

Розміщення: сторінка каталогу товару.

Опис: передача даних про кліки та переходи в товар.

Спрацьовування події: в момент кліка на картку товару.


function(productObj) {
  dataLayer.push({
      'ecommerce': {
      'click': {
        'actionField': {'list': 'Search Results'},      // Optional list property.
        'products': [{
          'name': productObj.name,                     
          'id': productObj.id,
          'price': productObj.price,
          'brand': productObj.brand,
          'category': productObj.cat,
          'variant': productObj.variant,
          'position': productObj.position
         }]
       }
     },
 'event': 'gtm-ee-event',
 'gtm-ee-event-category': 'Enhanced Ecommerce',
 'gtm-ee-event-action': 'productClick',
 'gtm-ee-event-non-interaction': 'True',
     }
  });
}
  

2.3 Покази інформації по товарах

Подія: detail.

Розміщення: картка товару.

Опис: перегляд інформації про характеристики товару та в цілому, самого товару.

Спрацьовування події: в момент перегляду фото або характеристик товару.


dataLayer.push({
  'ecommerce': {
    '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'
       }]
     }
   },
 'event': 'gtm-ee-event',
 'gtm-ee-event-category': 'Enhanced Ecommerce',
 'gtm-ee-event-action': 'detail',
 'gtm-ee-event-non-interaction': 'True',
});
  

2.4 Додавання товарів в кошик і видалення їх з кошика

Подія: addToCart.

Розміщення: сторінка каталогу товару.

Опис: додавання товарів в кошик.

Спрацьовування події: в момент кліка на кнопку "додати в кошик" або "купити в 1 клік".


  dataLayer.push({
  '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
       }]
    }
  },
 'event': 'gtm-ee-event',
 'gtm-ee-event-category': 'Enhanced Ecommerce',
 'gtm-ee-event-action': 'addToCart',
 'gtm-ee-event-non-interaction': 'True',
});
  

Подія: removeFromCart.

Розміщення: кошик.

Опис: видалення товарів з кошика.

Спрацьовування події: в момент натискання на хрестик в кошику або кнопку "видалити" навпроти товару.


  dataLayer.push({
  '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
      }]
    },
 'event': 'gtm-ee-event',
 'gtm-ee-event-category': 'Enhanced Ecommerce',
 'gtm-ee-event-action': 'removeFromCart',
 'gtm-ee-event-non-interaction': 'True',
  }
});
  

2.5 Оформлення покупки

Подія: checkout.

Розміщення: кошик.

Опис: відправка інформації про проходження етапів оформлення замовлення.

Спрацьовування події: в момент проходження кроку оформлення замовлення.

Є можливість поділу на кроки, якщо оформлення здійснюється в кілька етапів.


function onCheckout() {
  dataLayer.push({
    'ecommerce': {
      'checkout': {
        'actionField': {'step': 1, 'option': 'Visa'},  // довільно заповнюєте інформацію про параметри замовлення
        'products': [{
          'name': 'Triblend Android T-Shirt',
          'id': '12345',
          'price': '15.25',
          'brand': 'Google',
          'category': 'Apparel',
          'variant': 'Gray',
          'quantity': 1
       }]
     }
   },
 'event': 'gtm-ee-event',
 'gtm-ee-event-category': 'Enhanced Ecommerce',
 'gtm-ee-event-action': 'Checkout Step 1',
 'gtm-ee-event-non-interaction': 'True',
   }
  });
}
  

Якщо Ваш інтернет-магазин передбачає 2-х або більше етапну систему оформлення замовлення, то на наступній сторінці Ви відправляєте аналогічний код, тільки вже зі Step 2 і необхідним option. Також додаємо кроки оформлення замовлення в налаштуваннях розширеної електронної торгівлі.

кроки оформлення замовлення в налаштуваннях електронної торгівлі

2.6 Купівля

Подія: purchase.

Розміщення: сторінка подяки за замовлення, вище коду тег менеджер.

Опис: відправка інформації про замовлення.

Спрацьовування події: в момент відкриття сторінки подяки з інформацією про замовлення.

Увага! Якщо у Вас була налаштована стандартна електронна торгівля - старий код необхідно буде видалити і прописати новий код + видалити стару обробку події на стороні тег менеджер + ініціалізувати змінну dataLayer вище коду скрипта. Допомога тут.


dataLayer.push({
  'ecommerce': {
    'purchase': {
      'actionField': {
        'id': 'T12345',                         // Transaction ID. Required for purchases and refunds.
        'affiliation': 'Online Store',
        'revenue': '35.43',                     // Total transaction value (incl. tax and shipping)
        'tax':'4.90',
        'shipping': '5.99',
        'coupon': 'SUMMER_SALE'
      },
      'products': [{                            // List of productFieldObjects.
        'name': 'Triblend Android T-Shirt',     // Name or ID is required.
        'id': '12345',
        'price': '15.25',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Gray',
        'quantity': 1,
        'coupon': ''                            // Optional fields may be omitted or set to empty string.
       },
       {
        'name': 'Donut Friday Scented T-Shirt',
        'id': '67890',
        'price': '33.75',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Black',
        'quantity': 1
       }]
    }
  },
 'event': 'gtm-ee-event',
 'gtm-ee-event-category': 'Enhanced Ecommerce',
 'gtm-ee-event-action': 'purchase',
 'gtm-ee-event-non-interaction': 'True',
});
  

Це основні події. Якщо Вам необхідно більше інформації, її можна отримати в керівництві для розробників.

3

Приймання подій на рівні Tag Manager і відправка в Google Analytics.

3.1 Створюємо користувацьку змінну користувальницької події.

3.2 Відправляємо типові події по триггеру користувальницької події в Google Analytics.

конфігурація тега

В дію прописуємо значення в залежності від події, яку ми відправляємо.

Є варіант настройки електронної торгівлі без Tag Manager, в даному випадку події відправляються безпосередньо в Google Analytics через ga ('require', 'ec') безпосередньо доопрацюванням самого коду аналітики, інструкція для розробників тут.

3.3 Тестуємо роботу через Tag Assistant і відстежуємо нові звіти в Google Analytics. Будуємо правильні аналітичні висновки.

звіти в Google Analytics

За більш детальною інформацією, звертайтеся за контактами агентства.