Відстеження електронної торгівлі в GA4 через GTM: архітектурні вимоги та покрокове налаштування

При налаштуванні електронної торгівлі в GA4 найменше відхилення в структурі Data Layer призводить до того, що звіти про монетизацію залишаються порожніми або показують неправильні цифри. Якщо дані з сайту надходять «криво», жодні маніпуляції всередині GTM не врятують вашу аналітику. 

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

1. Основи подієвої моделі та вимоги до Data Layer
2. Роль Google Tag Manager
3. Архітектура Data Layer GA4: стандарти та приклади коду
4. Фінансові метрики: валюта і вартість
5. Налаштування Google Tag Manager
6. Верифікація та налагодження (Debugging)

Основи подієвої моделі та вимоги до Data Layer

В основі Google Analytics 4 аналітика побудована на подіях (Events) і параметрах.

В електронній комерції шлях користувача відстежується за допомогою стандартних ecommerce-подій. Кожна ключова дія на сайті, від інтересу до продукту до оплати, фіксується у вигляді окремої події:

• view_item — перегляд товару;

• add_to_cart — додавання до кошика;

• purchase — успішна покупка.

Щоб такі події коректно оброблялися в GA4, Data Layer повинен бути стандартизований.

Для цього використовується єдиний підхід до передачі даних про товари.

Основні вимоги:

1. Всі взаємодії з товарами передаються через один загальний об’єкт — ecommerce.

2. Всередині цього об’єкта обов’язково повинен знаходитися масив items.

Роль Google Tag Manager

Google Tag Manager (GTM) — це посередник між сайтом і Google Analytics 4, який відповідає за зчитування, обробку та передачу даних в систему аналітики. Його основні завдання:

• зчитування даних з Data Layer;

• форматування їх відповідно до вимог GA4;

• відправка даних в аналітичну систему.

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

Google Tag Manager зчитує і передає дані, але не виправляє їх. Його завдання — взяти інформацію з Data Layer (наприклад, ID товару, ціну, кількість) і відправити її в GA4.

Якщо ж Data Layer сформований з помилками — в масиві items пропущені обов’язкові параметри, порушена структура — GTM не зможе їх виправити. Він просто передасть биті дані, і відстеження буде працювати некоректно.

На етапі розробки аналітик повинен вимагати від розробників суворого дотримання схеми Data Layer. 

Підготовчі етапи установки

Перед початком налаштування ecommerce-відстеження в Google Tag Manager необхідно виконати кілька обов’язкових підготовчих кроків. 

Крок 1. Отримання ідентифікатора потоку даних GA4 

У створеному акаунті GA4 знайдіть ідентифікатор потоку даних (Measurement ID). Він має формат G-XXXXXXXXXX. Ідентифікатор є ключовим сполучним елементом, який гарантує, що надіслані через GTM дані з сайту потраплять у потрібний потік GA4 і будуть коректно зафіксовані в аналітиці.

Крок 2. Встановлення контейнера GTM

Код контейнера Google Tag Manager повинен бути коректно встановлений на всіх сторінках сайту.

Важливо: переконайтеся, що глобальний об’єкт Data Layer ініціалізується до завантаження самого контейнера GTM.

Код ініціалізації Data Layer виглядає так: 

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

Крок 3. Створення базового тегу конфігурації GA4

Це — стартова точка запуску Google Tag Manager.

У контейнері GTM необхідно створити базовий тег Google Tag. Саме він використовує Measurement ID, щоб встановити початковий зв’язок між сайтом і GA4.

Налаштуйте його на спрацьовування за тригером Initialization — All Pages. Це гарантує, що тег завантажиться на кожній сторінці, а ініціалізація GA4 відбудеться раніше за будь-які інші теги та події.

Архітектура Data Layer GA4: стандарти та приклади коду

Для коректної передачі даних електронної комерції в Google Analytics 4 потрібно суворо дотримуватися стандартної схеми іменування подій і параметрів, встановленої Google.

Всі дані ecommerce відправляються в Data Layer за допомогою спеціальної функції — dataLayer.push().

Кожен об’єкт, що відправляється, повинен містити як мінімум два елементи:

• ім’я події — наприклад, 'view_item', 'add_to_cart', 'begin_checkout', 'purchase';

• об’єкт ecommerce, всередині якого знаходяться всі деталі транзакції.

Ключовий елемент — це уніфікований масив items. Він містить один або кілька об’єктів з детальною інформацією про товари.

Використання однакових назв і типів параметрів всередині масиву items на всій воронці продажів дозволяє GA4 коректно «склеювати» дані. Завдяки цьому система може точно відстежити шлях клієнта: від першого перегляду до додавання в кошик і покупки.

Тому необхідно чітко розрізняти два типи параметрів:

Приклади Data Layer для ключових подій воронки

Нижче — ключові події електронної торгівлі та приклади відповідної структури Data Layer.

Перегляд списку товарів (view_item_list)

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

dataLayer.push({
  event: 'view_item_list',
  ecommerce: {
    item_list_id: 'home_page',
    item_list_name: 'Homepage',
    items:
  }
});

