Google Analitics 4 Meta/Facebook Pixel/Meta CAPI

Ecommerce GA-4 як налаштувати через GTM для любого інтернет магазину?

Ecommerce GA-4 через dataLayer в GTM.
Як налаштувати для любого інтернет магазину?

Що таке e-commerce tracking і навіщо він потрібен у GA-4?

Уявіть, що ви витрачаєте гроші на рекламу, запускаєте кампанії, а не бачите — хто реально купив, який товар спрацював, де люди відвалились. Це і є проблема, коли немає e-commerce трекінгу.

E-commerce tracking у GA-4 — це по суті очі вашого інтернет-магазину. Він потрібен для трьох речей:

Оптимізація реклами. Події з сайту — покупки, кошики, перегляди — автоматично передаються в Google Ads, Meta чи TikTok. І тільки завдяки цьому працюють розумні стратегії, ремаркетинг, динамічні кампанії.
Аналітика. У GA-4 будується повна воронка: перегляд товару → кошик → оформлення → покупка. Ви бачите, який середній чек, де люди відпадають, як працюють акції чи знижки.
Аудиторії. На основі поведінки формуються сегменти: хто просто дивився, хто кинув у кошик, хто купує постійно. І ці аудиторії можна відправляти у рекламні кабінети та робити по них точний таргетинг.

Без e-commerce tracking ви працюєте “всліпу”.

До речі, я професійно займаюся налаштуванням e-commerce tracking: можу зробити технічне завдання, прописати DataLayer і налаштувати все від А до Я. Якщо потрібно — можете звертатися.

Принцип роботи DataLayer → GTM → GA-4

Перед тим, як я поясню, як усе працює, важливо знати: у Google є офіційна технічна документація по e-commerce для GA-4. Там детально описано кожну подію — view_item, add_to_cart, purchase — і всі параметри, які повинні передаватися.

Посилання на ТЗ:

Google Developers — GA4 Ecommerce Events
Моє авторське ТЗ для розробників

Посилання на плагіни для Chrome

Google Analytics Debugger
Tag Assistant

Навіщо вона потрібна?
Тому що вся робота будується саме на цій документації. Але! У реальних проєктах завжди є нюанси.

Як правило, веб-аналітик або спеціаліст з реклами, орієнтуючись на CMS чи фреймворк сайту, готує індивідуальне технічне завдання. Бо на Shopify, WooCommerce чи OpenCart події реалізуються по-різному. І тут завжди підключається розробник, який реалізує dataLayer.push на стороні фронтенду.

А тепер дивіться: є кілька способів, як ці події можна передавати в аналітику:

DataLayer + Google Tag Manager.
Найбільш поширений і універсальний метод. Події реалізуються в коді сайту через DataLayer, а GTM підхоплює їх і відправляє в GA-4 чи інші системи.
Прямий код GA-4 (gtag.js).
Події можна відправляти прямо в GA-4 без GTM. Це простіше, але менш гнучко.
Готові плагіни для CMS.
WooCommerce, Shopify, OpenCart та інші мають свої модулі, які частково закривають завдання. Але часто цього недостатньо для повноцінної аналітики.
Measurement Protocol (серверна передача).
Події відправляються напряму із сервера на сервер. Це надійно, допомагає обійти блокування браузерів і захистити дані, але потребує додаткової розробки.

У будь-якому випадку принцип один:

розробник реалізує події на сайті → система (GTM чи інший метод) передає їх далі → GA-4, Meta Pixel, TikTok Events Manager отримують ці дані й показують їх у статистиці.

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

Дуже важливо пам’ятати: події — це дії користувача (перегляд, клік, покупка). Але для реклами критичні ще й параметри подій:

value (вартість) — визначає ефективність і рентабельність кампаній;
currency — валюта операції;
transaction_id та event_id — щоб не було задвоєння;
item_id, item_name, quantity — щоб рахувати товари.

І от тепер, друзі, перед вами чек-лист налаштування e-commerce трекінгу. Давайте пройдемося по кожному пункту і розберемо, як це працює крок за кроком.

Етапи впровадження Ecommerce GA-4 через dataLayer

1.Створення шляху клієнта на основі стандартних подій і параметрів GA-4

