Интеграция 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 // отключить автопросмотр для 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: 'RUB',
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: 'RUB',
items: orderItems
});
Кастомные размерности и метрики
gtag('config', 'G-XXXXXXXXXX', {
user_id: userId, // для cross-device tracking
custom_map: {
'dimension1': 'user_plan',
'metric1': 'cart_value'
}
});
gtag('set', 'user_properties', { user_plan: 'premium' });
Срок установки: несколько часов для базовой интеграции.