Блог

← Усі статті

Як налаштувати GA4 Ecommerce Tracking у Google Tag Manager

1 квітня 2026

TL;DR: GA4 ecommerce tracking вимагає структурованих data layer подій (view_item, add_to_cart, purchase тощо) з масивом items, що містить деталі товарів. У GTM створіть GA4 Event тег для кожної ecommerce події з увімкненою опцією "Send Ecommerce Data", запустіть його Custom Event тригером і протестуйте в GA4 DebugView. Shopify та WooCommerce потребують плагінів або кастомного коду для data layer. AI Agent у GTM Event Helper може згенерувати повне ecommerce налаштування для GA4, Meta, TikTok та інших платформ за хвилини.

GA4 ecommerce tracking дає повну картину взаємодії покупців з вашим магазином: які товари вони переглядають, що додають до кошика і що купують. Без нього звіти GA4 показують перегляди сторінок та сесії, але нічого про дохід, ефективність товарів чи відмови на етапі оформлення замовлення.

Налаштування складніше за базовий event tracking, оскільки ecommerce події вимагають структурованих даних про товари в data layer. Цей гайд охоплює кожен крок: назви подій, які очікує GA4, структуру data layer, конфігурацію тегів у GTM, платформо-специфічне налаштування для Shopify та WooCommerce, і тестування.

Які існують GA4 ecommerce події?

GA4 визначає конкретний набір назв ecommerce подій. Використання саме цих назв обов'язкове — вони активують вбудовані звіти Monetization, воронки покупок та предиктивні аудиторії. Кастомні назви подій не заповнюють ecommerce звіти.

Назва подіїКоли запускатиОбов'язкові параметри
view_item_listКористувач бачить список товарів (сторінка категорії, результати пошуку)items
select_itemКористувач натискає на товар у спискуitems
view_itemКористувач переглядає сторінку товаруitems, currency, value
add_to_cartКористувач додає товар у кошикitems, currency, value
remove_from_cartКористувач видаляє товар із кошикаitems, currency, value
view_cartКористувач переглядає кошикitems, currency, value
begin_checkoutКористувач починає оформлення замовленняitems, currency, value
add_payment_infoКористувач вводить платіжну інформаціюitems, currency, value
add_shipping_infoКористувач вводить інформацію про доставкуitems, currency, value
purchaseКористувач завершує транзакціюitems, transaction_id, currency, value
refundОформлено повернення коштівitems, transaction_id, currency, value

Не обов'язково впроваджувати всі події одразу. Почніть з основної воронки: view_item, add_to_cart, begin_checkout та purchase. Додайте view_item_list і select_item, коли базові події працюватимуть.

Як працює GA4 ecommerce data layer?

GA4 ecommerce події спираються на конкретну структуру data layer. Кожен ecommerce push повинен містити назву події та об'єкт ecommerce з масивом items. Кожен елемент масиву представляє один товар.

Стандартна структура:

dataLayer.push({ ecommerce: null }); // Очистити попередні ecommerce дані
dataLayer.push({
  event: "view_item",
  ecommerce: {
    currency: "USD",
    value: 29.99,
    items: [
      {
        item_id: "SKU-12345",
        item_name: "Blue Running Shoes",
        item_brand: "SportBrand",
        item_category: "Footwear",
        item_category2: "Running",
        item_variant: "Blue / Size 10",
        price: 29.99,
        quantity: 1,
        index: 0,
        item_list_id: "related_products",
        item_list_name: "Related Products"
      }
    ]
  }
});

Критичне правило: завжди очищайте ecommerce об'єкт перед новим push. Рядок dataLayer.push({ ecommerce: null }) запобігає потраплянню старих даних товарів з одної події в наступну. Без цього GTM може об'єднати старі та нові ecommerce об'єкти, надіславши некоректні дані в GA4.

Масив items підтримує до 200 товарів на подію. Кожен товар має стандартні поля:

Як відправити дані товарів у data layer?

Data layer push має відбуватися на вашому сайті, а не в GTM. Backend або frontend код вашого сайту відповідає за вставку коректних даних товарів у потрібний момент. GTM лише читає з data layer — він не генерує дані товарів.

