Налаштування відстеження події «Додати в кошик» в Google Analytics 4 для інтернет-магазину

Налаштування відстеження події «Додати в кошик» в Google Analytics 4 означає передачу моменту, коли користувач додає товар у кошик інтернет-магазину, до GA4 як подію add_to_cart. Найточніша реалізація передбачає передачу через dataLayer до Google Tag Manager параметрів, таких як назва товару, артикул, ціна, валюта, кількість, категорія та загальна вартість, і запуск події за допомогою тегу GA4 Event. Це дає змогу відслідковувати, які товари додають у кошик, які кампанії працюють найкраще, а також де саме користувачі відмовляються від покупки перед оформленням.

У інтернет-магазинах важливі не лише самі продажі, а й мікроетапи, що ведуть до них. Подія додавання в кошик — один із ключових сигналів для аналізу ефективності сторінки товару, якості рекламних кампаній, впливу цін і наявності товару, а також намірів покупців. Особливо у 2024 році для SEO і цифрового маркетингу недостатньо просто залучати трафік — потрібно розуміти, чи конвертується він у комерційну поведінку. GA4 виходить за межі класичних звітів про перегляди сторінок і відстежує взаємодії користувачів на основі подій.

У цьому гіді ми покроково розглянемо, як налаштувати подію add_to_cart у GA4 через Google Tag Manager, які параметри слід передавати, як тестувати через DebugView та звіти в реальному часі, а також як вирішувати типові помилки. Приклади адаптовані під WooCommerce, кастомні рішення, Shopify-подібні платформи і серверний трекінг. Перед налаштуванням аналітики важливо переконатися, що сайт швидкий, безпечний і стабільний; для цього варто розглянути Hostragons рішення для хостингу електронної комерції та Hostragons SSL сертифікати для безпечних платіжних сторінок.

Що таке подія «Додати в кошик» у GA4?

Подія «Додати в кошик» в GA4 — це рекомендована подія електронної комерції add_to_cart, яка відправляється в момент, коли користувач додає товар у кошик. Хоча GA4 автоматично відстежує деякі події, подія додавання в кошик зазвичай потребує спеціального налаштування. Для коректної роботи звітів GA4 потрібно отримувати деталі товару через відповідні параметри.

Ця подія дозволяє не лише бачити, скільки людей додало товари в кошик, але й аналізувати, які товари найбільше цікавлять покупців, які додають у кошик, але не купують, як ціни впливають на рішення, а також вплив рекламних джерел на додавання в кошик. Наприклад, якщо товар отримує 10 000 переглядів, але тільки 120 додавань у кошик, потрібно перевірити опис, ціну, вартість доставки, наявність на складі або швидкість завантаження сторінки.

Основні поняття перед налаштуванням

Логіка подій у GA4

У часи Universal Analytics основним було відстеження сесій, сторінок і цілей. GA4 працює на подіях: перегляди сторінок, кліки, відправка форм, початок оплати та покупки — усе це події. add_to_cart — одна з таких подій. Для її коректної роботи потрібно правильно назвати подію та передати необхідні параметри.

Що таке dataLayer?

DataLayer — це шар даних, який передає інформацію між вашим сайтом і Google Tag Manager. Коли користувач натискає кнопку додавання товару до кошика, сайт надсилає до dataLayer подію з інформацією про товар. Google Tag Manager слухає цю подію і передає дані в GA4. Здоровий dataLayer — основа якісного відстеження електронної комерції.

Роль Google Tag Manager

Google Tag Manager дозволяє керувати маркетинговими та аналітичними тегами без прямого редагування коду сайту. Для події додавання в кошик GTM слухає тригер, захоплює дані про товар через змінні та відправляє їх до GA4 через тег події. Це спрощує підтримку і знижує залежність від розробників. Важливо, щоб dataLayer генерувався коректно.

Які параметри потрібні для налаштування події add_to_cart у GA4?