Перегляд картки товару (view_item)

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

Аналіз цієї події дає змогу оцінити:

• наскільки товар привертає увагу в списках і добірках;

• ефективність оформлення картки — описів, фотографій, характеристик і ціни.

dataLayer.push({ ecommerce: null });
dataLayer.push({ 
  event:'view_item',
  ecommerce: {
    items: [{
      item_name: 'Назва товару',
      item_id: 'ID товару',
      price: 25.00, // Ціна
      currency: 'Валюта',
      item_brand: 'Бренд товару',
      item_category: 'Категорія',
      quantity: 1 // Кількість товару
    }]
  }

Значення параметрів:

Взаємодія з кошиком (add_to_cart)

Подія спрацьовує при додаванні товару в кошик і є одним з ключових індикаторів наміру купити (intent-to-buy). 

Обов’язкова вимога для коректного відстеження — включення параметра quantity для кожного продукту.   

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({ 
  event:'add_to_cart',
  ecommerce: {
    items: [{
      item_name: 'Назва товару',
      item_id: 'ID товару',
      price: 25.00, // Ціна
      currency: 'Валюта',
      item_brand: 'Бренд товару',
      item_category: 'Категорія',
      quantity: 2 // Кількість товару
    }]
  }
});

Завершення покупки (purchase) 

Ця подія — кінцева точка воронки.  Вона повинна відправлятися тільки один раз — на сторінці підтвердження або успішного оформлення замовлення. Подія purchase повинна містити повний набір транзакційних параметрів.

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event:'purchase',
  new_customer: 'true', // Тип клієнта (наприклад, 'true' — новий, 'false' — поточний
  email: 'email@domain.com',
  phone_number: '+380971234567',
  ecommerce: {
  transaction_id: 'Унікальний ідентифікатор транзакції',
  value: 50.00, // Загальна вартість транзакції
  currency: 'Валюта',
    items: [{
      item_name: 'Назва товару',
      item_id: 'ID товару',
      price: 25.00, // Ціна
      currency: 'Валюта',
      item_brand: 'Бренд товару',
      item_category: 'Категорія',
      quantity: 2 // Кількість товару
    },{
      ... // У тому ж форматі передаються дані всіх наступних товарів у замовленні
    }]
  }
});

Фінансові метрики: валюта і вартість

Щоб у звітах GA4 відображалися коректні дані про доходи, потрібно дотримуватися вимог до передачі фінансових параметрів — currency (валюта) і value (загальна вартість).

Як працювати з мультивалютністю

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

Типова помилка — жорстко задавати валюту безпосередньо в налаштуваннях тегу GTM. Якщо зафіксувати одну валюту в тезі, GA4 буде вважати всі продажі саме в ній, ігноруючи реальний вибір користувача на сайті. У підсумку, якщо клієнт купив товар за 100 євро, а в тезі зашиті долари, система запише дохід як 100 доларів.

Змінна currency в GTM повинна автоматично підтягуватися з Data Layer для кожної події. Це означає, що GTM при відправці події кожен раз отримує актуальне значення валюти з об’єкта ecommerce і передає його в GA4 без ручних підстановок.

Нижче наведу основні ecommerce події GA4 і необхідні параметри Data Layer.  

Налаштування Google Tag Manager

Після того як розробники впровадили коректні коди dataLayer.push() для всіх комерційних подій і ви перевірили їх роботу, налаштування переходить до аналітика і виконується в інтерфейсі Google Tag Manager.

Для тегу події GA4 достатньо:

1. Відкрити секцію додаткові налаштування (More Settings).

2. Перейти до пункту електронна торгівля (ecommerce).

3. Поставити галочку у віконці «Надсилати дані електронної торгівлі» (Send Ecommerce data).

4. В якості джерела даних вибрати Data Layer.

Система автоматично розпізнає стандартний об’єкт ecommerce і масив items в коді сайту і сама розкладає їх по потрібних поличках в звітах GA4. Це виключає людський фактор і помилки при ручному зіставленні змінних.

Створення змінних рівня даних (Data Layer Variables)

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

В інтерфейсі GTM перейдіть до розділу «Змінні» (Variables). 

Прокрутіть до блоку «Користувацькі змінні» і натисніть «Створити».

У налаштуваннях виберіть тип Data Layer Variable.

У полі «Ім’я змінної рівня даних» вкажіть точний шлях до значення через крапку.

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

Наприклад, шлях ecommerce.value означає: звернутися до об’єкта ecommerce і взяти значення параметра value, що знаходиться всередині нього.

Список рекомендованих змінних

Для повноцінної роботи з ecommerce я рекомендую відразу створити чотири базові змінні. 

Створення користувацьких тригерів (Custom Event Triggers)

Тригер визначає точний момент спрацьовування тегу. 

Для подій електронної торгівлі тригер завжди прив’язується до користувацької події (Custom Event) з Data Layer, ім’я якої відповідає імені, вказаному в dataLayer.push().   

Налаштування тригера на прикладі події покупки

1. Перейдіть до розділу «Тригери» і натисніть «Створити».

