Skip to content

How to Add Plausible Analytics to Gatsby


Created Nov 12, 2021 – Last Updated Feb 14, 2022

Gatsby
Digital Garden

You’re a fan of Plausible Analytics and Gatsby? Great! In this guide you’ll learn how to add Plausible Analytics to your Gatsby site, including support for TypeScript, 404 error page tracking and custom events.

You should already have set up an account with Plausible and have your domain name at hand. It’s the name in the URL: https://plausible.io/<your-name>. Also want to learn how to use Deferred Static Generation with Plausible? You can also check out the post Using Deferred Static Generation with Analytics Tools afterwards.

#Setup

Edit the gatsby-ssr.js to add the tracking script. You can choose between a variety of script extensions — you can edit it in the SCRIPT_URI variable. This also adds the snippet for custom events.

gatsby-ssr.js
js
import * as React from "react"
const SITE_DOMAIN = `your-domain`
const PLAUSIBLE_DOMAIN = `plausible.io`
const SCRIPT_URI = `/js/plausible.js`
export const onRenderBody = ({ setHeadComponents }) => {
if (process.env.NODE_ENV === `production`) {
const scriptProps = {
"data-domain": SITE_DOMAIN,
src: `https://${PLAUSIBLE_DOMAIN}${SCRIPT_URI}`,
}
return setHeadComponents([
<link
key="plausible-preconnect"
rel="preconnect"
href={`https://${PLAUSIBLE_DOMAIN}`}
/>,
<script key="plausible-script" defer {...scriptProps} />,
// See: https://plausible.io/docs/custom-event-goals#1-trigger-custom-events-with-javascript-on-your-site
<script
key="plausible-custom-events"
dangerouslySetInnerHTML={{
__html: `
window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) };
`,
}}
/>,
])
}
return null
}

Edit the gatsby-browser.js to add pageview tracking:

gatsby-browser.js
js
export const onRouteUpdate = () => {
if (
process.env.NODE_ENV === `production` &&
typeof window.plausible !== `undefined`
) {
window.plausible(`pageview`)
}
}

#TypeScript

In order to have IntelliSense on the custom events you’ll need to declare Plausible on the global window element. Create a declarations.d.ts file with the following contents:

src/declarations.d.ts
ts
declare global {
interface Window {
plausible: (
name: string,
options?: { callback?: () => void; props?: { [key: string]: string } }
) => void
}
}

#404 Error Page Tracking

Besides adding the custom event to the src/pages/404.js page you’ll also need to create a custom event goal in Plausible. See their documentation to learn more.

Here’s an example of a 404 Page written in TypeScript:

src/pages/404.tsx
tsx
import * as React from "react"
import { PageProps } from "gatsby"
const NotFound: React.FC<PageProps> = () => {
React.useEffect(() => {
window.plausible(`404`, { props: { path: document.location.pathname } })
}, [])
return <main>404 - Not Found</main>
}
export default NotFound

Edit on GitHub - Discuss on Twitter
Share on Twitter
Want to learn more? Browse my Digital Garden
Writing
Digital GardenTutorialsReactCommunity
Social
EmailTwitterGitHubLinkedInRSS
© 2022 by lekoarts.de. All rights reserved.
Privacy Policy. Legal Notice.