Інтеграція Google Analytics 4
Google Analytics 4 (GA4) — поточне покоління аналітики Google. Використовує подійну модель замість сесійної. Базова установка через gtag.js або Google Tag Manager.
Встановлення через gtag.js
<!-- У <head> -->
<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 // вимкніть авто page_view для SPA
});
</script>
Для React/Next.js (SPA)
// Ручна відправка page_view при зміні маршруту
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]);
Користувацькі события
// Додано в кошик
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
});
Користувацькі виміри та метрики
// Встановіть властивості користувача (виміри)
gtag('set', 'user_properties', {
user_plan: 'premium',
customer_lifetime_value: 5000,
registration_date: '2024-01-15'
});
// Користувацький розмір на рівні события
gtag('event', 'form_submit', {
form_name: 'newsletter',
form_fields_count: 3
});
План вимірювання события
Рекомендовані события для відстеження:
- page_view: переглянута сторінка
- scroll (авто): користувачі прокрутили 90%
- view_item: переглянута сторінка товару
- add_to_cart: товар додан в кошик
- begin_checkout: почато оформлення
- add_payment_info: введено платіж
- purchase: замовлення завершено
- refund: замовлення повернено
- search: пошук виконаний
Інтеграція BigQuery
-- GA4 события в BigQuery
SELECT
event_name,
event_timestamp,
user_id,
(SELECT value.string_value
FROM event_params
WHERE key = 'page_path') as page_path,
(SELECT value.int_value
FROM event_params
WHERE key = 'value') as event_value
FROM `project.analytics_XXXXXXX.events_*`
WHERE event_date = '20240315'
LIMIT 100;
-- Щоденні активні користувачи
SELECT
event_date,
COUNT(DISTINCT user_pseudo_id) as dau
FROM `project.analytics_XXXXXXX.events_*`
WHERE event_name = 'page_view'
GROUP BY event_date
ORDER BY event_date DESC;
Відстеження конверсії
// Позначте важливу сторінку як конверсію
gtag('event', 'page_view', {
page_title: 'Thank you',
page_path: '/thank-you'
});
// Або користувацька подія конверсії
gtag('event', 'conversion', {
conversion_type: 'purchase'
});
Час виконання
Налаштування GA4 з користувацькими подіями, інтеграцією BigQuery та панеллю аналітики — 1–2 робочих дні.