Якщо в GA4 відправляти лише назву події add_to_cart без параметрів, дані будуть базовими і неінформативними. Рекомендується передавати щонайменше item_id, item_name, price, quantity, currency та value. Для великих магазинів корисно додати категорію, бренд, варіант, назву списку чи купон, щоб покращити аналіз.

Важливо дотримуватися послідовності в параметрах. Якщо item_id передавати то як SKU, то як ID з бази — звіти будуть розбиті, і один товар може виглядати як два різних. Тому перед налаштуванням варто визначити стандарти для даних товарів.

Покрокове налаштування події «Додати в кошик» через Google Analytics 4

1. Перевірте власність GA4 і поток даних

Переконайтеся, що у вас активна власність GA4 і що веб-потік даних прив’язаний до правильного домену. В адмінпанелі GA4 перейдіть до «Потоки даних» та запишіть Measurement ID, який починається на G-. Якщо використовуєте Google Tag Manager, цей ID має бути вказаний у конфігураційному тегу GA4.

Також важливо, щоб сайт працював на одному канонічному домені. Змішування www і без www, неправильне відстеження субдоменів або інший домен на сторінці оплати можуть порушити звіти. Для налаштування домену та DNS рекомендуємо ознайомитися з Hostragons реєстрація домену та управління DNS.

2. Створіть подію в dataLayer при додаванні в кошик

Коли користувач натискає кнопку «Додати в кошик» або при оновленні кошика через AJAX, у dataLayer має відправлятися подія add_to_cart. Структура даних має містити event: add_to_cart, ecommerce з валютним кодом, загальною вартістю та масивом items із деталями товарів.

Якщо у вас кастомний сайт, цей код реалізує розробник у JavaScript на сторінці товару або в функції обробки кошика. WooCommerce може автоматично формувати dataLayer через плагіни, але обов’язково перевірте правильність назв параметрів. У Shopify-подібних системах налаштування dataLayer залежить від теми чи інтеграції.

• Артикул товару має бути послідовним і з одного джерела.
• Ціна надсилається у числовому форматі без символів валюти.
• Валюта має бути у форматі ISO, для України — UAH.
• Якщо додають кілька товарів, масив items має містити всі позиції.
• Значення value має дорівнювати ціні помноженій на кількість.

3. Створіть змінні dataLayer у Google Tag Manager

У GTM зайдіть у розділ «Змінні» та створіть Data Layer Variable для ecommerce.items, ecommerce.value та ecommerce.currency або відповідних шляхів. Назви змінних робіть зрозумілими, наприклад DLV - ecommerce.items, DLV - ecommerce.value, DLV - ecommerce.currency для простоти підтримки.

Поширена помилка — неправильно вказати шлях до даних у dataLayer. Якщо дані в об’єкті ecommerce, шлях має бути ecommerce.items. Якщо без об’єкта — items. Скористайтеся режимом попереднього перегляду GTM, щоб перевірити, які дані надходять.

4. Налаштуйте тригер Custom Event

У GTM у розділі «Тригери» створіть новий Custom Event тригер. В полі назви події введіть add_to_cart. Цей тригер спрацьовуватиме при надходженні відповідної події в dataLayer. Якщо у вас інша назва події (наприклад, addToCart, product_add_to_cart), рекомендується стандартизувати її на add_to_cart згідно з рекомендаціями GA4.

5. Створіть тег GA4 Event

У розділі «Теги» створіть новий тег GA4 Event. Вкажіть назву події add_to_cart, виберіть конфігураційний тег або введіть Measurement ID. У параметрах події додайте currency, value та items, прив’язавши їх до відповідних змінних dataLayer.

Зверніть увагу, що параметр items має бути масивом об’єктів, а не текстом. В GTM Preview перевірте, що змінна відображається як масив або об’єкт.

6. Тестуйте у режимі попереднього перегляду

Відкрийте режим Preview в GTM, зайдіть на сайт і додайте товар у кошик. Перевірте в лівій панелі, чи відображається подія add_to_cart і чи запускається тег GA4 Event. Якщо тег не запускається, можливо, не співпадає назва події або dataLayer подія надходить із затримкою.

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

