Using Plausible Analytics in Gatsby.js or Astro.js
Jun 02 2023
//Updated Oct 29 2023
//3 min read
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:
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
- 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"
}
]
}
- update the script tag to use src=“/js/script.js” data-api=“/api/event”
Netlify
- 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
- 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
- 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!