Overview
ZeroStarter includes built-in integration with PostHog for comprehensive product analytics, feature flags, session recordings, and user behavior tracking. When configured, PostHog automatically tracks page views and user interactions.
Features
- Product Analytics: Track user behavior and product usage
- Session Recordings: Replay user sessions for debugging and insights
- Feature Flags: Roll out features gradually with confidence
- A/B Testing: Run experiments to optimize your product
- Funnels & Paths: Understand user journeys and conversion flows
Setup
Sign up at PostHog (cloud) or self-host
Create a new project
Copy your Project API Key from Project Settings
Add your PostHog credentials to your .env file:
# Optional: PostHog Analytics
NEXT_PUBLIC_POSTHOG_HOST=https://eu.i.posthog.com
NEXT_PUBLIC_POSTHOG_KEY=phc_your_project_api_key
Use https://us.i.posthog.com for US Cloud, https://eu.i.posthog.com for EU Cloud, or your self-hosted URL.
Environment Configuration
The PostHog variables are configured in packages/env/src/web-next.ts:
client: {
NEXT_PUBLIC_POSTHOG_HOST: z.url().optional(),
NEXT_PUBLIC_POSTHOG_KEY: z.string().optional(),
}
Implementation
Client Instrumentation
PostHog is initialized in web/next/instrumentation-client.ts:
web/next/instrumentation-client.ts
import { env } from "@packages/env/web-next"
import posthog from "posthog-js"
if (typeof window !== "undefined" && env.NEXT_PUBLIC_POSTHOG_KEY) {
posthog.init(env.NEXT_PUBLIC_POSTHOG_KEY, {
api_host: env.NEXT_PUBLIC_POSTHOG_HOST || "https://eu.i.posthog.com",
defaults: "2025-11-30",
})
}
Provider Setup
The PostHog provider wraps the application in web/next/src/app/providers.tsx:
web/next/src/app/providers.tsx
import { PostHogProvider } from "@posthog/react"
import posthog from "posthog-js"
export function OuterProvider({ children }: { children: React.ReactNode }) {
return (
<PostHogProvider client={posthog}>
{children}
</PostHogProvider>
)
}
Usage
Track Custom Events
import posthog from "posthog-js"
// Track a custom event
posthog.capture("button_clicked", {
button_name: "signup",
page: "landing",
})
Identify Users
import posthog from "posthog-js"
// Identify a user after authentication
posthog.identify(user.id, {
email: user.email,
name: user.name,
})
Feature Flags
import posthog from "posthog-js"
// Check if a feature flag is enabled
if (posthog.isFeatureEnabled("new-dashboard")) {
// Show new dashboard
}
React Hooks
import { usePostHog, useFeatureFlagEnabled } from "@posthog/react"
function Component() {
const posthog = usePostHog()
const showNewFeature = useFeatureFlagEnabled("new-feature")
const handleClick = () => {
posthog?.capture("feature_used")
}
return showNewFeature ? (
<NewFeature onClick={handleClick} />
) : (
<OldFeature />
)
}
Disabling Analytics
To disable PostHog analytics, simply remove or leave empty the NEXT_PUBLIC_POSTHOG_KEY environment variable:
# Analytics disabled
NEXT_PUBLIC_POSTHOG_KEY=
Privacy Considerations
- PostHog supports privacy-first analytics with configurable data retention
- Session recordings can be disabled or configured to mask sensitive data
- GDPR-compliant with data residency options (EU/US)
- Users can opt-out using PostHog’s built-in opt-out mechanisms
Always ensure your analytics implementation complies with privacy regulations like GDPR and CCPA.
Advanced Features
Session Recordings
Enable session recordings to replay user sessions:
posthog.init(env.NEXT_PUBLIC_POSTHOG_KEY, {
api_host: env.NEXT_PUBLIC_POSTHOG_HOST,
session_recording: {
maskAllInputs: true,
maskTextSelector: ".sensitive",
},
})
A/B Testing
Run experiments with multivariate feature flags:
function Component() {
const variant = useFeatureFlagVariantKey("checkout-flow")
switch (variant) {
case "variant-a":
return <CheckoutFlowA />
case "variant-b":
return <CheckoutFlowB />
default:
return <DefaultCheckoutFlow />
}
}
Resources