The easy way to prevent self-reporting with Plausible Analytics

Analytics are an essential tool for any site-owner, but for them to be useful they need to be accurate.

During development you'll be looking at your site a lot, including at deploy previews to make sure everything looks and works alright before publishing changes. Conventional analytics solutions such as Google Analytics have built-in checks to prevent your own page-view from showing up in your stats, but they're also heavy, require cookie banners and collect way too much data. Plausible Analytics is a privacy first analytics tool and that's what I use for my site. The Plausible blog has an in-depth comparison to Google Analytics (and a generally great blog) if you want to learn more.

The Problem

Plausible Analytics is made by 2 people and a fairly new tool. It currently only prevents counting of your own page views on localhost. Visits to your production deploy as well as any views on branch deploys get counted as long as the data-domain on the script tag that loads Plausible is correct. For smaller sites like mine with less than a 100 daily views it can lead to a lot of extra visitors and page views.

Imperfect Solutions

The Plausible Docs have some guidance on how to exclude yourself from analytics. One option is to set a local storage flag, the other is to add the analytics script to your AdBlock lists.

The problem with the first approach is that you have to do it for every subdomain (like the branch deploys that Netlify and Vercel provide your with automagically) and it still counts the first visit since you can't set the flag until after the first page load.

The second solution requires you to have an ad blocker and if you're using a proxy to get more accurate stats the blocking rules get a lot more complicated and you still have to set it up on each browser you test with.

The Simple Solution

Simply omit the data-domain attribute on your script tag and set the onload attribute to this.setAttribute('data-domain',window.location.host) instead. This way if you're on some preview domain like some-random-number--your-site-name.netlify.app it'll set your data-domain to that subdomain and the analytics event won't be counted since the domain is unknown to Plausible.

You can load the Plausible script directly from plausible.io or through a proxy. Here are the full script tags for both setups. Since my blog is hosted on Netlify I am proxying it using Netlify Redirects.

Remember to load the correct script for your use-case if you're using extensions like outbound link tracking.

Load from plausible.io

<script
    async
    defer
    src="https://plausible.io/js/plausible.js"
    onload="this.setAttribute('data-domain',window.location.host)"
></script>

Load through Proxy

Use this if you're proxying the script and API events through your own domain to get more accurate stats.

<script
    async
    defer
    src="/js/script.js"
    onload="this.setAttribute('data-domain',window.location.host)"
></script>

Wrap

And that's it. A simple fire-and-forget solution. Just beware that this won't work if you want to count visitors on subdomain towards your primary domain. In that case you'll either need to modify the onload callback or just add it as a separate page in Plausible. Plausible billing works with total page views over all your sites, so there's so extra cost when adding sites.

Comments

[Miroslav Bajtoš]

Thank you for a great tip! When implementing this approach in my website, I found that onload event fires after the Plausible script has already attempted to read data-domain attribute.

I fixed the issue by programatically creating the script tag from JavaScript:

<script>
  const site = window.location.host;
  const tag = document.createElement('script');
  tag.defer = true;
  tag.src = '/s/main.js'
  tag.setAttribute('data-api', '/s/event');
  tag.setAttribute('data-domain', site);
  document.head.appendChild(tag);
</script>