Три поширені підходи:

  1. Server-side rendering. Ваша CMS або backend-шаблон вставляє блок <script> з викликом dataLayer.push() при завантаженні сторінки. Це найнадійніший метод для подій view_item та view_item_list, оскільки дані доступні до завантаження GTM.
  2. JavaScript event listeners. Для дій, ініційованих користувачем (наприклад, add_to_cart), додайте обробник кліку на кнопку "Додати в кошик", який витягує дані товару з DOM та надсилає їх у data layer. Це вимагає доступу до JavaScript сайту.
  3. Плагіни платформ. Shopify, WooCommerce, Magento та інші платформи мають плагіни, які автоматично надсилають data layer pushes. Детальніше в розділах нижче.

Якщо ви не можете змінити вихідний код сайту, можна використати GTM Custom HTML тег для витягування даних товарів з DOM сторінки. Цей підхід крихкий — він залежить від стабільності HTML-структури — але працює як останній варіант. AI Agent у GTM Event Helper використовує цей підхід розумно: аналізує структуру сторінки та генерує скрипти, що динамічно читають дані товарів з DOM-елементів замість хардкодингу значень.

Як створити GA4 ecommerce теги в GTM?

Для кожної ecommerce події потрібен окремий GA4 Event тег у GTM. Ключова відмінність від звичайних GA4 подій: потрібно увімкнути чекбокс "Send Ecommerce Data", який вказує тегу автоматично читати об'єкт ecommerce з data layer.

Покрокова інструкція для кожного тегу:

  1. У GTM перейдіть до Tags → New
  2. Tag Type: Google Analytics: GA4 Event
  3. Measurement ID: ваш G-XXXXXXXXXX
  4. Event Name: точна назва GA4 ecommerce події (наприклад, view_item, add_to_cart, purchase)
  5. Розгорніть More Settings → Ecommerce та поставте галочку "Send Ecommerce data". Оберіть "Data Layer" як джерело даних.
  6. Trigger: створіть Custom Event тригер, де назва події збігається з data layer push (наприклад, Event Name дорівнює view_item)

Вам не потрібно вручну маппити параметри товарів — опція "Send Ecommerce data" автоматично зчитує весь масив ecommerce.items. Додаткові event parameters потрібні лише якщо ви хочете передати дані поза ecommerce об'єктом.

Як налаштувати view_item та view_item_list події?

view_item спрацьовує на сторінках товарів. view_item_list спрацьовує на сторінках категорій, результатах пошуку або будь-якій сторінці з кількома товарами.

view_item data layer push:

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: "view_item",
  ecommerce: {
    currency: "USD",
    value: 49.99,
    items: [{
      item_id: "SKU-789",
      item_name: "Wireless Headphones",
      item_brand: "AudioTech",
      item_category: "Electronics",
      item_category2: "Audio",
      price: 49.99,
      quantity: 1
    }]
  }
});

view_item_list data layer push:

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: "view_item_list",
  ecommerce: {
    item_list_id: "category_electronics",
    item_list_name: "Electronics",
    items: [
      {
        item_id: "SKU-789",
        item_name: "Wireless Headphones",
        price: 49.99,
        index: 0,
        item_list_id: "category_electronics",
        item_list_name: "Electronics"
      },
      {
        item_id: "SKU-790",
        item_name: "Bluetooth Speaker",
        price: 34.99,
        index: 1,
        item_list_id: "category_electronics",
        item_list_name: "Electronics"
      }
    ]
  }
});

Поле index повідомляє GA4 позицію кожного товару в списку. Це забезпечує роботу звіту "Product List Performance" у GA4, який показує, з яких позицій списку найбільше кліків та доходу.

У GTM створіть два теги: один для view_item і один для view_item_list. Обидва мають однакову конфігурацію — GA4 Event тег з увімкненим "Send Ecommerce data" — але різні Custom Event тригери.

Як налаштувати add_to_cart та remove_from_cart події?

Ці події відстежують зміни в кошику. Data layer push спрацьовує, коли користувач натискає "Додати в кошик" або "Видалити" на елементі кошика.