Етап шляху клієнта
Подія GA-4
Параметри, які потрібно зібрати

2.Створення і установка GTM

Реєстрація в Google Tag Manager
Підключення контейнера на сайт

3.Створення і підключення GA-4 через GTM

Тег GA4 Configuration
Налаштування додаткових подій через Event Tags

4.Перевірка і аудит поточного трекінгу

Tag Assistant
DebugView у GA-4

5.Налаштування подій і параметрів eCommerce GA-4

view_item_list — архів товарів
view_item — картка товару
add_to_cart — додавання в кошик
begin_checkout і purchase — оформлення та покупка
серверні події через Measurement Protocol

5.Технічне завдання для розробника (dataLayer.push)

Приклади коду dataLayer.push
Як формувати структуру подій
Вимоги: event_id, transaction_id, item_id, currency, value

6.Реалізація на стороні бекенду

Впровадження коду розробником
Перевірка через фронт та відлагодження

7.Налаштування тегів і тригерів у GTM

Змінні DataLayer
Тригери для подій
Теги GA-4 Event
Додаткова інтеграція: Google Ads, Meta Ads

8.Тестування і відлагодження

GTM Preview Mode
DebugView GA-4
Перевірка параметрів: item_id, transaction_id, value

9.Перенос у рекламні кабінети

Імпорт конверсій у Google Ads
Передача подій у Meta Ads
Опціонально — TikTok Ads

Крок 1. Прописати шлях клієнта в табличному вигляді

Перший етап — це не GTM і навіть не код, а шлях клієнта.

Ми беремо стандартні e-commerce події GA-4 і прописуємо їх у вигляді таблиці, під конкретний інтернет-магазин.

У таблиці відображаємо:

Етап шляху клієнта — наприклад, перегляд списку товарів, картка товару, додавання в кошик, оформлення замовлення, покупка.
Подія GA-4 — view_item_list, view_item, add_to_cart, begin_checkout, purchase.
Параметри, які потрібно зібрати — item_id, item_name, price, quantity, transaction_id, currency, value, event_id.

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

🛒 E-commerce Journey in GA4

1. view_item_list — перегляд категорії / списку товарів

Мета: зафіксувати, які товари показані користувачу.

Параметри:

item_list_id — ID списку або категорії
item_list_name — назва категорії
items — масив товарів із параметрами:
item_id
item_name
price
item_brand
item_category

2. view_item — перегляд картки товару

Мета: показ, що користувач зайшов на сторінку товару.

Параметри:

item_id
item_name
currency
price
item_brand
item_category
item_variant
item_list_name

3. add_to_cart — додавання товару в кошик

Мета: зафіксувати намір купівлі.

Параметри:

currency
value
items → [ item_id, item_name, quantity, price ]

4. add_to_wishlist — додавання товару в список бажань

Параметри:

item_id
item_name
price
currency

5. view_cart — перегляд кошика

Параметри:

currency
value
items → [ item_id, item_name, quantity, price ]

6. begin_checkout — початок оформлення замовлення

Мета: зафіксувати, що користувач натиснув «Оформити».

Параметри:

currency
value
coupon
items → [ item_id, item_name, quantity, price ]

7. add_payment_info — додавання платіжних даних

Параметри:

payment_type
currency
value
items → [ item_id, item_name, quantity, price ]

8. purchase — покупка

Мета: завершення конверсії.
Параметри:

transaction_id
affiliation (магазин або джерело продажу)
currency
value
tax
shipping
coupon
items → [ item_id, item_name, quantity, price ]

Крок 2. Створення і установка GTM

Друзі, перший крок — це база. Без Google Tag Manager ми не зможемо нормально організувати трекінг. GTM — це такий собі хаб, куди стікаються всі дані з сайту, і звідти ми вже розподіляємо їх у GA-4, Meta, TikTok і так далі.

Що потрібно зробити: зареєструвати акаунт на tagmanager.google.com, створити контейнер, і цей контейнер треба підключити на сайт. Як правило, тут підключається розробник: він вставляє два коди — один у <head>, другий у <body>. І тільки після цього ми можемо почати налаштовувати аналітику.

Крок 3. Створення і підключення GA-4 через GTM

