This library was built by the community. Thanks to Ritesh Kadmawala for building it.
Gatsby behaves like a single-page app which means to track $pageview
events special care is needed. This integration takes care of that.
Install
yarn add gatsby-plugin-posthog
or
npm install --save gatsby-plugin-posthog
How to use
// In your gatsby-config.jsmodule.exports = {plugins: [{resolve: `gatsby-plugin-posthog`,options: {// Specify the API key for your PostHog Project (required)apiKey: "<ph_project_api_key>",// Specify the app host if self-hosting (optional, default: https://us.i.posthog.com)apiHost: "https://us.i.posthog.com",// Puts tracking script in the head instead of the body (optional, default: true)head: true,// Enable posthog analytics tracking during development (optional, default: false)isEnabledDevMode: true},},],}
This will automatically start tracking pageviews, clicks and more.
In your code you can access posthog via window.posthog
.
For more instructions, see browser JS library.
Set up a reverse proxy (recommended)
We recommend setting up a reverse proxy, so that events are less likely to be intercepted by tracking blockers.
We have our own managed reverse proxy service included in the platform add-ons, which routes through our infrastructure and makes setting up your proxy easy.
If you don't want to use our managed service then there are several other options for creating a reverse proxy, including using Cloudflare, AWS Cloudfront, and Vercel.
Grouping products in one project (recommended)
If you have multiple customer-facing products (e.g. a marketing website + mobile app + web app), it's best to install PostHog on them all and group them in one project.
This makes it possible to track users across their entire journey (e.g. from visiting your marketing website to signing up for your product), or how they use your product across multiple platforms.