Using Plausible Analytics in Gatsby.js or Astro.js

What is Plausible Analytics?

Plausible is intuitive, lightweight and open source web analytics. No cookies and fully compliant with GDPR, CCPA and PECR.

It is an open source project dedicated to making web analytics more privacy-friendly.

Some of the core features that makes it more privacy-first over Google Analytics are

• No cookies
• No tracking and collecting of personal data
• Minimized data collection & secure storage

Other than these benefits it is also just super easy to set up (unless you want to use a proxy, that requires a little more work).

Their pricing is also fair, ranging from $9/mo for 10k pageviews to $169/mo for 10m pageviews. Though they do have the option to self-host, you can find the guide to self-host here: https://plausible.io/docs/self-hosting

In a nutshell, if you want to move away from Google Analytics and/or want more privacy oriented tracking, Plausible definitely is a good choice!

Alternatives to Plausible

Plausible isn’t the only privacy-first analytics service, here are some other ones:

• Fathom
• Simple analytics
• Matomo

Of these three, I have used Fathom in the past, while Fathoms design is amazing and it was a breeze to set up, they lack one major thing in my opinion. And that is the option to self host or use a proxy. But I’ll talk a little more about that later.

How to Set Up Plausible Analytics

To set up Plausible analytics all frameworks will use the same script

<script
  defer
  data-domain="yourdomain.com"
  src="https://plausible.io/js/script.js"
></script>

The only difference really is where to put them.

Gatsby.js

Add the script to your html.tsx file

Astro

I like to work with a BaseLayout.astro that wraps around pages. This file contains all SEO properties etc. We will add the script here

Working with Adblockers

To be honest, this is something I only noticed a few weeks ago, when a user uses an adblocker, chances are that your analytics are blocked as well. Why do they block them? Well some blocklist maintainers have taken a stance against these forms of analytics too.

Luckily with Plausible there is a simple workaround for this: using a proxy.

I’ll cover how to use a proxy with Vercel and Netlify in this post.

Vercel

1. Create a Vercel.json file at the root of your repo (same for a monorepo)

{
  "rewrites": [
    {
      "source": "/js/script.js",
      "destination": "https://plausible.io/js/script.js"
    },
    {
      "source": "/api/event",
      "destination": "https://plausible.io/api/event"
    }
  ]
}

2. update the script tag to use src=“/js/script.js” data-api=“/api/event”

Netlify

1. Create an _redirects file in the root of your project (in a monorepo this will be your apps/app folder)

/js/script.js https://plausible.io/js/script.outbound-links.js 200
/api/event https://plausible.io/api/event 200

2. Copy this _redirects file to the dist folder after the Netlify build is done, one of the ways you could do this is by updating your build command to

astro build && cp _redirects dist/_redirects

3. Update your script tag to use src=“/js/script.js”

Conclusion

Setting up Plausible analytics is easy and straightforward, it gives you all the tools you need to get privacy-first tracking.

Hit me up on Twitter at @vdecaster if you have any questions!