Як правильно налаштувати ecommerce-події в GA4 (purchase, add_to_cart тощо)

Як правильно налаштувати ecommerce-події в GA4 (purchase, add_to_cart тощо)

Ecommerce події GA4 — фундамент аналітики інтернет-магазину. Без правильно налаштованих purchase, add_to_cart, begin_checkout ви бачите трафік, але не бачите гроші: яка кампанія приносить дохід, де в checkout губляться покупці, який товар генерує найбільше кинутих кошиків.

GA4 використовує event-based модель замість сесій Universal Analytics. Це означає: кожна дія покупця — окрема подія з параметрами. Налаштувати їх можна через GTM, hardcode або платформні плагіни. Нижче — повний список подій, структура dataLayer, приклади коду й чеклист перевірки.

Зміст

Які ecommerce події GA4 потрібно налаштувати

GA4 має стандартизований набір e-commerce подій. Використовуйте саме ці назви — інакше GA4 не розпізнає їх як e-commerce і дані не потраплять у звіт Monetization.

ПодіяКоли спрацьовуєОбов’язкові параметри
view_itemВідкриття картки товаруitems[] (item_id, item_name, price)
add_to_cartДодавання товару в кошикitems[], value, currency
remove_from_cartВидалення товару з кошикаitems[], value, currency
view_cartПерегляд сторінки кошикаitems[], value, currency
begin_checkoutПочаток оформленняitems[], value, currency
ПодіяКоли спрацьовуєОбов’язкові параметри
add_shipping_infoВибір способу доставкиitems[], shipping_tier
add_payment_infoВибір методу оплатиitems[], payment_type
purchaseУспішна оплатаtransaction_id, value, currency, items[]
refundПовернення коштівtransaction_id, value, items[]
view_item_listПерегляд каталогу/категоріїitems[], item_list_name

Мінімальний набір для базової аналітики: view_item, add_to_cart, begin_checkout, purchase. Це дасть воронку конверсій і revenue attribution. Решту подій додавайте на другому етапі — вони збагатять аналіз, але без перших чотирьох звіти будуть порожніми. Базове налаштування GA4 описане у нашому гайді по GA4.

Структура dataLayer для кожної ecommerce події

DataLayer — JavaScript-об’єкт, через який ваш сайт передає дані в GTM, а GTM — у GA4. Структура має відповідати специфікації Google, інакше GA4 проігнорує параметри.

dataLayer для add_to_cart

Ця подія спрацьовує при натисканні кнопки «Додати в кошик». Важливо: очищайте ecommerce-об’єкт перед кожним push, щоб дані попередньої події не змішалися з поточною.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: "add_to_cart",
  ecommerce: {
    currency: "UAH",
    value: 1299.00,
    items: [{
      item_id: "SKU-12345",
      item_name: "Навушники Sony WH-1000XM5",
      item_category: "Електроніка",
      item_brand: "Sony",
      price: 1299.00,
      quantity: 1
    }]
  }
});

dataLayer для purchase

Purchase — найважливіша подія. Без неї GA4 не рахує дохід. Обов’язковий параметр transaction_id має бути унікальним для кожного замовлення — це запобігає дублюванню транзакцій при оновленні сторінки подяки.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: "purchase",
  ecommerce: {
    transaction_id: "ORD-2026-78432",
    value: 2598.00,
    tax: 433.00,
    shipping: 0,
    currency: "UAH",
    coupon: "SPRING10",
    items: [{
      item_id: "SKU-12345",
      item_name: "Навушники Sony WH-1000XM5",
      item_category: "Електроніка",
      item_brand: "Sony",
      price: 1299.00,
      quantity: 2,
      coupon: "SPRING10"
    }]
  }
});

dataLayer для begin_checkout, add_shipping_info, add_payment_info

Ці три події формують воронку checkout. Вони дозволяють побачити, де саме користувач кидає оформлення: на етапі доставки, оплати чи ще раніше. Структура ідентична add_to_cart, але з додатковими параметрами.

// begin_checkout
dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: "begin_checkout",
  ecommerce: {
    currency: "UAH",
    value: 2598.00,
    items: [/* масив товарів */]
  }
});