Другий крок — підключаємо GA-4. На analytics.google.com створюємо новий ресурс, отримуємо Measurement ID. У GTM створюємо тег GA4 Configuration і вставляємо цей ідентифікатор.

Далі додаємо події: Event Tags. Це можуть бути кастомні або стандартні події e-commerce. З цього моменту всі базові хіти — перегляди сторінок, кліки, покупки — будуть відправлятися в аналітику.

Крок 4. Перевірка і аудит трекінгу

Третій крок — обов’язковий аудит. Бо що толку з трекінгу, якщо він зламався чи відправляє криві дані? Використовуємо Tag Assistant у Chrome і DebugView у GA-4. Вони показують, які події летять, які параметри підтягуються, і чи збігається це з ТЗ. Якщо щось не так — правимо відразу.

Не забуваємо встановити плагіни:

Google Analytics Debugger
Tag Assistant
Meta Pixel Helper

Крок 5. Налаштування подій e-commerce

Тепер саме цікаве — самі події e-commerce.

view_item_list — коли користувач бачить список товарів.
view_item — коли заходить у картку товару.
add_to_cart — додає в кошик.
begin_checkout — починає оформлення.
purchase — завершив покупку.

Це базовий набір. Реалізуються вони через DataLayer: розробник вставляє dataLayer.push у потрібні місця сайту. Далі в GTM ми створюємо теги GA-4 Event і відправляємо дані.

Крок 6. Технічне завдання для розробника

І тут головний момент: розробник завжди потрібен. Сам веб-аналітик без розробника код у сайт не вставить. Тому пишеться ТЗ: які події, які параметри, у якій структурі.

Посилання на ТЗ:
Google Developers — GA4 Ecommerce Events
Моє авторське ТЗ для розробників

Наприклад, для purchase ми завжди вимагаємо transaction_id, currency, value, масив items. І додаємо event_id, щоб не було задвоєння.

У кожному проєкті це ТЗ трохи відрізняється: WooCommerce, Shopify, OpenCart — у кожного свої нюанси. Саме тому аналітик готує документ під конкретну CMS.

Крок 7. Реалізація і перевірка коду

Розробник отримав ТЗ, впровадив код у сайт. Далі ми тестуємо на фронті. Дивимось у GTM Preview Mode: подія спрацювала? Є потрібні параметри? Немає дублів? Якщо все ок — рухаємось далі.

Крок 8. Налаштування тегів і тригерів у GTM

Тут уже включається веб-аналітик. Ми створюємо змінні DataLayer (щоб підтягувати дані з коду), налаштовуємо тригери (наприклад, event = purchase), і на основі цього створюємо теги GA-4 Event.

Кожна подія з DataLayer → запускає свій тег у GTM → і дані летять у GA-4.

На цьому етапі також можна паралельно налаштувати відправку у Google Ads, Meta Pixel, TikTok Ads — усе з одного місця.

Крок 9. Тестування і перенос у рекламні кабінети

Фінальний крок — це подвійна перевірка:

у GTM Preview Mode дивимось, чи всі події відправляються;
у GA-4 DebugView перевіряємо, чи правильно збираються параметри.

Далі позначаємо події як конверсії у GA-4 (наприклад, purchase, begin_checkout) і переносимо їх у Google Ads чи Meta Ads. І саме під ці події оптимізуються рекламні кампанії.

🎯 В результаті ми отримуємо систему, де сайт передає дані у DataLayer → GTM керує логікою → GA-4 і рекламні кабінети отримують чисту статистику. І бізнес нарешті бачить: що реально працює, а що зливає бюджет.

🧩 Kanban Tracker — Ecommerce GA-4 via DataLayer (Full Implementation)

🏁 Stage🎯 Task👤 Responsible📅 Status

1. Client Journey Mapping

Define customer journey based on GA4 standard events (view_item_list → purchase)

PM / Analyst

✅ Done

Approve final event list & parameters (item_id, value, currency, etc.)

PM / Client

🕐 In progress

Create visual flow (for documentation or video)

Analyst

⏸️ On hold

2. GTM Setup

Register GTM container (Web)

Analyst

✅ Done

Install GTM script on the website

Developer

🕐 In progress

Verify installation with Tag Assistant

Analyst

⏸️ On hold

3. GA-4 Integration

Create GA4 property & stream

Analyst

