Інтеграція Google Analytics 4 на сайт: повне керівництво

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

Розробка та обслуговування будь-яких видів сайтів:

Інформаційні сайти або веб-програми
Сайти візитки, landing page, корпоративні сайти, онлайн каталоги, квіз, промо-сайти, блоги, ресурси новин, інформаційні портали, форуми, агрегатори
Сайти або веб-програми електронної комерції
Інтернет-магазини, B2B-портали, маркетплейси, онлайн-обмінники, кешбек-сайти, біржі, дропшиппінг-платформи, парсери товарів
Веб-програми для управління бізнес-процесами
CRM-системи, ERP-системи, корпоративні портали, системи управління виробництвом, парсери інформації
Сайти або веб-програми електронних послуг
Дошки оголошень, онлайн-школи, онлайн-кінотеатри, конструктори сайтів, портали надання електронних послуг, відеохостинги, тематичні портали

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

Інтеграція Google Analytics 4 на сайт: повне керівництво

Аналітика та метрикиПростий~1 день
Часті запитання

Після міграції з Universal Analytics на GA4 ви помітили, що дані про покупки зникають до 30%, а конверсії рахуються невірно? Подієва модель GA4 вимагає іншого підходу. Ми стикалися з проєктами, де неправильне налаштування подій призводило до втрати до 40% цінних даних. Наш досвід з більш ніж 100 проєктами показує, що ключ до точної аналітики — коректне відстеження кожної взаємодії. Середній ріст відстежуваних конверсій після правильного налаштування склав 23%, а зниження витрат на залучення клієнта — 20%.

Чому GA4 використовує подієву модель?

На відміну від сесійної моделі UA, GA4 кожну дію користувача фіксує як окрему подію. Це дає гнучкість: можна відстежувати будь-які взаємодії без попередньо визначених категорій. Але це ж ускладнює налаштування: потрібно явно описувати події та їх параметри. Наприклад, перегляд сторінки — це подія page_view, а натискання кнопки — custom_event. Така модель дозволяє будувати наскрізну аналітику та легко підключати машинне навчання Google. GA4 обробляє події в 2,5 рази швидше, ніж Universal Analytics, за рахунок асинхронної передачі даних. Згідно з офіційною документацією Google, подієва модель забезпечує точність даних на рівні 95%.

Як встановити GA4 на сайт?

Найшвидший спосіб — вставити код gtag.js на всі сторінки. Для цього виконайте кроки:

  1. Додайте в наступний код:
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX', {
    send_page_view: false // відключити автоперегляд для SPA
  });
</script>
  1. Якщо використовуєте Google Tag Manager, створіть тег GA4 Configuration та тригер All Pages.

  2. Для SPA (React, Next.js) надсилайте page_view вручну при кожній зміні маршруту. Ось приклад для Next.js:

import { useRouter } from 'next/router';

useEffect(() => {
  const handleRouteChange = (url) => {
    window.gtag('config', process.env.NEXT_PUBLIC_GA_ID, {
      page_path: url,
    });
  };

  router.events.on('routeChangeComplete', handleRouteChange);
  return () => router.events.off('routeChangeComplete', handleRouteChange);
}, [router.events]);
  1. Перевірте надсилання подій через Google Tag Assistant або в реальному часі в звітах GA4.

Налаштування кастомних подій та Enhanced Ecommerce

Базові події (page_view, scroll) збираються автоматично, але для інтернет-магазину потрібні події e-commerce. Використовуйте подію add_to_cart з параметрами:

gtag('event', 'add_to_cart', {
  currency: 'UAH',
  value: product.price,
  items: [{
    item_id: product.id,
    item_name: product.name,
    item_brand: product.brand,
    price: product.price,
    quantity: 1
  }]
});

Для завершення покупки:

gtag('event', 'purchase', { transaction_id: orderId, value: orderTotal, currency: 'UAH', items: orderItems }); 

Не забудьте додати view_item та view_item_list для відстеження товарної воронки. Розширити аналітику допоможуть таблиці параметрів і подій.

Тип події Обов'язкові параметри Коли надсилати
view_item_list items[] (item_id, item_name) Показ списку товарів
view_item item_id, item_name, price Перегляд картки товару
add_to_cart currency, value, items[] Клік «В кошик»
remove_from_cart currency, value, items[] Видалення з кошика
purchase transaction_id, value, currency, items[] Підтвердження замовлення

Типові помилки при інтеграції GA4

Ось найчастіші проблеми, які ми зустрічали на проєктах:

Помилка Наслідки Рішення
Відсутність фільтрації внутрішнього трафіку Спотворення даних: власні візити співробітників завищують метрики Налаштуйте IP-фільтр в адмінці GA4
Дублювання подій при одночасному використанні gtag.js та GTM Подвоєння числа подій, невірні конверсії Використовуйте лише один спосіб встановлення
Невірна валюта в e-commerce Дохід не конвертується в звітах Завжди передавайте параметр currency
Ігнорування user_id Неможливо побудувати наскрізну аналітику Надсилайте user_id при авторизації
Кейс: інтернет-магазин з 5000 товарів При впровадженні GA4 у клієнта зі сфери електронної комерції ми виявили, що події purchase не містили обов'язковий параметр transaction_id. Через це дані про замовлення не відображалися в звітах. Після додавання параметра та налаштування воронки конверсій клієнт отримав повну картину продажів. Економія на витратах по аналітиці склала до 50% за рахунок відмови від сторонніх систем.

Кастомні розмірності та метрики

Для передачі додаткових даних, наприклад, плану підписки користувача, використовуйте кастомні розмірності та метрики. Попередньо зареєструйте їх в адмінці GA4 (до 50 шт.). Приклад:

gtag('config', 'G-XXXXXXXXXX', {
  user_id: userId,
  custom_map: {
    'dimension1': 'user_plan',
    'metric1': 'cart_value'
  }
});
gtag('set', 'user_properties', {
  user_plan: 'premium'
});

Склад послуги з налаштування GA4

  • Аудит поточного встановлення аналітики, підготовка схеми подій.
  • Базове встановлення через gtag.js або GTM з надсиланням усіх стандартних подій.
  • Налаштування e-commerce для інтернет-магазину (Enhanced Ecommerce).
  • Створення кастомних розмірностей та метрик під бізнес-завдання.
  • Тестування надсилання подій через Google Tag Assistant або в реальному часі.
  • Навчання команди роботі зі звітами GA4, передача документації по структурі подій.

Терміни та вартість

Термін базової інтеграції — від 1 до 2 днів. Складні проєкти з кастомними подіями та інтеграцією CRM — до 5 днів. Вартість розраховується індивідуально, залежить від обсягу подій та складності SPA. Зв'яжіться з нами для оцінки вашого проєкту. Замовте налаштування GA4 під ключ і отримайте консультацію з оптимізації аналітики.

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

Наші компетенції:

Останні роботи

  • Розробка сайту компанії B2B ADVANCE
    Розробка сайту компанії B2B ADVANCE
    1543
  • Розробка веб-додатків для компанії FEEDME
    Розробка веб-додатків для компанії FEEDME
    1396
  • Розробка веб-сайту для компанії БЕЛФІНГРУП
    Розробка веб-сайту для компанії БЕЛФІНГРУП
    1081
  • Розробка інтернет магазину для компанії FURNORO
    Розробка інтернет магазину для компанії FURNORO
    1375
  • Розробка веб-додатків для компанії Enviok
    Розробка веб-додатків для компанії Enviok
    1143
  • Розробка веб-сайту для компанії ФІКСПЕР
    Розробка веб-сайту для компанії ФІКСПЕР
    1060