Якщо ви шукаєте інструкцію з налаштування 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.