Analytics
Configure Google Analytics and PostHog for tracking user behavior
Plainform includes Google Analytics 4 (GA4) and PostHog with GDPR-compliant cookie consent.
Overview
Google Analytics 4
- Web analytics and traffic sources
- Conversion tracking
- Free tier available
PostHog
- Product analytics and session recordings
- Custom event tracking
- Feature flags and A/B testing
Both platforms respect user privacy through the CookieBanner component - analytics are disabled until users accept cookies.
Google Analytics 4
Get your Measurement ID
- Go to Google Analytics
- Create a GA4 property
- Navigate to Admin → Data Streams
- Copy your Measurement ID (format:
G-XXXXXXXXXX)
Add to siteConfig
export const siteConfig = {
// ... other config
analytics: {
googleAnalyticsId: 'G-6VEW30Q7WR', // Your GA4 ID
},
};Test
- Run
npm run dev - Accept cookies in the banner
- Check Google Analytics → Realtime reports
To disable: Set googleAnalyticsId: undefined or remove the analytics object.
PostHog
Get credentials
Sign up at posthog.com and get:
- Project API Key (starts with
phc_) - Host URL (
https://us.i.posthog.comorhttps://eu.i.posthog.com)
Add environment variables
NEXT_PUBLIC_POSTHOG_KEY=phc_your_key_here
NEXT_PUBLIC_POSTHOG_HOST=https://eu.i.posthog.comTest
- Run
npm run dev - Accept cookies
- Check PostHog Dashboard → Activity → Events
Anonymous Tracking: If users decline cookies, PostHog won't capture any events by default. To enable anonymous tracking when cookies are declined, go to PostHog Settings → Project Settings → Recordings and enable "Hash anonymous recordings". This allows you to capture events without identifying users.
PostHog is automatically initialized in instrumentation-client.ts with cookieless mode enabled.
Tracking Custom Events
PostHog
'use client';
import { usePostHog } from 'posthog-js/react';
export function YourComponent() {
const posthog = usePostHog();
const handleClick = () => {
posthog.capture('button_clicked', {
button_name: 'cta_signup',
});
};
return <button onClick={handleClick}>Sign Up</button>;
}Google Analytics
'use client';
export function YourComponent() {
const handleClick = () => {
if (window.gtag) {
window.gtag('event', 'button_click', {
event_category: 'engagement',
});
}
};
return <button onClick={handleClick}>Sign Up</button>;
}For detailed PostHog examples, see Use PostHog Analytics.
Cookie Consent
The CookieBanner manages consent for both platforms:
Accept cookies:
- PostHog:
posthog.opt_in_capturing() - GA4:
gtag('consent', 'update', { analytics_storage: 'granted' })
Decline cookies:
- PostHog:
posthog.opt_out_capturing() - GA4:
gtag('consent', 'update', { analytics_storage: 'denied' })
User preference is stored in localStorage with key cookie-consent.
Troubleshooting
GA4 not tracking
- Verify
googleAnalyticsIdinconfig/siteConfig.ts - Accept cookies in banner
- Check DevTools Console:
typeof window.gtagshould return"function" - Check Network tab for requests to
google-analytics.com
PostHog not tracking
- Verify environment variables are set
- Accept cookies in banner
- Check DevTools Console:
posthogshould return PostHog object - Check Network tab for requests to
/relay-sdK3/
Clear consent to retest
localStorage.removeItem('cookie-consent')
// Refresh pageNext Steps
- Use PostHog Analytics - Advanced event tracking
- Environment Variables - Manage configuration
- SEO Configuration - Optimize for search engines
How is this guide ?
Last updated on