// add_shipping_info — після вибору доставки
dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: "add_shipping_info",
  ecommerce: {
    currency: "UAH",
    value: 2598.00,
    shipping_tier: "Nova Poshta - відділення",
    items: [/* масив товарів */]
  }
});

// add_payment_info — після вибору оплати
dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: "add_payment_info",
  ecommerce: {
    currency: "UAH",
    value: 2598.00,
    payment_type: "LiqPay",
    items: [/* масив товарів */]
  }
});

Для обробки callback від платіжної системи використовуйте webhook-інтеграцію — це надійніший спосіб, ніж client-side тригер на сторінці подяки.

Налаштування ecommerce подій через Google Tag Manager

GTM — стандартний інструмент для передачі dataLayer-подій у GA4. Для кожної ecommerce події потрібні: тригер (Custom Event), тег (GA4 Event), параметри (ecommerce items).

Покрокове налаштування в GTM

  • Крок 1: Створіть тригер Custom Event. Trigger Type → Custom Event → Event name: add_to_cart (точна назва з dataLayer.push). Повторіть для purchase, begin_checkout, view_item та інших подій.
  • Крок 2: Створіть тег GA4 Event. Tag Type → Google Analytics: GA4 Event → Event Name: {{Event}} (динамічно підставить назву з тригера). У блоці More Settings → Ecommerce → увімкніть «Send Ecommerce data» і оберіть Data Layer.
  • Крок 3: Один тег на всі e-commerce події. Замість 10 окремих тегів створіть один із динамічною назвою. Тригер — Group: усі Custom Event тригери e-commerce подій. Це спрощує підтримку і зменшує ризик помилок.
  • Крок 4: Тестування в GTM Preview. Увімкніть Preview Mode, пройдіть повний цикл покупки. Перевірте, що кожна подія з’являється в Tag Assistant із правильними параметрами. Зверніть увагу на items[] — якщо масив порожній, GA4 не зарахує транзакцію.

Для відстеження подій без GTM або як доповнення до client-side — розгляньте server-side tracking. Він передає події напряму з backend у Measurement Protocol GA4, оминаючи ad-блокери.

Реалізація для WooCommerce та Shopify

WooCommerce

Для WooCommerce є три підходи: плагін, кастомний код, або GTM + dataLayer. Плагіни GTM4WP (безкоштовний) і Analyzify (платний) генерують dataLayer-об’єкти автоматично для всіх e-commerce подій. GTM4WP покриває 90% потреб і коректно працює із стандартними WooCommerce-хуками.

Кастомний підхід: хуки woocommerce_add_to_cart, woocommerce_thankyou, woocommerce_before_checkout_form для вставки dataLayer.push() у відповідних місцях. Цей варіант дає повний контроль, але вимагає підтримки при оновленні WooCommerce. Вибір між WooCommerce та Shopify — у нашому порівнянні платформ.

Shopify

Shopify має вбудовану інтеграцію з GA4 через канал Google & YouTube. Вона автоматично відправляє view_item, add_to_cart, begin_checkout і purchase. Проблема: Shopify не дає повного контролю над checkout (тільки Shopify Plus), тому add_shipping_info і add_payment_info потребують Shopify Pixels або Customer Events API.

Для кастомних подій у Shopify використовуйте Web Pixels API (Shopify Pixels): sandbox-середовище із доступом до checkout events, яке працює без GTM. Альтернатива — Elevar або Littledata як middleware між Shopify і GA4.

5 типових помилок при налаштуванні ecommerce подій GA4

