senternet-site-posthog

Install posthog-js, store the project API key and host in VITE_POSTHOG_KEY and VITE_POSTHOG_HOST env vars, and create a helper that dynamically imports posthog-js only in production. Call the init function from a top-level useEffect so it runs after first paint.

Use NEXT_PUBLIC_POSTHOG_KEY and NEXT_PUBLIC_POSTHOG_HOST env vars and initialize PostHog inside a 'use client' provider mounted from app/layout.tsx, guarded on typeof window. Capture pageviews on usePathname and useSearchParams changes since automatic capture misses client-side navigations.

Gate initialization on import.meta.env.PROD combined with a configured API key, and set real values only in .env.production. With this setup, dev builds produce no requests to the PostHog host in the network tab.

Yes, autocapture can sweep up form values and text content, so this setup leaves it off by default. Events are sent through a single capture helper limited to non-PII metadata like provider types, counts, flags, and section names.

PostHog's automatic pageview capture only sees the initial document load, not client-side route changes. Track pageviews manually on usePathname or useSearchParams changes, wrapping the search params reader in Suspense to avoid opting the route into dynamic rendering.