Gatsby

Last updated:

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://app.posthog.com)
apiHost: "<ph_instance_address>",
// 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 instructions on the JS library itself, see JS library.

Questions?

Was this page useful?

Next article

Google Tag Manager

Objective Integrating PostHog into your website using Google Tag Manager. Why is this useful? Google Tag Manager helps you add tags into your website in a codeless way, for services such as marketing and analytics tools. It is an easy way to integrate PostHog into your website without having to update your codebase. Prerequisites To follow this tutorial along, you should: Have deployed PostHog or be using PostHog Cloud. Step-by-step instructions Get your PostHog snippet from your 'Project…

Read next article