Ці помилки зустрічаються у 70%+ магазинів. Кожна з них спотворює дані і робить звіти марними.

  • Дублювання purchase при оновленні сторінки подяки. Рішення: перевіряйте transaction_id через cookie або sessionStorage. Якщо транзакція вже відправлена — не робіть повторний push. GA4 також де-дублює за transaction_id, але з затримкою до 24 годин.
  • Відсутність ecommerce: null перед push. Без очищення попередній ecommerce-об’єкт залишається в dataLayer, і наступна подія підхоплює його items[]. Результат — purchase із товарами, які клієнт переглядав, а не купив.
  • Невідповідність currency. Value у гривнях, currency — «USD». GA4 конвертує суми за внутрішнім курсом, і revenue-звіт показує фантазійні цифри. Завжди передавайте currency, що відповідає реальній валюті ціни.
  • Порожній items[] у purchase. Якщо масив items порожній, GA4 зарахує транзакцію з $0 revenue. Дохід у звітах буде, але без прив’язки до товарів — звіт Item Revenue покаже нулі.
  • Тригер purchase на redirect-сторінці платіжної системи. Якщо оплата проходить на стороні LiqPay, Stripe або PayPal — користувач повертається на Thank You сторінку через redirect. Подія purchase має спрацьовувати на цій сторінці, а не перед переходом на платіжний шлюз. Для надійності — використовуйте логування webhook від платіжної системи як backup-тригер.

Чеклист валідації ecommerce подій

Пройдіть цей список після кожної зміни в трекінгу. Одна помилка в purchase event — і весь revenue-звіт за місяць буде неточним.

  • GTM Preview Mode показує всі 4 базові події (view_item, add_to_cart, begin_checkout, purchase) під час тестового замовлення.
  • Кожна подія містить непорожній items[] із item_id, item_name, price, quantity.
  • purchase має унікальний transaction_id, value > 0, currency відповідає валюті магазину.
  • GA4 DebugView (Admin → DebugView) показує події в реальному часі з правильними параметрами.
  • Через 24–48 годин дані з’являються у звітах Monetization → Ecommerce purchases та Monetization → Checkout journey.
  • Revenue у GA4 збігається з revenue у бекенді магазину (допустима похибка ±5% через ad-блокери).
  • Подія purchase не дублюється при оновленні Thank You сторінки (перевірте через Realtime → Event count).
  • Перед кожним dataLayer.push стоїть dataLayer.push({ ecommerce: null }).

Для магазинів із високим трафіком (1 000+ транзакцій/міс) рекомендуємо додатково підключити Meta CAPI для паралельного відстеження конверсій у Facebook Ads. А для моніторингу самих подій без GTM — використовуйте альтернативні інструменти трекінгу подій.

Якщо ваш сайт працює за CDN — переконайтеся, що кешування не впливає на dataLayer. Детальніше про правильне кешування — у гайді Cloudflare для сайту. А швидкість завантаження скриптів трекінгу прямо впливає на Core Web Vitals.

FAQ

Чи потрібен GTM для ecommerce подій GA4?

Не обов’язково, але рекомендовано. GTM дозволяє змінювати трекінг без залучення розробника і деплою коду. Альтернативи: gtag.js (hardcode), Shopify вбудована інтеграція, або плагіни (GTM4WP для WooCommerce). Для серверного підходу є Measurement Protocol GA4.

Чому GA4 не показує revenue у звітах Monetization?

Три найчастіші причини: purchase event не містить value або currency; items[] порожній; подія не проходить через GA4 тег (перевірте GTM Preview). Також дані з’являються з затримкою 24–48 годин — DebugView покаже події одразу, але звіти Monetization оновлюються із запізненням.

Як перевірити, чи правильно працює purchase event?

Три інструменти: GTM Preview Mode (показує dataLayer у реальному часі), GA4 DebugView (Admin → DebugView, потрібно ввімкнути debug_mode=true), Google Analytics Debugger — розширення для Chrome. Зробіть тестове замовлення і переконайтеся, що transaction_id, value та items[] заповнені коректно.

Як уникнути дублювання транзакцій у GA4?

Використовуйте унікальний transaction_id для кожного замовлення. GA4 автоматично де-дублює транзакції з однаковим transaction_id протягом 24 годин. Додатковий захист: зберігайте відправлений transaction_id у sessionStorage і перевіряйте перед повторним push на Thank You сторінці.

Чи враховує GA4 ecommerce дані з ad-блокерами?

Ні. Client-side GA4 трекінг блокується ad-блокерами у 15–30% користувачів. Рішення: server-side tracking через Measurement Protocol або server-side GTM. Це надсилає події з вашого сервера, оминаючи браузерні блокувальники.