Налаштування Ecommerce GA4 через GTM

Якщо ви шукаєте інструкцію з налаштування Ecommerce Google Analytics 4 через GTM, то мабуть розширена електронна торгівля Analytics Universal у вас уже була встановлена. Якщо ж ні, то це не буде проблемою і можна відразу приступати до налаштування в GA4.

Для того, щоб налаштувати Ecommerce в GA4 через GTM нам необхідно виконати наступні кроки:
1. Написати ТЗ розробнику для передачі даних у dataLayer
2. Налаштувати GTM
3. Перевірити коректність установки кодів і налаштування GTM

Написати ТЗ розробнику для Налаштування Ecommerce та передачі даних у dataLayer:

Давайте пройдемось детальніше, що взагалі можна відслідковувати в новій електронній торгівлі в GA4:
1. Перегляд товару в списку
2. Клік по товару в списку
3. Перегляд детальної інформації про товар
4. Додавання товару в кошик
5. Перегляд сторінки кошика
6. Видалення товару з кошика
7. Початок оформлення покупки
8. Вибір способу доставки
9. Вибір способу оплати
10. Покупка

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

Параметри	Опис
event	Назва події. Саме на неї ми налаштовуватимемо тригер в GTM. Значення у прикладах краще не змінювати.
item_name	Назва товару.Один з найважливіших параметрів, оскільки без інформації про назву товару або його ID ваш запит не буде прийнятий аналітикою.
item_id	Ідентифікатор товару.
price	Ціна 1 одиниці товару.
item_brand	Бренд товару.
item_category	Найвища категорія для товару.
item_category2	Другий найвищий рівень ієрархії категорії для товару.
item_category3	Третій найвищий рівень ієрархії категорії для товару.
item_category4	Четвертий найвищий рівень ієрархії категорії для товару.
item_category5	П’ятий найвищий рівень ієрархії категорії для товару.
item_variant	Варіант товару. У цей параметр можна передавати будь-яку додаткову інформацію про товар: колір, розмір, обсяг пам’яті, тип матеріалу тощо.Назва списку, в якому був товар.
item_list_name	Назва списку, в якому був товар.
item_list_id	Ідентифікатор списку, в якому був товар.
index	Порядковий номер товару у списку. Нумерація рахується зліва направо та зверху вниз. Важливо, нумерація в момент показу товару у списку та в момент кліка має бути аналогічною.
quantity	Параметр, в якому фіксується кількість вибраного товару.
discount	Розмір знижки на товар.
coupon	У цей параметр можна передавати код купона для товару.
shipping_tier	Вибраний користувачем спосіб доставки.
payment_type	Вибраний користувачем спосіб оплати.
value	Загальна сума кошика на момент надсилання події.
currency	Код валюти.
transaction_id	Ідентифікатор транзакції.
tax	Сума податку.
shipping	Вартість доставки.

1. Перегляд товару у списку

Це подія, яка стосується перегляду товару в списку на сайті. Наприклад, “Переглянуті товари”.

Важливо: інформацію про цю подію необхідно надсилати подію в момент, коли товари потрапляли у видиму область екрану користувача. Передавати дані в момент завантаження сторінки буде не коректно, тому що в момент завантаження не всі списки попадають у видиму область екрану і статистика матиме спотворені дані.

Також варто розуміти, що кожен товар передається окремим об’єктом у масиві items. Далі всі приклади будуть наведені стосовно одного товару, але це правило залишається актуальним і для наступних фрагментів коду.

window.dataLayer = window.dataLayer || [];
dataLayer.push({
  'event': 'view_item_list',
  'ecommerce': {
    'items': [
     {
       'item_name': 'PRO GTM',       // Name or ID is required.
       'item_id': '12345',
       'price': '500',
       'item_brand': 'Analytics Tips',
       'item_category': 'Very Good Category',
       'item_category2': 'Very Good Category 2',
       'item_category3': 'Very Good Category 3',
       'item_category4': 'Very Good Category 4',
       'item_variant': 'full',
       'item_list_name': 'Hits',
       'item_list_id': 'A123',
       'index': 1,
       'quantity': '1'
     },
    {
       'item_name': 'Triblend Android T-Shirt',       // Name or ID is required.
       'item_id': '12345',
       'price': '15.25',
       'item_brand': 'Google',
       'item_category': 'Apparel',
       'item_category2': 'Mens',
       'item_category3': 'Shirts',
       'item_category4': 'Tshirts',
       'item_variant': 'Gray',
       'item_list_name': 'Search Results',
       'item_list_id': 'SR123',
       'index': 1,
       'quantity': '1',
       'discount': '100',
       'coupon': 'SPRING'
     }]
  }
});

