Google Analytics 4

GA4 Event Model

GA4 replaced Universal Analytics in 2023. Everything is an event. Auto-collected events: page_view, scroll, click, session_start. For business-critical actions (signups, purchases), you add custom events.

Installing GA4

<!-- Option 1: gtag.js (paste in head of every page) -->
<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');
</script>

// Option 2: Next.js (App Router — recommended)
import { GoogleAnalytics } from '@next/third-parties/google';
// In layout.tsx:
// <GoogleAnalytics gaId="G-XXXXXXXXXX" />

Custom Event Tracking

// Track signup
async function handleSignup(formData) {
  const user = await createUser(formData);
  gtag('event', 'sign_up', { method: 'email' });
}

// Track purchase
gtag('event', 'purchase', {
  transaction_id: 'T-12345',
  value: 29.99,
  currency: 'USD',
  items: [{ item_id: 'PRO', item_name: 'Pro Plan', price: 29.99, quantity: 1 }]
});

// Track button click
document.getElementById('cta-btn').addEventListener('click', () => {
  gtag('event', 'cta_click', { button_id: 'hero_cta', page: window.location.pathname });
});

Key Metrics

Cookie Consent (GDPR)

// If you operate in EU, use Consent Mode v2
gtag('consent', 'update', {
  analytics_storage: 'granted',   // User accepted analytics
  ad_storage: 'denied',           // User denied ads
  ad_user_data: 'denied',
  ad_personalization: 'denied',
});