Add analytics

Analytics is bundled in the kit — both Google Analytics 4 and PostHog. There is no script to wire by hand; each turns on when its env var is set and stays fully off (no script, no requests) when unset. The kit is a single-page app, so both are wired to track client-side route changes as page views, not just the first load.

End-user setup walkthrough: Analytics (Google Analytics + PostHog).

Ask first

• "Do you want Google Analytics, PostHog, or both?"
• For GA4: "Do you have a GA4 Measurement ID yet?" (format G-XXXXXXXXXX). If not, point them at analytics.google.com to create a property.
• For PostHog: "Do you have a PostHog Project API Key yet?" (format phc_…). If not, point them at posthog.com.

Wire it (env only)

Do not add <script> tags or edit app/routes/__root.tsx. The bundled GoogleAnalytics component and app/lib/posthog.ts already handle loading, init, and route-change page views. Just add the keys to .env (and the same keys, without values, to .env.example):

# Google Analytics 4
VITE_GA_MEASUREMENT_ID=G-XXXXXXXXXX

# PostHog
VITE_POSTHOG_KEY=phc_xxxxxxxxxxxxxxxxxxxxxxxx
# VITE_POSTHOG_HOST=https://us.i.posthog.com   # EU: https://eu.i.posthog.com

Restart the dev server after editing .env.

PostHog additionally identifies the signed-in user and emits user_logged_in / user_signed_up from the auth flow automatically — no extra wiring.

Cookie consent banner

GA4 sets cookies. In most jurisdictions (EU, UK, several US states) this requires a cookie consent banner. Tell the user honestly:

GA4 is going to require a cookie banner if you have visitors from the EU, UK, or some US states. This kit does not ship one. You will need to add one before going live to that audience. Cookiebot, Osano, or a custom banner all work. PostHog can be run cookieless if you prefer.

If they ask for a banner, that is a separate task; offer to scaffold one when they want.

Verify

• GA4: build for production (pnpm build) and deploy — GA4 does not log localhost. Visit the deployed site; your visit appears in GA4 Realtime within a minute. Use DebugView for individual events.
• PostHog: works on localhost. Open the site, then check Activity in PostHog — $pageview and (after signing in) user_logged_in show up within seconds.

After it is wired

Tell the user:

Analytics is connected. GA4 live data appears in Realtime within a minute of a real visit (reports take 24–48 hours to populate fully); PostHog shows events almost instantly. Remember to set up a cookie banner before you launch to EU/UK visitors.