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

  1. Go to Google Analytics
  2. Create a GA4 property
  3. Navigate to AdminData Streams
  4. Copy your Measurement ID (format: G-XXXXXXXXXX)

Add to siteConfig

config/siteConfig.ts
export const siteConfig = {
  // ... other config
  analytics: {
    googleAnalyticsId: 'G-6VEW30Q7WR', // Your GA4 ID
  },
};

Test

  1. Run npm run dev
  2. Accept cookies in the banner
  3. Check Google AnalyticsRealtime 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.com or https://eu.i.posthog.com)

Add environment variables

.env.local
NEXT_PUBLIC_POSTHOG_KEY=phc_your_key_here
NEXT_PUBLIC_POSTHOG_HOST=https://eu.i.posthog.com

Test

  1. Run npm run dev
  2. Accept cookies
  3. Check PostHog DashboardActivityEvents

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 SettingsProject SettingsRecordings 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

components/YourComponent.tsx
'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

components/YourComponent.tsx
'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.

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

  1. Verify googleAnalyticsId in config/siteConfig.ts
  2. Accept cookies in banner
  3. Check DevTools Console: typeof window.gtag should return "function"
  4. Check Network tab for requests to google-analytics.com

PostHog not tracking

  1. Verify environment variables are set
  2. Accept cookies in banner
  3. Check DevTools Console: posthog should return PostHog object
  4. Check Network tab for requests to /relay-sdK3/
localStorage.removeItem('cookie-consent')
// Refresh page

Next Steps

How is this guide ?

Last updated on

On this page