add_to_cart data layer push:

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: "add_to_cart",
  ecommerce: {
    currency: "USD",
    value: 49.99,
    items: [{
      item_id: "SKU-789",
      item_name: "Wireless Headphones",
      item_brand: "AudioTech",
      item_category: "Electronics",
      price: 49.99,
      quantity: 1
    }]
  }
});

remove_from_cart використовує ідентичну структуру — просто змініть назву події на remove_from_cart.

Поширені помилки з подіями кошика:

Як налаштувати подію purchase?

Подія purchase — найважливіша ecommerce подія. Вона заповнює звіти доходу GA4, дані конверсій та передається в Google Ads Smart Bidding. Некоректно налаштована purchase подія означає неточні дані про дохід у всьому аналітичному стеку.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: "purchase",
  ecommerce: {
    transaction_id: "T-20260401-001",
    currency: "USD",
    value: 109.97,
    tax: 8.80,
    shipping: 5.99,
    coupon: "SPRING20",
    items: [
      {
        item_id: "SKU-789",
        item_name: "Wireless Headphones",
        item_brand: "AudioTech",
        item_category: "Electronics",
        price: 49.99,
        quantity: 2,
        coupon: "SPRING20"
      },
      {
        item_id: "SKU-456",
        item_name: "USB-C Cable",
        item_category: "Accessories",
        price: 9.99,
        quantity: 1
      }
    ]
  }
});

Ключові вимоги до purchase події:

У GTM тег purchase ідентичний іншим ecommerce тегам: GA4 Event тег, event name purchase, увімкнений "Send Ecommerce data", тригер Custom Event де event name дорівнює purchase.

Як протестувати ecommerce tracking у GA4 DebugView?

Тестування ecommerce подій складніше за базові події, оскільки потрібно перевірити масив items, а не лише назву події.

  1. Увімкніть GTM Preview mode. У GTM натисніть Preview та підключіться до сайту.
  2. Пройдіть воронку покупки. Перегляньте товар, додайте до кошика, перейдіть до оформлення, завершіть покупку (використайте тестове замовлення).
  3. Перевірте Tag Assistant. На кожному кроці переконайтеся, що правильний GA4 Event тег спрацював. Клікніть на тег для перевірки — шукайте об'єкт ecommerce та переконайтеся, що масив items містить правильні товари, ціни та кількості.
  4. Відкрийте GA4 DebugView. Перейдіть до GA4 Admin → DebugView. Увімкніть debug mode за допомогою GA Debugger розширення або додавши ?debug_mode=true до URL.
  5. Перевірте кожну подію. Клікніть на кожну ecommerce подію в таймлайні DebugView. Розгорніть параметри та перевірте:
    • Масив items має правильну кількість товарів
    • Кожен товар має item_id, item_name та price
    • currency та value присутні і коректні
    • Для purchase: transaction_id унікальний

Типові проблеми DebugView:

Як налаштувати ecommerce tracking на Shopify?

Shopify не надсилає GA4-сумісні data layer події нативно. Потрібне стороннє рішення або кастомний код. Поширені підходи:

  1. Нативна GA4 інтеграція Shopify (обмежена). Shopify пропонує вбудований Google channel, який надсилає ecommerce дані безпосередньо в GA4 без GTM. Охоплює базові події (view_item, add_to_cart, purchase), але не дає контролю над параметрами і не працює з GTM.
  2. GTM + data layer додаток. Додатки типу "Google Tag Manager for Shopify" (від Elevar, Analyzify та інших) додають data layer pushes для всіх ecommerce подій. Рекомендований підхід, бо дає повний контроль у GTM.
  3. Кастомний Liquid код. Якщо не хочете використовувати додаток, можна додати data layer pushes безпосередньо в Liquid-шаблони Shopify. Потрібно змінити theme.liquid, product.liquid та checkout через Additional Scripts (для purchase подій). Потужний, але складніший у підтримці при оновленнях теми.

