PostHog Reference Architecture

Overview

Production architecture for product analytics with PostHog. Covers event tracking design, feature flag management, experimentation framework, and integration patterns for web and backend applications.

Prerequisites

• PostHog project (Cloud or self-hosted)

• posthog-js and posthog-node SDKs

• Understanding of event-driven analytics

• Feature flag strategy planned

Architecture Diagram

set -euo pipefail ┌──────────────────────────────────────────────────────┐ │ Client Applications │ │ Web (posthog-js) │ Mobile (posthog-react-native) │ └──────────┬────────────────────────────┬──────────────┘ │ │ ▼ ▼ ┌──────────────────────────────────────────────────────┐ │ PostHog Platform │ │ ┌───────────┐ ┌───────────┐ ┌─────────────────┐ │ │ │ Events │ │ Feature │ │ Experiments │ │ │ │ & Props │ │ Flags │ │ (A/B tests) │ │ │ └─────┬─────┘ └─────┬─────┘ └───────┬─────────┘ │ │ │ │ │ │ │ ┌─────┴──────────────┴─────────────────┴───────┐ │ │ │ Analytics Engine │ │ │ │ Trends │ Funnels │ Retention │ Paths │ SQL │ │ │ └──────────────────────────────────────────────┘ │ ├──────────────────────────────────────────────────────┤ │ Backend (posthog-node) │ │ Server Events │ Flag Evaluation │ Group Analytics │ └──────────────────────────────────────────────────────┘

Instructions

Step 1: Event Taxonomy Design

// events.ts - Define your event taxonomy export const EVENTS = { // User lifecycle USER_SIGNED_UP: 'user_signed_up', USER_LOGGED_IN: 'user_logged_in', USER_ONBOARDING_COMPLETED: 'user_onboarding_completed',

// Core product actions FEATURE_USED: 'feature_used', ITEM_CREATED: 'item_created', ITEM_SHARED: 'item_shared', EXPORT_COMPLETED: 'export_completed',

// Revenue SUBSCRIPTION_STARTED: 'subscription_started', SUBSCRIPTION_UPGRADED: 'subscription_upgraded', SUBSCRIPTION_CANCELED: 'subscription_canceled', } as const;

// Standard properties for consistency interface EventProperties { feature_name?: string; source?: 'web' | 'mobile' | 'api'; plan_tier?: 'free' | 'pro' | 'enterprise'; duration_ms?: number; }

Step 2: Client-Side Integration

import posthog from 'posthog-js';

posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, { api_host: 'https://us.i.posthog.com', capture_pageview: true, capture_pageleave: true, autocapture: true, persistence: 'localStorage+cookie', loaded: (ph) => { if (process.env.NODE_ENV === 'development') { ph.opt_out_capturing(); // Disable in dev } }, });

// Identify users function identifyUser(userId: string, traits: Record<string, any>) { posthog.identify(userId, { email: traits.email, plan: traits.plan, company: traits.company, });

// Set group for company-level analytics if (traits.companyId) { posthog.group('company', traits.companyId, { name: traits.company, plan: traits.plan, }); } }

Step 3: Feature Flag Architecture

// flags.ts - Feature flag definitions export const FLAGS = { NEW_DASHBOARD: 'new-dashboard-v2', AI_FEATURES: 'ai-features-beta', PRICING_EXPERIMENT: 'pricing-page-experiment', } as const;

// React hook for feature flags function useFeatureFlag(flagKey: string) { const [enabled, setEnabled] = useState(false);

useEffect(() => { posthog.onFeatureFlags(() => { setEnabled(posthog.isFeatureEnabled(flagKey) ?? false); }); }, [flagKey]);

return enabled; }

// Server-side flag evaluation import { PostHog } from 'posthog-node'; const serverPosthog = new PostHog(process.env.POSTHOG_API_KEY!);

async function getServerFlags(userId: string) { return serverPosthog.getAllFlags(userId); }

Step 4: Experiment Tracking

function trackExperiment(experimentKey: string, userId: string) { const variant = posthog.getFeatureFlag(experimentKey);

posthog.capture('$experiment_started', { $experiment_name: experimentKey, $experiment_variant: variant, });

return variant; }

Error Handling

Issue Cause Solution

Events not appearing SDK not initialized Check init call and API key

Flag always false Not loaded yet Use onFeatureFlags callback

Missing user properties Not identified Call identify before capture

High event volume Autocapture too broad Configure autocapture selectively

Examples

Funnel Tracking Setup

// Track a conversion funnel posthog.capture(EVENTS.ITEM_CREATED, { source: 'web' }); posthog.capture(EVENTS.ITEM_SHARED, { share_method: 'link' }); posthog.capture(EVENTS.EXPORT_COMPLETED, { format: 'pdf' });

Resources

• PostHog Documentation

• PostHog Feature Flags

• PostHog Experiments

Output

• Configuration files or code changes applied to the project

• Validation report confirming correct implementation

• Summary of changes made and their rationale