Hide your own site visits from Cloudflare Analytics with JavaScript

In this short article, we'll look at how to keep your own site visits below the radar of Cloudflare Analytics so you don't skew your usage stats using JavaScript.

Why is hiding your own visits important?

When I set up this site I wanted to test out the functionality even after privacy-first analytics had been set up. However, this would misrepresent how many users were actually visiting the site! It's really difficult to remember, "oh yeah, that was me when I tested that page a bunch of times" when viewing the usage figures. So that would be bad enough if you were doing the testing or browsing your own site as a single developer or author, but what if you were a team of 5 - 10 or more?

That would mean for each member of the team that published articles or made improvements and then viewed the page on the live site, the usage figures would go way up and be completely skewed. To solve this problem, I created a simple but effective solution by creating a private route for internal users that would disable both my custom analytics and Cloudflare Analytics by never instantiating it in the first place 😄 Effectively a route that says "don't track my visits in the usage stats" which is perfect for testing and viewing the live site.

Disable analytics with JavaScript

In a previous article, I covered how to 'Avoid tracking your own activity' in the bonus section. This approach set a boolean flag value in local storage when an internal user or myself hit the /do-not-track-me route. After this was set an internal user could go ahead and browse any pages on the site knowing they would not be adding to the usage counts. We can use a similar solution but applied to how Cloudflare Analytics is initialised.

When setting up Cloudflare Analytics you add a script to the page like:

<script
  defer
  src="https://static.cloudflareinsights.com/beacon.min.js"
  data-cf-beacon='{"token": "42e216b9090ru59384ygu891dce9eecde"'
></script>

So as long as a user has visited the /do-not-track-me route first and the interim page loaded setting a value for donottrack as true:

localStorage.setItem("donottrack", true);
window.location.href = "/";

We can then use a custom function to fire on page reload which checks it and disables analytics by not initialising it:

initialiseCloudflareAnalytics() {
    let analyticsDeactivated = localStorage.getItem("donottrack") || false;

    if (analyticsDeactivated) {
        return;
    }

    let cloudflareScript = document.createElement("script");
    cloudflareScript.setAttribute("src", "https://static.cloudflareinsights.com/beacon.min.js");
    cloudflareScript.setAttribute("defer", true);
    cloudflareScript.setAttribute("data-cf-beacon", '{"token": "8bcfbc66e3f442149d3539d3cbfafc9b"}');
    document.body.appendChild(cloudflareScript);

    this.cloudflareScriptInitialised = true;
    console.log("Cloudflare Analytics initialised.");
},

If a regular user visits the site without going first through the /donottrack route, this flag will never be set and therefore the Cloudflare Analytics script will be appended to the document body and will work as expected.

I applied this to the mounted action in a Vue.js single page app, but you could just as easily apply this logic in any webpage using either JavaScript with window.onload or jQuery with $(document).ready().

You might also want to provide an internal user with an option in your site to activate analytics again, you could achieve this simply by displaying a button only for users with analytics deactivated by checking the flag in local storage then firing localStorage.removeItem("notrack"); when they click it. This will allow them to become regular users again and have their page visits logged.

Short but sweet

I hope this article helped you to think about how you might selectively disable tracking to prevent inflating your usage figures with your own or your team's page visits and prevent headaches 😆 I think the same approach could be used with similar analytics tools such as Google Analytics too. It is a simple to implement solution, it does mean that you and your team need to remember to hit the newly added /do-not-track to set the cookie in local storage, but you only have to do it once. I think this tradeoff is worth it for the simplicity though, especially for small to medium sized sites and works across devices.

If you enjoyed this article be sure to check out other articles on the site. If you have any questions feel free to leave a comment 👍