For my blog, I have the following requirements for web analytics:
Respect the privacy of my readers. Don’t let Big Tech track their behaviour and link it with other online activities. (Looking at you, Google Analytics!)
Collect website visits from tech-savvy users. The Brave browser and various ad-block plugins are automatically blocking requests to well-known web analytics API backends.
Nice to have: Don’t mix real visitors with page visits I make while previewing a new version of my site.
I was able to get all these features from Plausible:
Plausible is extremely focused on privacy. They are minimizing data collection and don’t collect any personal information. There are no cookies, no tracking across devices, websites or apps.
Plausible offers a well-documented solution for using a proxy to avoid content blockers.
After a bit of searching, I found an easy way how to customize which domain name is reported by my website. This way I can distinguish between visits to the live website and preview sites.
- In my Hugo templates, I added a
<script>tag to fetch Plausible client-side script. To avoid content-blockers, I am fetching the script from an URL on my own domain: /s/main.js. Under the hood, Netlify handles this endpoint by fetching the response from Plausible.
- I configured the Plausible client to post events to an URL on my own domain too: /s/event. This endpoint is again proxied by Netlify to Plausible.
- Finally, I have a small script to detect Netlify preview domains and tell the Plausible client to report a different domain name to the data collector.
Let’s start with the script setting up Plausible client. I am adding it as the
last child of the
<head> element in all my pages.
<script> const host = window.location.host; const site = host === 'bajtos.net' ? 'bajtos.net' : 'preview.bajtos.net'; const tag = document.createElement('script'); tag.defer = true; // Where to fetch Plausible client-side script from tag.src = '/s/main.js'; // Where to post events to tag.setAttribute('data-api', '/s/event'); // What site to report tag.setAttribute('data-domain', site); document.head.appendChild(tag); </script>
Here is the relevant part of my
netlify.toml file where I configure proxy
[[redirects]] from = "/s/main.js" to = "https://plausible.io/js/plausible.js" status = 200 [[redirects]] from = "/s/event" to = "https://plausible.io/api/event" status = 202
Pretty simple, isn’t it?
You can learn more about Plausible in their docs: