Як налаштувати розширену електронну торгівлю за допомогою Google Tag Manager

Сьогодні аналітика — не лише лічильник на сайті, а «центральна нервова система» вашого бізнесу. Якщо ви бачите тільки загальну кількість відвідувачів, рішення доводиться приймати майже навмання.

Реальна цінність з’являється в розширеній електронній торгівлі GA4. Вона показує весь шлях до покупки: котрі товари переглядають, що додають у кошик, на якому кроці чекауту зупиняються, де виникають помилки. І ось тоді картина стає повнішою.

У цій статті розберу етапи побудови системи — від стратегії до окремих подій у воронці.

Фундамент ecommerce-аналітики. Структура даних та архітектура DataLayer

У Google Analytics 4 кожен клік перетворюється на подію, а покупка — на ланцюжок параметрів, з котрого потім збираються звіти й навчаються моделі. Коли у вас налаштоване тільки базове відстеження успішних замовлень, забагато залишається поза увагою, як-от перегляди товарів, додавання в кошик, кроки чекауту, помилки, відмови.

Чому необхідна ecommerce-аналітика

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

1. Оптимізувати ROAS (окупність реклами). Ви побачите прибуткові позиції та ті, що з’їдають бюджет.

2. Аналізувати воронку (Churn Analysis). Знайдете вузькі місця вашого сайту й побачите відповіді на питання на кшталт, чому користувачі додають позицію в кошик, але масово йдуть зі сторінки вибору доставки.

3. Будувати складні аудиторії. Налаштуєте ремаркетинг на тих, хто переглядав товари певної категорії, але не зробив покупку.

DataLayer — міст між сайтом і Google Tag Manager

DataLayer (рівень даних) — це масив об’єктів JavaScript, що використовується для збору й передачі інформації від вашого ресурсу до Google Tag Manager. Це тимчасове сховище, куди майданчик записує інформацію про дії користувача в структурованому вигляді.Важливо враховувати, що відстеження електронної торгівлі активується виключно за умови прямої передачі інформації з коду сайту.

Без програмного виклику відповідних функцій та передачі даних у DataLayer, збір інформації про транзакції чи взаємодію з товарами неможливий.

Оскільки Google Analytics 4 базується на моделі подій, кожен продаж або взаємодія з продуктом стає складним набором даних, що живить алгоритми машинного навчання. DataLayer забезпечує передачу цін, артикулів, категорій незалежно від візуального оформлення сайту. Це гарантує, що зміна дизайну або розташування елементів на сторінці не призведе до зупинки збору аналітики.

Золоті правила DataLayer у 2026 році.

1. Сувора відповідність схемі GA4. Google очікує дані у конкретному форматі. Замість старих ключів id і name тепер використовуються item_id та item_name. Якщо назвати параметр інакше, GA4 його не відстежить.

2. Чистота типів даних. Ціна (price) та сума (value) мають передаватися у форматі чисел (наприклад, 1250.50), а не як рядки у лапках ("1250.50"). Рядки замість чисел заважають розрахункам у звітах.

3. Масив items. Всі дані про товари завжди мають бути загорнуті в масив items, навіть коли користувач купує лише одну позицію.

Приклад передачі даних у GTM.Коли користувач натискає «Купити», скрипт сайту виконує команду dataLayer.push(). GTM миттєво зчитує цей об’єкт, розпізнає подію та відправляє її в GA4.

Практичне впровадження: від «лічильника» до повноцінної воронки

Процес налаштування має такі етапи: базове з’єднання і створення механізму передачі даних із розробкою логіки подій.

Етап перший. Налаштуйте відправку даних з GTM в GA4

Перш ніж відстежувати покупки, потрібно навчити GTM «спілкуватися» з вашим ресурсом GA4.

1. Створіть Google Tag в інтерфейсі GTM.

2. Отримайте ID. У інтерфейсі Google Analytics 4 перейдіть у Адміністратор (Admin) —> Потоки даних (Data Streams).

3. Оберіть ваш потік і скопіюйте Ідентифікатор показника (Measurement ID). Він має формат G-XXXXXXXXXX.

4. Вставте ID в поле Tag Id. У розділі Triggering оберіть All Pages і збережіть налаштування тегу. Тепер GA4 бачить кожен візит на сайт.

Технічне налаштування в GTM: від тригера до тегу на прикладі Purchase

З 2026 року налаштування GA4 максимально автоматизоване. Вам не потрібно вручну прописувати кожну змінну, як-от ціну, ID транзакції чи назву товару, коли ви використовуєте стандартну схему даних. Весь процес налаштування головної події — покупки (purchase) — тепер складається лише з двох кроків.

