Як налаштувати відстеження електронної торгівлі в GA4 через код Universal Analytics

Після припинення підтримки Universal Analytics (UA), багато функцій аналітики «відвалилися» і вимагали нового налаштування. Разом із ними ― відстеження електронної торгівлі.

Однак для налаштування модуля електронної торгівлі необхідне впровадження коду в сайт і залучення розробника. Та чи це обов’язково? У цій статті я розповім, як можна за допомогою коду ecommers для UA налаштувати відстеження трансакцій у GA4.

1. Порівняння модулів.
2. Технічна реалізація.
3. Створення змінних.
4. Створення тригера.
5. Створення тега GA4.

Порівняння модулів електронної комерції UA і GA4

Нова аналітика відрізняється не тільки інтерфейсом, модуль електронної торгівлі також змінився. Щоб відстежити відмінності, я порівняю фрагменти коду, які відповідають за передачу трансакцій у системи аналітики. 

dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  event: “purchase”,
  ecommerce: {
      transaction_id: “T12345”,
      affiliation: “Online Store”,
      value: “59.89”,
      tax: “4.90”,
      shipping: “5.99”,
      currency: “EUR”,
      coupon: “SUMMER_SALE”,
      items: [{
        item_name: “Triblend Android T-Shirt”,
        item_id: “12345”,
        price: “15.2”,
        item_brand: “Google”,
        item_category: “Apparel”,
        item_variant: “Gray”,
        quantity: 1
      }, {
        item_name: “Donut Friday Scented T-Shirt”,
        item_id: “67890”,
        price: 33.75,
        item_brand: “Google”,
        item_category: “Apparel”,
        item_variant: “Black”,
        quantity: 1
      }]
  }
});

dataLayer.push({
'ecommerce': {
'purchase': {
'actionField': {
'id': '13990', // номер трансакції
'revenue': '105', 
},
'products': [{ 
'name': 'Ремінь варіатора Dayco DY 7188', 
'id': '050002',
'price': '105',
'brand': 'DAYKO',
'category': 'Витратні матеріали та Запчастини',
'quantity': 1
}]
}
},
'event':'gtm-enhanced-ecommerce'
});

Основні змінні в Google Analytics 4 залишилися такими ж, як в UA, але їхня назва тепер інакша. Через це GA4 вже не буде правильно співвідносити змінні і передавати трансакції, як раніше. 

GA4 не працюватиме без параметра transaction_id, наприклад.  Також у GA4 не можна передавати дохід (value) без валюти (currency). Якщо буде пропущено валюту, у GA4 все фіксуватиметься без доходу.

Загалом, відмінностей достатньо, але як тоді змусити код UA працювати в GA4? Для початку, я виділю обов’язкові параметри в коді GA4. У цьому блоці коду це:

• transaction_id;
• value;
• currency.

У блоці items також є обов’язкові параметри. Їх два:

• item_name;
• item_id.

Всі інші параметри можна передавати або не передавати на ваш вибір. Код працюватиме і без них.

Технічна реалізація електронної торгівлі в GA4

З обов’язковими параметрами розібралися, тепер розповім, як змусити їх працювати. А саме, я розповім, як переналаштувати код для UA для ecommerce, який вже був на сайті, використовуючи dataLayer і Google Tag Manager (GTM).

Першим кроком визначте, які змінні вам потрібні. Для цього зверніться до коду для GA4, який я навела вище в таблиці. Виділіть усі потрібні для базової роботи модуля змінні, наприклад:

• items;
• transaction_id;
• value;
• shipping;
• currency;
• affiliation.

Тепер, подивившись на код для UA, я бачу, що всі ці змінні вже є в моєму DataLayer. Залишилося тільки створити змінні в GTM, присвоїти їм потрібні значення і передати в GA4.

Створення змінних

Щоб створити нову змінну, необхідно перейти в GTM, на вкладку «Змінні» і натиснути кнопку «Створити».

Після цього задайте назву змінної, її тип (у моєму випадку «Змінна рівня даних») і умову для присвоєння значення.

Зверніть увагу на умову присвоєння значення. Рядок ecommerce.purchase.products означає, що ця змінна прийме значення масиву даних, які вже є в DataLayer. У коді для UA видно, що цей рядок також показує порядок звернення до масиву даних: спочатку ecommerce, потім ― purchase, потім ― products.

Далі переходжу до налаштування змінних. Налаштовую змінну рівня даних. У версії рівня даних вказую «Версія 2». Вказую шлях до масиву products, тобто до інформації про товар.

У тому ж порядку створюю наступну змінну, називаю «PC - EE - transaction_id». Вона приймає значення ідентифікатора трансакції.

Далі змінна «PC - EE - affiliation» ― це інформація про те, в якому магазині або в якого партнера було здійснено покупку. Умовний приклад значення: «філія 1, філія 2».

Створюю змінну доходу «PC - EE - value» ― цінність трансакції. Це обов’язковий параметр.

Наступний крок ― перевірити, що нові змінні дійсно приймають потрібні значення. Для цього в розділі «Теги» натискаю кнопку «Попередній перегляд».

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

Знаходжу Event, який передається в момент успішної покупки. Відкриваю вкладку «Змінні» і знаходжу серед них потрібні мені.

Тригер

Після налаштування змінних потрібно створити тригер, при активації якого будуть передаватися дані. У моєму випадку, це подія gtm-enhanced-ecommerce, яку я передаю в момент успішного оформлення замовлення.

Тригер завжди буде в розділі Event вашого Google Tag Manager.

Тег

Останній крок ― це створення тега GA4, у який ви передаватимете дані про трансакції для звітів.

У GTM натискайте «Створити тег», тип тега «Подія GA4».

Далі необхідно вибрати конфігурацію GA4 і задати назву події. У назві вказую «purchase». У GA4 саме ця назва відповідає за покупки.

Далі відкриваю меню «Параметри події» і вказую всі потрібні параметри, з обраних раніше.

Залишилося заповнити значення цих параметрів. Для цього натискаю на значок додавання і вибираю змінні, які створила на попередньому етапі.

Після заповнення всіх значень, сторінка має мати такий вигляд.

Останній крок налаштування ― додавання налаштованого раніше тригера і перевірка в режимі попереднього перегляду.

Щоб перевірити дію модуля в попередньому перегляді, потрібно зробити тестову трансакцію (купівлю на сайті), вибрати необхідну подію і натиснути на потрібний тег.

Відкриється меню з параметрами цього тега. Перевіряю, що всі значення коректні й передається те, що мені потрібно.

Після перевірки публікую зміни в GTM, чекаю 5 хвилин і знову роблю тестову трансакцію. Тепер проводжу перевірку вже в самому GA4, у звітах у режимі реального часу.

Рекомендую додатково перевіряти елементи в DebugView GA4

У стандартних звітах дані з’являться через 24 години.

Висновок

1. Код передачі трансакцій Universal Analytics не працюватиме з Google Analytics 4, оскільки назви змінних у ньому не відповідають назвам параметрів у GA4.
2. Щоб передавати трансакції в GA4 через код Universal Analytics, необхідно зіставити назви змінних і налаштувати їх передачу в GTM.
3. Описаний спосіб ― це тимчасовий захід, який не дає повної інформації про трансакції. Якщо ви хочете бачити всі типи звітів, а не тільки трансакції, отримати більше даних, варто відразу використовувати код для GA4.