✅ Done

Add GA4 Configuration tag in GTM

Analyst

🕐 In progress

Add basic event tags (page_view, scroll, click)

Analyst

⏸️ On hold

4. Tracking Audit

Audit existing tracking (check DataLayer, GTM structure)

Analyst

🕐 In progress

Debug via GTM Preview + DebugView GA4

Analyst

⏸️ On hold

5. E-commerce Event Setup

Implement DataLayer for view_item_list, view_item, add_to_cart, begin_checkout, purchase

Developer

🕐 In progress

Validate event structure in GTM Preview

Analyst

⏸️ On hold

6. Backend Implementation

Push e-commerce data via dataLayer.push()

Developer

🕐 In progress

Validate backend response and dynamic variables

QA

⏸️ On hold

Handle Measurement Protocol (server-side) setup

Developer

⏸️ On hold

7. GTM Event & Trigger Setup

Create DataLayer Variables

Analyst

✅ Done

Configure Triggers for each e-commerce event

Analyst

🕐 In progress

Create GA4 Event Tags and test

Analyst

⏸️ On hold

Link with Google Ads & Meta Ads tags

Analyst / Marketer

⏸️ On hold

8. QA & Debugging

Test all events in GTM Preview Mode

QA

🕐 In progress

Validate parameters: item_id, transaction_id, value

Analyst

⏸️ On hold

Verify data in GA4 DebugView

Analyst

⏸️ On hold

9. Ads Integration

Import conversions into Google Ads

Marketer

⏸️ On hold

Send e-commerce events to Meta (via CAPI)

Analyst / Marketer

⏸️ On hold

Optional: Integrate TikTok Pixel

Analyst

⏸️ On hold

10. Final Review & Documentation

Create tracking documentation & screenshots

Analyst

🕐 In progress

Approve final version with client

PM

⏸️ On hold

🧠 Legend:

✅ Done — завершено

🕐 In progress — у роботі

⏸️ On hold — на паузі

Друзі, я також підготував для вас такий таск-трекер. У ньому є всі вісім кроків: хто відповідальний — веб-аналітик чи розробник, і статус виконання. Це дуже зручно використовувати як внутрішній чек-ліст, щоб нічого не забути і мати повний контроль над налаштуванням e-commerce трекінгу.

У ролях:

Розробник — відповідає за код сайту та DataLayer.
Веб-аналітик — налаштовує GTM, GA-4, перевіряє якість даних.
Маркетолог (якщо є в команді) — переносить конверсії у рекламні кабінети, будує кампанії на основі подій.

📋 Таск-трекер e-commerce GA-4 через DataLayer

Створення акаунта GTM і установка контейнера на сайт — відповідальний: Розробник — статус: у роботі.
Створення ресурсу GA-4 та підключення через GTM (GA4 Configuration + Event Tags) — відповідальний: Веб-аналітик — статус: не почато.
Перевірка і аудит трекінгу (Tag Assistant, DebugView) — відповідальний: Веб-аналітик — статус: не почато.
Реалізація подій e-commerce (view_item, add_to_cart, purchase та інші) — відповідальний: Розробник — статус: не почато.
Підготовка технічного завдання для DataLayer (структура подій, параметри) — відповідальний: Веб-аналітик — статус: виконано.
Впровадження коду на стороні бекенду + перевірка на фронті — відповідальний: Розробник — статус: не почато.
Налаштування змінних, тригерів і тегів у GTM, відправка у GA-4/Ads/Meta — відповідальний: Веб-аналітик — статус: не почато.
Тестування, DebugView, позначення конверсій, перенос у рекламні кабінети — відповідальні: Веб-аналітик / PPC-спеціаліст — статус: не почато.

Послуги та ресурси Макса Котенко:

https://mahadevmax.co.ua

Вебаналітика (GA-4, GTM, серверний трекінг)
Google Ads, Meta Ads
Digital-маркетинг під ключ
Оптимізація сайтів

Замовляйте тут:

🌐 https://mahadevmax.co.ua

🌐 https://t.me/mistik_max

📖 Книга "8 Опор Інтернет-реклами" від Макса Котенко:

https://t.me/maxkotenkoblog

Макс Котенко Интернет Маркетолог

2025-09-24 23:07