Створення тригера

GTM має чітко розуміти, коли саме відбулася покупка. Дані не можна відправляти навмання або з затримкою. Найпростіший і найнадійніший варіант — окрема подія, котру сайт запускає одразу після успішної оплати.

1. Перейдіть у меню Тригери (Triggers) —> New.

2. Тип тригера — оберіть Спеціальна подія (Custom Event) зі списку.

3. В полі Event name впишіть purchase, назвіть тригер Custom Event — purchase та збережіть, натиснувши на кнопку Save.
   Важливо. Використовуйте ту саму назву, що й у коді сайту, і обов’язково пропишіть її маленькими літерами.

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

Фінальний крок — створення тегу в GTM для відправки даних в Google Analytics 4.

1. GA4 Event. Теги (Tags) —> New —> Google Analytics.

2. Configuration Tag. Оберіть ваш основний тег Google або введіть ID потоку G-XXXXXXXXXX, як робили попередньо для встановлення Google Tag GA4. Впишіть стандартну назву purchase.

3. Налаштування передачі даних (Ecommerce):

• відкрийте вкладкуДодаткові налаштування (More Settings) —> Ecommerce;

• поставте лише одну галочку Надсилати дані електронної торгівлі (Send Ecommerce data);

• у полі Data source вкажіть Data Layer.

4. Активація (Triggering). Оберіть створений тригер Custom Event — purchase та додайте його до вашого тегу, натиснувши кнопку Додати (Add).

Після налаштувань збережіть тег і опублікуйте його в робочій області Google Tag Manager.

Чому це працює без створення додаткових змінних. Завдяки активованій опції Send Ecommerce data, Google Tag Manager забирає об’єкт ecommerce з dataLayer, якщо він переданий у правильній структурі, а саме: ціну, валюту та ID замовлення. Він автоматично трансформує їх у потрібний формат і передає в GA4.

Етап другий. Логіка спрацювання подій і передача даних у DataLayer

Правильний момент активації події (triggering) визначає чистоту вашої воронки. Розберу сценарії для кожного кроку.

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

Це відстеження позицій у каталозі, блоках рекомендацій, як-от «З цим також купують» або акційних слайдерах. Є два варіанти реалізації.

1. Стандартний. Подія спрацьовує одразу після завантаження сторінки. Ви відправляєте дані про всі продукти, що технічно присутні в списку, навіть якщо вони знаходяться поза межами видимої частини сторінки.

2. Просунутий (рекомендовано). Передбачає використання Intersection Observer API. Подія фіксується лише тоді, коли картка товару реально потрапляє в видиму область екрана (viewport).

Сценарії.

1. Користувач зайшов у категорію «Категорія 1». У видимій зоні чотири товари — відправляйте view_item_list для цих чотирьох позицій.

2. Користувач скролить вниз, з’являються ще чотири нові позиції — відправляйте другу подію view_item_list для наступної четвірки.

3. Користувач повернувся вгору — нічого не відправляєте (подія не має дублюватися для тих самих товарів за одну сесію).

window.dataLayer = window.dataLayer || [];