7. Перевірте подію в GA4 DebugView

Навіть якщо в GTM Preview все працює, треба перевірити подію в GA4 DebugView. В адмінпанелі GA4 зайдіть у DebugView і оберіть тестовий пристрій. Подія add_to_cart має з’явитись у потоці в реальному часі. Перевірте, чи параметри currency, value і items передаються правильно.

Якщо подія відображається, але параметри відсутні, перевірте налаштування тегу і змінних GTM. Якщо подій немає, перевірте Measurement ID, налаштування consent, блокувальники реклами, cookie consent і чи розгорнутий GTM-контейнер.

8. Опублікуйте контейнер GTM

Після успішного тестування опублікуйте контейнер GTM з описовою назвою, наприклад «GA4 add_to_cart – 2024-06». Запишіть у нотатках, які параметри передаються і на яких типах сторінок тестувалось, щоб зберегти історію змін.

Порівняння методів налаштування: GTM, прямий код та плагіни

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

Для більшості магазинів оптимальним є GTM + dataLayer. Власники з великим трафіком і високим рекламним бюджетом можуть розглянути серверний трекінг. Він особливо актуальний через обмеження браузерів та політики cookie. Для потужної серверної інфраструктури радимо Hostragons рішення для VPS серверів та Послуги виділеного сервера Hostragons.

Як читати дані про додавання в кошик у звітах GA4?

Після запуску події в GA4 можна переглядати дані в різних звітах. Для першої перевірки підійдуть звіти в реальному часі, але для аналізу знадобиться 24-48 годин для накопичення даних. Звіти електронної комерції допомагають порівняти додавання в кошик і покупки по товарах.

У розділі «Дослідження» можна створити кастомні звіти. Наприклад, додати розмір «Назва товару» у рядки, показник «Кількість подій add_to_cart» — у значення, щоб побачити найпопулярніші товари. Якщо додати також подію purchase, можна порівняти відсоток додавання в кошик і покупок. Товари з високим додаванням і низькими покупками варто аналізувати на предмет вартості доставки, часу доставки, способів оплати та довіри.

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

Чому це важливо для SEO та продуктивності?

Подія додавання в кошик безпосередньо не впливає на позиції в пошуку, але є важливим показником комерційного успіху SEO-стратегії. Якщо органічна сторінка категорії генерує перегляди, але не додає товари в кошик, потрібно переглянути контент, вибір товарів, фільтри, цінову політику та юзабіліті. У сучасному SEO важливо враховувати наміри користувача, досвід на сторінці та якість конверсій.

Наприклад, якщо органічний трафік має коефіцієнт додавання в кошик 3%, а платний трафік із соцмереж — 0,8%, органічні сторінки генерують більш якісний трафік із наміром купівлі. Ці дані допомагають пріоритетизувати контент і оптимізувати категорії. Якщо користувачі з певного блогу часто додають товар у кошик, варто розвивати цю тематику. Підтримати контент-стратегію допоможуть Посібник з оптимізації швидкості веб-сайту та Рекомендації з продуктивності хостингу WordPress.

Типові помилки і як їх уникнути

Неправильна назва події

GA4 рекомендує використовувати назву add_to_cart. Назви на кшталт addToCart або «додати_в_кошик» технічно можна відправити, але це ускладнює роботу зі стандартними звітами. Вирішення — стандартизувати назву події в dataLayer і GTM на add_to_cart.

Недостатній набір параметрів items

Часта помилка — передавати лише value і currency без масиву товарів. Тоді можна побачити загальну кількість додавань у кошик, але не розуміти, які саме товари додають. Вирішення — передавати масив items з item_id, item_name, price та quantity.

Неправильний формат ціни

Наприклад, «1299,90» або «1.299,90 грн» можуть викликати помилки в GA4. Ціни треба передавати у форматі з крапкою як десятковим роздільником, наприклад 1299.90. Валюта окремо передається у currency у форматі UAH.

Подвійне спрацьовування події