2. Клік по товару в списку

Інформацію про цей крок необхідно передавати в момент, коли користувач клікає по одному із товарів у списку.

window.dataLayer = window.dataLayer || [];
dataLayer.push({
  'event': 'select_item',
  'ecommerce': {
    'items': [
     {
       'item_name': 'PRO GTM',       // Name or ID is required.
       'item_id': '12345',
       'price': '500',
       'item_brand': 'Analytics Tips',
       'item_category': 'Very Good Category',
       'item_category2': 'Very Good Category 2',
       'item_category3': 'Very Good Category 3',
       'item_category4': 'Very Good Category 4',
       'item_variant': 'full',
       'item_list_name': 'Hits',
       'item_list_id': 'A123',
       'index': 1,
       'quantity': '1',
       'discount': '100',
       'coupon': 'SPRING'
     }]
  }
});

3. Перегляд детальної інформації про товар

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

window.dataLayer = window.dataLayer || [];
dataLayer.push({
  'event': 'view_item',
  'ecommerce': {
    'items': [
     {
       'item_name': 'PRO GTM',       // Name or ID is required.
       'item_id': '12345',
       'price': '500',
       'item_brand': 'Analytics Tips',
       'item_category': 'Very Good Category',
       'item_category2': 'Very Good Category 2',
       'item_category3': 'Very Good Category 3',
       'item_category4': 'Very Good Category 4',
       'item_variant': 'full',
       'item_list_name': 'Hits',
       'item_list_id': 'A123',
       'index': 1,
       'quantity': '1',
       'discount': '100',
       'coupon': 'SPRING'
     }]
  }
});

4. Додавання товару в кошик

Інформацію необхідно передавати у всіх випадках, коли користувач додає товар у кошик.

window.dataLayer = window.dataLayer || [];
dataLayer.push({
  'event': 'add_to_cart',
  'ecommerce': {
    'items': [
     {
       'item_name': 'PRO GTM',       // Name or ID is required.
       'item_id': '12345',
       'price': '500',
       'item_brand': 'Analytics Tips',
       'item_category': 'Very Good Category',
       'item_category2': 'Very Good Category 2',
       'item_category3': 'Very Good Category 3',
       'item_category4': 'Very Good Category 4',
       'item_variant': 'full',
       'item_list_name': 'Hits',
       'item_list_id': 'A123',
       'index': 1,
       'quantity': '1',
       'discount': '100',
       'coupon': 'SPRING'
     }]
  }
});

5. Перегляд сторінки кошика

Інформацію необхідно передавати у випадках, коли користувач переглядає кошик.

window.dataLayer = window.dataLayer || [];
dataLayer.push({
  'event': 'view_cart',
  'ecommerce': {
    'items': [
     {
       'item_name': 'PRO GTM',       // Name or ID is required.
       'item_id': '12345',
       'price': '500',
       'item_brand': 'Analytics Tips',
       'item_category': 'Very Good Category',
       'item_category2': 'Very Good Category 2',
       'item_category3': 'Very Good Category 3',
       'item_category4': 'Very Good Category 4',
       'item_variant': 'full',
       'item_list_name': 'Hits',
       'item_list_id': 'A123',
       'index': 1,
       'quantity': '1',
       'discount': '100',
       'coupon': 'SPRING'
     }]
  }
});

6. Видалення товару з кошика

Передаємо дані при видаленні користувачем товарів із кошика.

window.dataLayer = window.dataLayer || [];
dataLayer.push({
  'event': 'remove_from_cart',
  'ecommerce': {
    'items': 
     {
       'item_name': 'PRO GTM',       // Name or ID is required.
       'item_id': '12345',
       'price': '500',
       'item_brand': 'Analytics Tips',
       'item_category': 'Very Good Category',
       'item_category2': 'Very Good Category 2',
       'item_category3': 'Very Good Category 3',
       'item_category4': 'Very Good Category 4',
       'item_variant': 'full',
       'item_list_name': 'Hits',
       'item_list_id': 'A123',
       'index': 1,
       'quantity': '1',
       'discount': '100',
       'coupon': 'SPRING'
     }]
  }
});

7. Початок оформлення покупки

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

window.dataLayer = window.dataLayer || [];
dataLayer.push({
  'event': 'begin_checkout',
  'ecommerce': {
    'items': [
     {
       'item_name': 'PRO GTM',       // Name or ID is required.
       'item_id': '12345',
       'price': '500',
       'item_brand': 'Analytics Tips',
       'item_category': 'Very Good Category',
       'item_category2': 'Very Good Category 2',
       'item_category3': 'Very Good Category 3',
       'item_category4': 'Very Good Category 4',
       'item_variant': 'full',
       'item_list_name': 'Hits',
       'item_list_id': 'A123',
       'index': 1,
       'quantity': '1',
       'discount': '100',
       'coupon': 'SPRING'
     }]
  }
});