window.dataLayer.push({

event: 'view_item_list',

ecommerce: { items: [{ item_name: 'Назва товару', item_id: 'ID товару', price: Ціна, currency: 'Валюта', item_brand: 'Бренд товару', item_category: 'Категорія', item_list_name: 'Назва списку', item_list_id: 'ID списку', index: Позиція товару в списку, quantity: Кількість товару },{ ... // за аналогією далі передаємо дані всіх наступних товарних позицій, що потрапили у видиму зону екрану (якщо їх більше 1) }] }});

Приклад коду в dataLayer

Клік по товару (select_item)

Ця подія працює в момент натискання на картку позиції, посилання або кнопку «Детальніше». Момент спрацювання:

• подія активується до того, як користувач перейде на нову сторінку;

• дані мають бути відправлені до перезавантаження сторінки — для цього в GTM використовується опція Wait for Tags або передача через DataLayer на самому сайті.

window.dataLayer = window.dataLayer || [];

window.dataLayer.push({

event: 'select_item',

ecommerce: { items: [{ item_name: 'Назва товару', item_id: 'ID товару', price: Ціна, currency: 'Валюта', item_brand: 'Бренд товару', item_category: 'Категорія', item_list_name: 'Назва списку', item_list_id: 'ID списку', index: Позиція товару в списку, quantity: Кількість товару }] }});

Приклад коду в dataLayer

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

Фіксується безпосередньо на сторінці конкретного продукту.

Сценарії.

1. Прямий захід. Користувач перейшов за посиланням або з реклами — подія активується після повного завантаження сторінки (DOM Ready).

2. Швидкий перегляд (Quick View). Якщо на сайті є модальне вікно з описом товару, що відкривається без переходу на нову сторінку — подія view_item спрацює в момент відкриття цього вікна.

window.dataLayer = window.dataLayer || [];

window.dataLayer.push({

event: 'view_item',

ecommerce: { currency: 'Валюта', value: Ціна, items: [{ item_name: 'Назва товару', item_id: 'ID товару', price: Ціна, item_brand: 'Бренд товару', item_category: 'Категорія', item_list_name: 'Назва списку', item_list_id: 'ID списку', index: Позиція товару в списку, quantity: Кількість товару }] }});

Приклад коду в dataLayer

Додавання у кошик (add_to_cart)

Критично важлива подія. Ключовий момент — визначити точку її фіксації. Розгляну два варіанти.

1. Невірно. Фіксувати лише факт натискання на кнопку «Купити». Користувач міг натиснути, але товар не додався через помилку або відсутність на складі.

2. Вірно. Подія має спрацьовувати лише після успішної відповіді сервера, що продукт додано в кошик. Оптимальний момент для активації — поява візуального підтвердження або повідомлення «Товар додано» на екрані користувача

window.dataLayer = window.dataLayer || [];window.dataLayer.push({ event: 'add_to_cart', ecommerce: { currency: 'Валюта', value: Ціна, items: [{ item_name: 'Назва товару', item_id: 'ID товару', price: Ціна,

discount: Знижка, item_brand: 'Бренд товару', item_category: 'Категорія', item_list_name: 'Назва списку', item_list_id: 'ID списку', index: Позиція товару в списку, quantity: Кількість товару }] }});

Приклад коду в dataLayer

Видалення з кошика (remove_from_cart)

Активується під час натискання на «хрестик» або кнопку видалення в кошику чи мінікошику. Спрацьовує одразу після підтвердження видалення на стороні сайту. Коли юзер зменшує кількість товару до нуля, це також трактується як remove_from_cart.

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

Приклад коду в dataLayer

Перегляд кошика (view_cart)

Подія фіксується щоразу, коли користувач відкриває сторінку кошика або розгортає повнофункціональний Side-cart (бокову панель кошика).

Сценарій.

1. Юзер додав три позиції та перейшов у кошик для перегляду списку — надсилайте подію view_cart. Користувач лише додав товар і залишився на сторінці — надсилайте тільки add_to_cart, без події view_cart.

window.dataLayer = window.dataLayer || [];window.dataLayer.push({ event: 'view_cart', ecommerce: { items: [{ item_name: 'Назва товару', item_id: 'ID товару', price: Ціна, currency: 'Валюта', item_brand: 'Бренд товару', item_category: 'Категорія', item_list_name: 'Назва списку', item_list_id: 'ID списку', index: Позиція товару в списку, quantity: Кількість товару },{ ... // за аналогією далі передаємо дані всіх наступних товарних позицій, що потрапили у кошик (якщо їх більше 1) }] }});

Приклад коду в dataLayer

Початок оформлення замовлення (begin_checkout)

Тригер ініціюється при натисканні кнопки «Оформити замовлення» в кошику.

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

window.dataLayer = window.dataLayer || [];window.dataLayer.push({ event: 'begin_checkout', ecommerce: {

currency: 'Валюта',

value: Ціна, // сума всіх цін товарів (якщо їх більше 1) items: [{ item_name: 'Назва товару', item_id: 'ID товару', price: Ціна, item_brand: 'Бренд товару', item_category: 'Категорія', item_list_name: 'Назва списку', item_list_id: 'ID списку', quantity: Кількість товару

},{ ... // за аналогією далі передаємо дані всіх наступних товарних позицій, що потрапили на сторінку checkout (якщо їх більше 1) }] }});

Приклад коду в dataLayer

Додавання даних про доставку та оплату (add_shipping_info, add_payment_info)

Ці події активуються, коли користувач успішно завершує відповідні кроки.

Сценарії.

1. add_shipping_info —спрацьовує, коли обрано спосіб доставки й заповнено адресу / відділення пошти, наприклад, після натискання кнопки «Далі» на кроці доставки;

window.dataLayer = window.dataLayer || [];window.dataLayer.push({ event: 'add_shipping_info', ecommerce: { shipping_tier: 'Спосіб доставки', items: [{ item_name: 'Назва товару', item_id: 'ID товару', price: Ціна, currency: 'Валюта', item_brand: 'Бренд товару', item_category: 'Категорія', item_list_name: 'Назва списку', item_list_id: 'ID списку', quantity: Кількість товару },{ ... // за аналогією далі передаємо дані всіх наступних товарних позицій, які знаходяться у замовленні }] }});

Приклад коду в dataLayer

2. add_payment_info —працює, коли обрано метод оплати (карта, при отриманні тощо) перед фінальним натисканням кнопки «Підтвердити замовлення».

window.dataLayer = window.dataLayer || [];window.dataLayer.push({ event: 'add_payment_info', ecommerce: { payment_type: 'Спосіб оплати', items: [{ item_name: 'Назва товару', item_id: 'ID товару', price: Ціна, currency: 'Валюта', item_brand: 'Бренд товару', item_category: 'Категорія', item_list_name: 'Назва списку', item_list_id: 'ID списку', quantity: Кількість товару },{ ... // за аналогією далі передаємо дані всіх наступних товарних позицій, які знаходяться в замовленні }] }});

Приклад коду в dataLayer

Покупка (purchase)

Надсилання події відбувається на сторінці «Дякуємо за покупку» (Thank You Page).

Сценарії.

1. Сторінка успіху. Подія активується при завантаженні URL, наприклад, /success/ або /thank-you/.

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

window.dataLayer = window.dataLayer || [];window.dataLayer.push({ event: 'purchase', ecommerce: {

currency: 'Валюта',

value: Ціна, // сума всіх цін товарів (якщо їх більше 1) transaction_id: ідентифікатор замовлення, items: [{ item_name: 'Назва товару', item_id: 'ID товару', price: Ціна, item_brand: 'Бренд товару', item_category: 'Категорія', item_list_name: 'Назва списку', item_list_id: 'ID списку', quantity: Кількість товару

},{ ... // за аналогією далі передаємо дані всіх наступних товарних позицій, що були куплені (якщо їх більше 1) }] }});

Приклад коду в dataLayer

Опис параметрів

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

Загальні параметри

Параметри товарів (items)

Аналіз результатів: де шукати дані про продажі в GA4

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

Звіти про монетизацію (Monetization)

Це основне місце, де зібрана вся інформація про ваші товари й дохід.

1. В основному меню Google Analytics перейдіть: Звіти (Reports) —> Монетизація (Monetization).

2. Оберіть пунктПокупки в е-комерції (Ecommerce purchases).

3. Відобразиться таблиця зі статистикою по кожному товару:

• скільки разів товар переглядали (item_views);

• скільки разів його додали в кошик (add_to_carts);

• кількість успішних покупок і загальний дохід від кожного артикула.

Звіт чітко показує товари-драйвери продажів і ті, що не дають відчутного внеску.

Дослідження воронки продажів (Explorations)

Стандартних звітів часто замало, щоби побачити, де саме ви втрачаєте клієнтів. Для цього в GA4 є розділ Explore (Дослідження). Тут ви можете будувати власні звіти: створювати воронки, сегменти користувачів, аналізувати шляхи до конверсії та порівнювати групи аудиторій.

Висновки

1. Налаштування розширеної електронної торгівлі у 2026 році — це стратегічний фундамент для всього маркетингу.

2. Використання автоматизованої передачі даних через Google Tag Manager допомагає значно скоротити час на впровадження. Завдяки стандартній схемі параметрів і опції Send Ecommerce data аналітик зосереджується не на написанні коду, а на пошуку інсайтів у звітах.

3. Що ви отримуєте в результаті правильного налаштування:

• прозорість воронки —ви більше не гадаєте, чому клієнти не купують, а чітко бачите етап, на якому виникають труднощі;

• точність бюджетів — ви точно знаєте, котрий рекламний канал приносить гроші, а який — порожні кліки;

• масштабування — маючи точні дані про purchase, алгоритми Google Ads отримують ідеальне пальне для пошуку вашої цільової аудиторії.

4. Навіть найдосконаліша система аналітики — лише цифри на екрані, якщо ви не перетворюєте їх на дії. Регулярно аналізуйте звіти про монетизацію, будуйте власні дослідження воронки й не бійтеся експериментувати. У електронній комерції виграє той, хто швидше за інших приймає правильні рішення на основі перевірених даних.