Privacy-friendly web analytics that works in the Brave browser

#analytics #privacy #brave #blocker

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.

My setup

I am using Hugo for generating my website and
Netlify to build & serve the content. Here is how I
implemented tracking:

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
rules:

[[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