8. Вибір способу доставки

Передаємо дані у момент, коли користувач визначився з варіантом доставки.

window.dataLayer = window.dataLayer || [];
dataLayer.push({
  'event': 'add_shipping_info',
  'ecommerce': {
    'shipping_tier': 'google',
    'value': 23.07,
    'currency': 'USD',
    'items': [
     {
       'item_name': 'PRO GTM',       // Name or ID is required.
       'item_id': '12345',
       'price': '500',
       'item_brand': 'Analytics Tips',
       'item_category': 'Very Good Category',
       'item_category2': 'Very Good Category 2',
       'item_category3': 'Very Good Category 3',
       'item_category4': 'Very Good Category 4',
       'item_variant': 'full',
       'item_list_name': 'Hits',
       'item_list_id': 'A123',
       'index': 1,
       'quantity': '1',
       'discount': '100',
       'coupon': 'SPRING'
     }]
  }
});

9. Вибір способу оплати

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

window.dataLayer = window.dataLayer || [];
dataLayer.push({
  'event': 'add_payment_info',
  'ecommerce': {
    'payment_type': 'google_pay',
    'value': 23.07,
    'currency': 'USD',
    'items': [
     {
       'item_name': 'PRO GTM',       // Name or ID is required.
       'item_id': '12345',
       'price': '500',
       'item_brand': 'Analytics Tips',
       'item_category': 'Very Good Category',
       'item_category2': 'Very Good Category 2',
       'item_category3': 'Very Good Category 3',
       'item_category4': 'Very Good Category 4',
       'item_variant': 'full',
       'item_list_name': 'Hits',
       'item_list_id': 'A123',
       'index': 1,
       'quantity': '1',
       'discount': '100',
       'coupon': 'SPRING'
     }]
  }
});

10. Покупка

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

window.dataLayer = window.dataLayer || [];
dataLayer.push({
  'event': 'purchase',
  'ecommerce': {
  'transaction_id': '24T',
  'value': 510,
  'currency': 'USD',
  'tax': 10,
  'shipping': 0,
  'coupon': 'free_shipping',
    'items': [
     {
       'item_name': 'PRO GTM',       // Name or ID is required.
       'item_id': '12345',
       'price': '500',
       'item_brand': 'Analytics Tips',
       'item_category': 'Very Good Category',
       'item_category2': 'Very Good Category 2',
       'item_category3': 'Very Good Category 3',
       'item_category4': 'Very Good Category 4',
       'item_variant': 'full',
       'quantity': '1',
       'discount': '100',
       'coupon': 'SPRING'
     }]
  }
});

Налаштувати GTM

Налаштування змінних

Необхідно налаштувати 7 додаткових змінних в GTM для коректної передачі даних електронної торгівлі до GA4:
– ecommerce.affiliation
– ecommerce.coupon
– ecommerce.currency
– ecommerce.items
– ecommerce.shipping
– ecommerce.transaction_id
– ecommerce.value

Приклад налаштування на скріншоті нижче, всі змінні робляться однаково

Налаштування активаторів

Необхідно створити через спеціальну подію стільки активаторів, скільки у нас було подій в ТЗ для електронної торгівлі:
– view_item_list
– select_item
– view_item
– add_to_cart
– view_cart
– remove_from_cart
– begin_checkout
– add_shipping_info
– add_payment_info
– purchase

Приклад налаштування на скріншоті нижче, всі активатори робляться однаково.

Налаштування тегів

Далі для кожної події з ТЗ необхідно налаштувати тег. Майже всі теги налаштовуються однаково, активатори для кожного тегу різні – відповідно. Додатково для “Покупки” передається більше параметрів події – усі ті змінні, які потрібно було налаштувати. В решти тегів використовується тільки один параметр – “items” зі значенням – “ecommerce.items”.

Налаштування тегу на скріншоті нижче, не забуваємо опублікувати контейнер GTM після внесення всіх змін.

Перевірити коректність установки кодів і налаштування GTM

Після встановлення всіх кодів розробником, необхідно перевірити коректність відпрацювання і коректність отримання даних Аналітикою по всім налаштованим подіям. Якщо все передається і отримується правильно, то на цьому налаштування можна вважати завершеним. Якщо ж ні, то потрібно шукати і усувати помилки.

На всякий випадок залишу посилання на посібник для розробників по електронній торгівлі в GA4.