Gatsby

Last updated:

|Edit this page

On this page

Thanks to Ritesh Kadmawala for building this!

GitHub: posthog/gatsby-plugin-posthog

Gatsby behaves like a single-page app which means to track $pageview events special care is needed. This integration takes care of that.

Install

Terminal
yarn add gatsby-plugin-posthog

or

Terminal
npm install --save gatsby-plugin-posthog

How to use

JavaScript
// In your gatsby-config.js
module.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.

Questions?

Was this page useful?

Next article

Google Tag Manager

Google Tag Manager helps you add code snippets or tracking pixels to your website in a low-code way to send data to services like marketing and analytics tools. It is an easy way to integrate PostHog into your website without having to update your codebase. How to add PostHog to Google Tag Manager Get your PostHog snippet with your project API key and instance address from your project settings . Assuming you have already set up Google Tag Manager, go to your dashboard and navigate to…

Read next article