The wizard has completed a deep integration of PostHog into the Quickpaper project. This Next.js 16.1.1 application now has comprehensive event tracking for user interactions across the landing page, including both client-side and server-side analytics.
instrumentation-client.ts- Client-side PostHog initialization using the Next.js 15.3+ recommended patternlib/posthog-server.ts- Server-side PostHog client for API route tracking.env- Environment variables for PostHog configuration
next.config.ts- Added reverse proxy rewrites for PostHog to avoid ad blockerscomponents/landing/hero-section.tsx- Added install command copy and CTA button trackingcomponents/landing/installation-section.tsx- Added command copy, platform selection, and mode selection trackingcomponents/landing/language-switcher.tsx- Added language change trackingcomponents/landing/navbar.tsx- Added navigation and GitHub link trackingcomponents/landing/footer.tsx- Added footer link trackingcomponents/landing/cta-section.tsx- Added CTA button trackingapp/install/route.ts- Added server-side install script download tracking
| Event Name | Description | File |
|---|---|---|
install_command_copied |
User copied the main install command from the hero section | components/landing/hero-section.tsx |
installation_command_copied |
User copied an install command with specific mode and platform | components/landing/installation-section.tsx |
platform_selected |
User selected a platform (Linux/macOS/Windows) | components/landing/installation-section.tsx |
installation_mode_selected |
User selected an installation mode (interactive/quick/custom) | components/landing/installation-section.tsx |
cta_button_clicked |
User clicked a call-to-action button | components/landing/hero-section.tsx, components/landing/cta-section.tsx |
github_link_clicked |
User clicked the GitHub link | components/landing/hero-section.tsx, components/landing/navbar.tsx |
language_changed |
User switched the language | components/landing/language-switcher.tsx |
docs_navigation_clicked |
User navigated to documentation | components/landing/navbar.tsx |
install_script_downloaded |
Install script was downloaded via the API (server-side) | app/install/route.ts |
footer_link_clicked |
User clicked a footer link | components/landing/footer.tsx |
We've built some insights and a dashboard for you to keep an eye on user behavior, based on the events we just instrumented:
- Analytics basics - Core analytics dashboard with all key metrics
- Install Command Copies Over Time - Tracks conversion intent
- Platform Distribution - Understand your audience's operating systems
- Installation Mode Preferences - Indicates user expertise level
- Script Downloads (Server-side) - Ultimate conversion metric
- User Engagement Overview - Overall engagement metrics
PostHog is configured with the following environment variables in .env:
NEXT_PUBLIC_POSTHOG_KEY=phc_gnF8n8Ezzyg3I3SitIeLXFVoJMTuRlbFkiUp4O5bCoR
NEXT_PUBLIC_POSTHOG_HOST=https://eu.i.posthog.com
A reverse proxy is configured in next.config.ts to route PostHog requests through /ingest/* to avoid ad blockers.