Незалежно від підходу, конфігурація GTM залишається однаковою: GA4 Event теги з увімкненим "Send Ecommerce data", запущені Custom Event тригерами, що відповідають назвам подій data layer.

Обмеження Shopify checkout: Shopify обмежує JavaScript на сторінках checkout для магазинів без Shopify Plus. Для магазинів не на Plus трекінг покупок зазвичай використовує поле Additional Scripts у Settings → Checkout, яке виконується на сторінці підтвердження замовлення.

Як налаштувати ecommerce tracking на WooCommerce?

WooCommerce має потужнішу GTM інтеграцію завдяки open-source екосистемі. Стандартний підхід:

  1. Встановіть data layer плагін. "GTM4WP" (GTM for WordPress) від Thomas Geiger — найпопулярніший безкоштовний варіант. Він надсилає GA4-сумісні data layer події для всіх стандартних ecommerce дій автоматично.
  2. Налаштуйте GTM4WP. Після встановлення перейдіть до Settings → Google Tag Manager → Integration та увімкніть "WooCommerce" інтеграцію. Оберіть формат data layer: "GA4" (не "Universal Analytics").
  3. Створіть GTM теги. GTM4WP надсилає події зі стандартними назвами GA4, тому налаштування GTM таке саме, як описано раніше. Створіть GA4 Event тег для кожної події з увімкненим "Send Ecommerce data".

GTM4WP виконує всю важку роботу: витягує дані товарів з PHP-об'єктів WooCommerce та рендерить data layer pushes в HTML сторінки. Події типу view_item спрацьовують при завантаженні сторінки, а add_to_cart — через JavaScript при кліку на кнопку (включно з AJAX add-to-cart).

Обробка варіативних товарів. Варіативні товари WooCommerce (розмір, колір) потребують окремої уваги. GTM4WP v1.18+ надсилає дані обраної варіації, коли користувач вибирає опції на сторінці товару. Перевірте в Tag Assistant — поле item_variant має оновлюватися при виборі іншої варіації.

Які поширені помилки GA4 ecommerce tracking?

Чи є швидший спосіб налаштувати ecommerce tracking?

Ручне налаштування ecommerce tracking включає написання data layer pushes, створення кількох GTM тегів і тригерів, маппінг параметрів та тестування кожної події окремо. Для повної воронки з кількома платформами (GA4 + Meta + TikTok) налаштування може зайняти години.

AI Agent у GTM Event Helper автоматизує цей процес:

  1. Оберіть ecommerce події. Виберіть з пресетів: view_item, add_to_cart, purchase, або дозвольте AI запропонувати події на основі типу вашого сайту.
  2. Вкажіть елементи на сторінці. Для кожної події клікніть відповідний елемент (картка товару, кнопка "Додати в кошик", форма checkout). Розширення зафіксує URL та контекст елемента.
  3. AI генерує скрипти витягування. AI аналізує DOM вашої сторінки та створює скрипти, що динамічно витягують дані товарів — назву, ціну, SKU, кількість — зі структури сторінки. Жодних захардкоджених значень.
  4. Мультиплатформені теги одним пакетом. Оберіть платформи — GA4, Meta Pixel, TikTok Pixel, Pinterest Tag, Snapchat Pixel — і wizard створить усі теги та тригери у вашому GTM workspace через API. Один клік створює data layer push, Custom Event тригер та платформо-специфічні теги для кожної обраної події.

Wizard автоматично вирішує ecommerce-специфічні складнощі: очищення об'єкта ecommerce, структуру масиву items, прапорець sendEcommerceData у GA4 тегах та коректний маппінг тригерів. Те, що займає досвідченому аналітику 2-3 години вручну, виконується менш ніж за 10 хвилин з wizard.

AI Agent підтримує ecommerce події для GA4, Meta, TikTok, Pinterest та Snapchat — з єдиного процесу налаштування. Кожна платформа отримує свій правильно відформатований конверсійний тег.

Налаштуйте ecommerce-трекінг для GA4, Meta та TikTok — за хвилини.

Встановити GTM Event Helper

Зовнішні ресурси

Пов'язані статті

← Усі статті · Головна · Політика конфіденційності · Контакти