React Router Web Analytics installation
- 1
Install the package
RequiredInstall the PostHog JavaScript library and React SDK using your package manager:
- 2
Configure Vite
RequiredAdd
posthog-jsand@posthog/reacttossr.noExternalin yourvite.config.tsto avoid SSR errors:vite.config.ts - 3
Add the PostHogProvider
RequiredInitialize PostHog and wrap your app with the
PostHogProviderin yourapp/entry.client.tsxfile:app/entry.client.tsx - 4
Send events
Click around and view a couple pages to generate some events. PostHog automatically captures pageviews, clicks, and other interactions for you.
If you'd like, you can also manually capture custom events:
JavaScript - 5
Next steps
RecommendedAfter installing PostHog and ensuring autocapture is enabled, head to your web analytics dashboard to see your data. And then check out our getting started guide.
PostHog tip: Web analytics works with anonymous events. This means if you are primarily using PostHog for web analytics, it can be significantly cheaper for you.