Якщо при додаванні товару спрацьовує і клік по кнопці, і успішне оновлення AJAX, GA4 може отримати двічі подію add_to_cart, що спотворює дані. Вирішення — відправляти подію лише після успішного оновлення.

Вплив cookie consent та Consent Mode

Без дозволу користувача на аналітичні cookie події можуть не відправлятися, що особливо актуально для сайтів у ЄС та з дотриманням GDPR чи українських законів. Переконайтеся, що Consent Mode налаштований і теги GA4 працюють відповідно до згод користувачів.

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

Після базового налаштування можна підвищити якість даних. По-перше, для кожного товару використовуйте унікальний незмінний item_id. Назва товару може змінюватися, але артикул має залишатися постійним для збереження історії.

По-друге, передавайте категорії у ієрархії, наприклад item_category: «Одяг», item_category2: «Чоловічий», item_category3: «Футболки». Це допоможе глибше аналізувати товари.

По-третє, не втрачай контекст кампаній і списків — item_list_name і item_list_id покажуть, звідки користувач додав товар у кошик (головна сторінка, категорія, пошук тощо).

По-четверте, майте на увазі затримки в обробці даних GA4. Для швидких рішень використовуйте DebugView та звіти в реальному часі, а стратегічний аналіз робіть у «Дослідженнях».

І нарешті, не розглядайте налаштування як одноразову задачу. Оновлення тем, плагінів, інтеграції платіжних систем чи додавання нових варіантів товарів можуть впливати на dataLayer. Регулярно (наприклад, щомісяця) тестуйте події, робіть тестові замовлення для перевірки точності даних.

Контрольний список перед запуском

Перед тим, як запускати подію у продакшн, перевірте:

• Чи правильний Measurement ID GA4?
• Чи завантажений GTM контейнер на всіх сторінках?
• Чи відправляється подія add_to_cart у dataLayer після додавання до кошика?
• Чи містить items усі необхідні поля: item_id, item_name, price, quantity?
• Чи валюта передається як UAH?
• Чи value відповідає ціні помноженій на кількість?
• Чи тег GA4 Event спрацьовує у GTM Preview?
• Чи видно подію і параметри у GA4 DebugView?
• Чи протестовані мобільні та десктопні сценарії?
• Чи немає подвійних або пропущених спрацьовувань?

Поширені питання

Чи автоматично GA4 відстежує додавання в кошик?

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

Чи варто позначати add_to_cart як конверсію?

Додавання в кошик — це важливий мікроконверсійний показник, але не основна конверсія. Головною залишається подія purchase. Однак для оптимізації рекламних кампаній add_to_cart можна використовувати як конверсію, залежно від маркетингової стратегії.

Чому дані add_to_cart не відображаються одразу у GA4?

Подія має з’являтися у DebugView і звітах у реальному часі майже миттєво, але у стандартних звітах може бути затримка обробки даних. Також причинами можуть бути помилки у Measurement ID, налаштуваннях consent, блокувальники реклами, неправильні тригери чи непоширений контейнер GTM.

Чи потрібне ручне налаштування для WooCommerce?

Деякі плагіни WooCommerce автоматично відправляють події GA4, але якість даних залежить від їхніх налаштувань. Обов’язково перевіряйте коректність item_id, ціни, кількості, категорії та валюти у GTM Preview і GA4 DebugView.

Які параметри найбільш важливі в add_to_cart?

Найважливіші — це event (add_to_cart), currency, value і масив items із item_id, item_name, price та quantity. Для глибшого аналізу додають категорії, бренд, варіанти та інформацію про списки.

Підсумовуючи, правильне налаштування відстеження події «Додати в кошик» в Google Analytics 4 допомагає не просто зафіксувати клік, а оцінити наміри покупця і підвищити ефективність продажів. Важливі кроки — стандартизація dataLayer, створення тригерів у GTM, тегів GA4 Event і тестування через DebugView. Для надійної аналітики регулярно перевіряйте налаштування й підтримуйте веб-інфраструктуру, використовуючи можливості Hostragons для хостингу, доменів і SSL.