Google Analytics 4 Integration
Google Analytics 4 (GA4) is Google's current analytics generation. Uses event-based model instead of session-based. Basic setup via gtag.js or Google Tag Manager.
Installation via gtag.js
<!-- In <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 // disable auto page_view for SPA
});
</script>
For React/Next.js (SPA)
// Manual page_view on route change
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]);
Custom Events
// Add to cart
gtag('event', 'add_to_cart', {
currency: 'USD',
value: product.price,
items: [{
item_id: product.id,
item_name: product.name,
item_brand: product.brand,
price: product.price,
quantity: 1
}]
});
// Purchase
gtag('event', 'purchase', {
transaction_id: orderId,
value: orderTotal,
currency: 'USD',
items: orderItems
});
Custom Dimensions and Metrics
// Set user properties (dimensions)
gtag('set', 'user_properties', {
user_plan: 'premium',
customer_lifetime_value: 5000,
registration_date: '2024-01-15'
});
// Event-level custom dimension
gtag('event', 'form_submit', {
form_name: 'newsletter',
form_fields_count: 3
});
Event Measurement Plan
Recommended events to track:
- page_view: page viewed
- scroll (auto): users scrolled 90%
- view_item: product page viewed
- add_to_cart: item added to cart
- begin_checkout: checkout started
- add_payment_info: payment entered
- purchase: order completed
- refund: order refunded
- search: search performed
BigQuery Integration
-- GA4 events in 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;
-- Daily active users
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;
Conversion Tracking
// Mark important page as conversion
gtag('event', 'page_view', {
page_title: 'Thank you',
page_path: '/thank-you'
});
// Or custom conversion event
gtag('event', 'conversion', {
conversion_type: 'purchase'
});
Delivery Time
GA4 setup with custom events, BigQuery integration, and reporting dashboard — 1–2 business days.