2. Виберіть тип тригера «Події користувача».

3. У полі «Ім’я тригера» вкажіть ім’я події строго в тому ж вигляді, в якому воно передається розробниками в Data Layer.

Для події покупки це, як правило, purchase. Тут неприпустимі будь-які відхилення.

Налаштування тегів подій GA4 (GA4 Event Tags)

Після налаштування тригера необхідно створити сам тег події — «контейнер» даних, який відправить інформацію в Google Analytics 4.

Для кожної дії створюється окремий тег.

Технічні кроки на прикладі події покупки (purchase)

1. Створіть новий тег і виберіть тип Google Analytics: GA4 Event.

2. Вкажіть свій Measurement ID.

3. Вкажіть стандартне ім’я події для GA4 (наприклад, purchase).

Зіставлення параметрів 

Щоб GA4 не просто зафіксував факт покупки, а зрозумів, що було куплено і на яку суму, необхідно пов’язати створені раніше змінні з полями тегу.

Ця дія виконується всередині налаштувань створеного вами тегу події (наприклад, purchase).

1. Відкрийте налаштування тегу і розгорніть блок «Параметри події» (Event Parameters).

2. Натисніть кнопку «Додати параметр» (Add parameter) для створення нового рядка.

Чітке розділення параметрів гарантує, що дані не загубляться під час передачі. Це працює за принципом «Ключ — Значення».

Приклад зіставлення змінних Data Layer в тезі purchase:

Після заповнення параметрів збережіть тег і прив’яжіть до нього тригер purchase. При спрацьовуванні коду на сайті GTM підраховує дані, упаковує їх у потрібні параметри і відправляє в звіти GA4.

Верифікація та налагодження (Debugging)

Верифікація підтверджує, що дані не тільки відправлені GTM, але й отримані GA4 у коректному форматі. Для точної локалізації помилок процес налагодження необхідно розділяти на два послідовних етапи.

Етап 1. Подвійна перевірка в GTM preview mode

Режим попереднього перегляду GTM (Tag Assistant) дозволяє переконатися, що теги спрацювали, а змінні рівня даних успішно витягують необхідні значення.   

Процес перевірки

1. Активуйте режим попереднього перегляду GTM, вказавши URL сайту.

2. Виконайте тестові дії, імітуючи шлях користувача.  

3. На вкладці Data Layer в панелі Tag Assistant перевірте:

• чи відбулася подія dataLayer.push() (наприклад, purchase);
• чи правильно сформована структура JSON, включаючи об'єкт ecommerce і масив items.

4. На вкладці Variables перевірте, чи отримують всі створені Data Layer Variables коректні значення.

5. На вкладці Tags — чи спрацював тег події GA4 і чи був він активований відповідним тригером.

Етап 2. Фінальна верифікація в DebugView GA4

Режим налагодження DebugView в GA4 підтверджує, що дані фактично отримані аналітикою і відповідають очікуваному формату. 

При використанні GTM Preview Mode автоматично вмикає режим налагодження (debug_mode) для браузера, що дозволяє бачити події в DebugView в режимі реального часу.

Процес перевірки

1. В інтерфейсі GA4 перейдіть в Admin → DebugView.

2. Виконайте тестову комерційну дію на сайті.

3. Спостерігайте за потоком подій в реальному часі. Якщо GTM спрацював коректно, подія (наприклад, purchase) з'явиться в DebugView відразу після виконання дії.   

4. Клацніть на подію в потоці і переконайтеся, що:

• ім’я події передано коректно;
• присутні всі ключові транзакційні параметри;
• параметр items присутній і позначений зеленою іконкою;
• масив items містить коректний список товарів з необхідними атрибутами.

Розділення налагодження на GTM Preview Mode і GA4 DebugView дає змогу точно локалізувати джерело проблеми і швидко визначити, на якому етапі відбувається збій:

• якщо тег спрацював в GTM Preview Mode, але подія не з’являється в DebugView, причина, як правило, пов'язана з налаштуванням GA4 Configuration Tag або використанням некоректного Measurement ID;

• якщо подія відображається в DebugView, але параметри (value, items та інші) відсутні або передаються некоректно, це вказує на помилку в зіставленні змінних GTM з параметрами тегу.

Висновки

Налаштування електронної торгівлі через GTM — це не просто створення тегів, а побудова чіткої архітектури даних. Щоб звіти в GA4 показували реальний прибуток, а не випадкові цифри, необхідно:

1. Впровадити стандартизований Data Layer. Використовувати уніфікований масив items для всіх етапів воронки продажів.

2. Дотримуватися ієрархії параметрів. Суворо розділяти дані рівня транзакції та детальні характеристики товарів.

3. Використовувати динамічну валюту. Передавати код валюти через змінну, уникаючи жорсткої фіксації в налаштуваннях.

4. Вручну зіставити параметри в GTM. Явно пов’язати поля в тегах GA4 зі змінними рівня даних для коректного розпізнавання системою.

5. Проводити валідацію через DebugView і Preview Mode. Перевіряти коректність відображення даних в інтерфейсі аналітики до публікації контейнера.