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

Після міграції з 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>

2. Якщо використовуєте Google Tag Manager, створіть тег GA4 Configuration та тригер All Pages.

3. Для 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]);

4. Перевірте надсилання подій через 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 для відстеження товарної воронки. Розширити аналітику допоможуть таблиці параметрів і подій.

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

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

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

Для передачі додаткових даних, наприклад, плану підписки користувача, використовуйте кастомні розмірності та метрики. Попередньо зареєструйте їх в адмінці 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 — потужний інструмент, але тільки при правильному налаштуванні. Наш досвід з десятками інтеграцій гарантує, що ви отримаєте чисті дані без втрат.

Як налаштувати веб-аналітику: GA4, GTM, Яндекс.Метрика та Amplitude

Ми часто бачимо: конверсія 1.2 %, трафік зростає, а конверсія стоїть. Маркетолог дивиться в Google Analytics і каже: «користувачі йдуть з кроку 2 оформлення замовлення». Розробник відкриває той самий крок — помилок немає, в Sentry тиша. Значить, справа не в JS-базі, а в UX або в кривих даних, які показує аналітика. Аналітика ламається непомітно: подія перестала трекатися після редеплою — ніхто не помітив; GTM-тег стріляє двічі — дані задвоїлися; фільтр GA4 виключає бота, який насправді — реальний трафік з корпоративного проксі. Замовте аудит поточних тегів — ми знайдемо причину за тиждень. Ми маємо понад 5 років досвіду в налаштуванні веб-аналітики для 100+ проєктів — гарантуємо прозорість та достовірність даних.

Після правильного налаштування економія рекламного бюджету може досягати значної суми щомісяця — це реальний кейс інтернет-магазину з 50 000 сесій на день, де дедуплікація purchase повернула 20 % невірно приписаних конверсій.

Чому події GA4 дублюються і як це виправити?

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

Автоматичні події GA4 збирає сам: page_view, scroll, click, session_start. Рекомендовані події потрібно реалізувати самостійно: purchase, add_to_cart, begin_checkout, view_item. Google очікує конкретну схему параметрів — якщо передати product_id замість item_id, дані потрапляють в GA4, але не в стандартні звіти e-commerce. Кастомні події для специфіки проєкту: filter_applied, video_progress, form_step_completed. Кастомні параметри необхідно зареєструвати в GA4 Admin → Custom definitions, інакше вони не будуть доступні у звітах.

Часта помилка — подія purchase з дублями. Причина: тег спрацьовує на сторінці /thank-you, користувач оновлює сторінку — другий purchase іде в GA4. Рішення: на бекенді генеруємо унікальний transaction_id і передаємо в подію. GA4 de-duplicates по ньому — перевіряйте через DebugView. Правильна атрибуція економить до 20 % рекламного бюджету, який раніше йшов на невірно приписані конверсії.

Як налаштувати data layer, щоб не втратити дані?

GTM — інструмент для керування тегами без деплою коду. Але «без коду» не означає «без архітектури». Data Layer — основа всього. Передаємо дані з застосунку в GTM через dataLayer.push(). Структура: event + контекстні дані. Для e-commerce: перед відкриттям сторінки продукту — push з даними товару. GTM-тег читає з dataLayer, не з DOM.

window.dataLayer = window.dataLayer || [];
dataLayer.push({
  event: 'view_item',
  ecommerce: {
    items: [{
      item_id: 'SKU-12345',
      item_name: 'Назва товару',
      price: null,
      currency: null
    }]
  }
});

Погана практика: GTM-тег парсить DOM — шукає ціну в span.price, назву в h1. Це ламається при будь-якій зміні верстки. Хороша практика: завжди dataLayer. Використовуємо Preview Mode для налагодження та GTM Server-Side для чутливих даних — відправка з сервера, не з браузера, обходить блокувальники реклами, не втрачає дані. Server-side підхід у 2-3 рази надійніший за client-side за показником втрати подій через розширення браузера.

Як Яндекс.Метрика доповнює веб-аналітику?

Для російської аудиторії Метрика обов'язкова — особливо Вебвізор. Запис сесії користувача, який кинув кошик, часто дає відповідь швидше, ніж тиждень аналізу воронки. Цілі в Метриці: подієві (через ym(COUNTER_ID, 'reachGoal', 'GOAL_NAME')) або автоматичні (клік по кнопці, відвідування сторінки). Зв'язка з CRM через Метрика Плюс — передача офлайн-конверсій. Наш досвід: у 8 з 10 проєктів після налаштування Метрики знаходили приховані баги в UX, які не показували інші системи.

Що дає product analytics в Amplitude?

Amplitude — продуктовий інструмент, на відміну від маркетингових GA4 та Метрики. Він заточений під аналіз поведінки користувачів всередині продукту: воронки, ретеншн, user paths. Amplitude підходить для SaaS-продуктів, мобільних застосунків та будь-яких сервісів із зареєстрованими користувачами, де важливо зрозуміти, як проходять онбординг, на якому кроці йдуть, які фічі використовують частіше. Ключові концепції: identify (пов'язати анонімного користувача з userId після авторизації), group (акаунт у B2B SaaS), когорти для утримання. Amplitude Chart — воронка кроків за останні 30 днів з розбивкою за джерелом.

Моніторинг якості даних

Аналітика без моніторингу — чорна скринька. Налаштовуємо:

• GA4 Realtime — перевіряємо після кожного деплою, що ключові події приходять
• Alerting в GA4 — аномалія в кількості подій purchase (різке падіння = щось зламалося)
• GTM Preview в staging-оточенні перед продакшеном
• Ручні тести воронок раз на тиждень — просто пройти шлях покупця і перевірити, що все трекається

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

Що перевіряємо після кожного деплою

• Чи всі рекомендовані події присутні в DebugView
• Чи немає задвоєнь (рахуємо кількість purchase на 100 сесій)
• Чи не змінилася структура dataLayer після оновлення фронтенду

Що входить в роботу

Процес та терміни

1. Аудит поточних тегів та даних (2 дні)
2. Дизайн подієвої схеми (2 дні)
3. Розробка Data Layer та налаштування тегів (3–5 днів)
4. QA в Preview Mode та на staging (2 дні)
5. Деплой та налаштування дашбордів (1 день)

Вартість розраховується індивідуально. Отримайте консультацію з налаштування веб-аналітики для вашого проєкту — ми оцінимо обсяг робіт за один день. Зв'яжіться з нами, щоб почати. Для точного розрахунку вартості залиште заявку — ми проаналізуємо ваш стек за 1 день.