Articles with the tag Analytics

Privacy-Focused Alternatives To Google Analytics

3 years ago Tue, Oct 6, 2020

I recently wrote an article on how to add google analytics to a Nuxt JS app. In that post, I described the process I followed to install Google Analytics on this blog. I chose Google Analytics out of habit, without stopping to think whether it was the right solution for me.

I knew that I would have to add a cookie banner to get visitors' permission to use cookies on their device. This led me implement a solution that ensures Google's tracking script is not loaded until the user gives their explicit consent.

Later, I tweeted about how I felt sad to add yet another cookie banner to the internet. These banners have been around for a while, but recently it feels like the web is drowning in a sea of cookie widgets of ever-increasing complexity.

It's time to do away with cookie banners and save the internet from this annoying mess.

To be clear, I think the original intention behind these banners was admirable - they've made us aware of the extent to which our data is collected and used to track us across the internet. The Cookie Law was designed to tackle the huge market in specific, personal data that can identify us uniquely and track us across multiple web pages.

I think it's legitimate to collect some anonymous information on the way in which users interact with our websites, blogs and apps. A small amount of analytics is necessary to make our content valuable and useful to our users. Luckily, as more people have come to value their online privacy, we have seen a number of products emerge that cater to these needs.

Since this is a budding industry, I thought I would do some research before choosing a cookie-free privacy-focused analytics solution for this blog. Here are my findings.

#The Contenders

After scouring Google and Twitter for a few weeks, I found five different products that claim to be privacy-focused Google Analytics alternatives. These are:

Let's investigate each of these offerings in turn.

#Matomo

Matomo Analytics Dashboard Matomo Analytics Dashboard

Matomo, is an old hand when it comes to web analytics. It started its life in 2007 as Piwik, a small open-source analytics project. Since then, it has grown into a full fledged competitor to Google Analytics and is used by over 1 million websites in 190 countries.

Matomo is available as a cloud hosted SaaS product, but it still offers an open-source self-hosted solution. You can check out the source code for the analytics platform on GitHub.

Of all the analytics providers reviewed here, Matomo undoubtedly has the largest, and most mature feature set. In fact, if you are coming from Google Analytics, you will find the Matomo dashboard quite familiar with tools such as Behavior, Goals and Funnels. Furthermore, Matomo offers the ability to view heatmaps and generate an almost infinite array of custom reports.

While you might be tempted by Matomo's long list of features, I would argue that this is also what makes it feel bloated. Depending on your use case, it is likely you don't need all or even many of these features.

Worse than this, though Matomo bills itself as GDPR compliant, it requires additional steps to ensure the level of compliance required to remove that dreaded cookie banner.

Summary

  • An established competitor to Google Analytics.
  • Saas or self-hosted
  • Rich in features.
  • Steeper learning curve.
  • Additional work required to ensure GDPR compliance.

#Fathom

Fathom was one of the first of the new small contenders focused solely on privacy-focused analytics. They bill themselves as a simple, light-weight, privacy-first alternative to Google Analytics.

Fathom is extremely simple to set up and use. The app looks great and feels extremely minimalistic, but this belies a very powerful set of features that gives you just the right amount of information to track the success of your site.

Amongst other things, Fathom offers unlimited sites, notifications and reports. It allows you to add an unlimited number of subdomains, which can be used to host the tracking script and ensure that it won't be blocked by over-eager ad-blockers.

Fathom's unique site views are arguably a lot more accurate than any of its competitors. One side-affect of removing cookies from an analytics solution is that it becomes a lot harder to tell the difference between a unique visit and ordinary page views. The easiest way to tell whether a visit is unique is to look at the referrer (the URI of the page that linked to the current page). This can be extremely inaccurate for several reasons:

  1. The referrer can add a rel=”noreferrer” attribute to the link. This will prevent the referrer information from being passed to the target website by removing the referral data from the HTTP header. It's possible to mitigate this effect, by counting all visits where the referrer is your own site as non-unique and vice-versa, but once again, accuracy will decrease if you use rel="noreferrer" on your own site.

  2. Starting in version 85, Chrome has a new default referrer policy, strict-origin-when-cross-origin, which may impact use cases relying on the referrer value from another origin. Websites can override this policy, but I imagine most will not bother to do so.

  3. Even worse, this method would count a user who navigated to your site, then moved to another site and back to your site as a unique visit, which is highly undesirable and would render this statistic close to meaningless.

Unique visitors are a very important measure of a website's success. I would miss this metric more than any other. Happily, Fathom have pioneered a much more accurate method that uses a clever hashing mechanism to track unique visits without using cookies or tracking any personal information. By using multiple, un-related complex hashes, they are able to distinguish new and repeat visits whilst ensuring that the user remains entirely anonymous.

This additional functionality comes at an increased cost. The entry level plan is capped at 100,000 page-views which is probably too many for a small side-project. It would be great to see them offer a reduced price for startups who will undoubtedly be happy to pay more once their site starts to take off. That said, you can add an unlimited number of sites making the cost more palatable when spread over a number of projects.

Fathom is built using Laravel and hosted on Laravel Vapor backed by AWS. In fact, they were one of the first to launch a production application on Laravel Vapor when it was still in beta. Their app is hosted on secure enterprise grade infrastructure, that auto-scales to meet spikes in traffic.

Fathom is very popular in the Laravel community, but it can be used on any website. It is entirely GDPR, CCPA and PECR compliant, meaning there's no need to add a cookie banner to your site.

Full Disclosure: After careful review, this is the solution I chose for my own sites. If you consider signing up for Fathom, I'd appreciate it if you used my affiliate link which will give you a $10 discount on your first invoice.

Fathom Analytics Dashboard Fathom Analytics Dashboard

Summary

  • Well established and loved by the Laravel community.
  • Simple, beautiful design with powerful functionality when you need it.
  • An accurate solution to track unique visitors to your site.
  • Built using secure and scalable enterprise-level infrastructure.

See a working demo of Fathom

#Simple Analytics

Simple Analytics was the first EU based privacy-focused analytics solution, created at roughly the same time as Fathom. Again, Simple Analytics doesn't use cookies or collect any personal data, so there's no need to worry about a cookie banner.

One solution that is unique to Simple Analytics is the Tweet Viewer. Simple Analytics will automatically convert t.co referrers to show you the actual tweet that is the source of the referral. This is a really cool and innovative feature, especially useful if Twitter is the primary source of traffic to your site. This is the type of feature, that comes from the attention to detail only small startups are able to offer their customers, based upon their own needs and experiences. Other referral links are displayed as mini websites or small screenshots of the referral website.

Another feature, currently unique to Simple Analytics is a fully fledged API that you can use to integrate your data with other tools. Simple Analytics is also the only product other than Matomo to offer a dark mode, if that's your thing.

Unlike Fathom, Simple Analytics uses the referrer to distinguish unique visitors. It doesn't offer the ability to share your metrics dashboard but offers a comprehensive email reporting alternative. You can also override the domain name for the script to stop it from being recognised and blocked.

Simple Analytics' pricing is quite strange in that it is more expensive than Fathom if billed monthly, but considerably cheaper if billed yearly, with a whopping 53% discount (from $19 down to $9) if you pay for a year in advance.

I can't put my finger on it, but Simple Analytics doesn't feel as polished as Fathom or Plausible, even though some features are more advanced, and the documentation is very detailed.

Simple Analytics Dashboard Simple Analytics Dashboard

Summary

  • Based and hosted in the EU
  • Unique tweet viewer and mini website feature shows richer referral data.
  • Offers a dark mode
  • Uses potentially inaccurate referrer method for unique visitors.
  • Well priced if you are willing to pay for a year in advance.

See a working demo of Simple Analytics

#Plausible

Plausible was born in December 2018 and came out of beta in late April 2019. The main Saas offering was released shortly afterwards. There is no difference between the paid SaaS product and the self-hosted version except that you have to host the latter yourself. Like Simple Analytics it is based and hosted in the EU. Plausible are extremely open about everything they do. You can see all their stats, from the number of customers to their MMR on their about page.

Plausible has feature parity with its competitors and has recently announced that their self-hosted server is out of beta. This comes with excellent documentation and uses docker to create the necessary databases and start a webserver.

One key selling point for Plausible is that it has a smaller basic tier than Fathom or Simple Analytics. In fact, you can get started from just $6 dollars a month with a cap of 10,000 monthly page-views. They also offer one of the most generous annual billing options with a 33% discount if you pay for a year upfront.

Like Fathom, Plausible does not use the referrer to determine unique visitors. Instead, they generate a daily identifier along with the visitor's IP address and user agent. These data-points are run through a hash function with a rotating salt to ensure that they are anonymised.

hash(daily_salt + website_domain + ip_address + user_agent)

You can read more about this process on their data policy, where you will find the following explanation:

This generates a random string of letters and numbers that is used to calculate unique visitor numbers for the day. Old salts are deleted to avoid the possibility of linking visitor information from one day to the next. Forgetting used salts also removes the possibility of the original IP addresses being revealed in a brute-force attack.

Plausible can track the time visitors spend on your site, calculating the visitor duration for users who visit more than one page. They also offer more detailed information on referrers and devices than Simple Analytics or Fathom by including the operating system and browser for devices, and UTM medium and UTM campaigns for referrers. Another nice feature is the ability to view visits by country on a map as well as a list.

One final feature that users seem to love is the combination of referral and page drill-downs. This means that you can filter all stats by any referral, any page or any referral and page in combination. Pretty powerful stuff.

Plausible is definitely one to keep an eye on. They have an open roadmap and have come very far in a short time. Now they're out of beta and have the basics out of they way, I can't wait to see how they grow and innovate over the next few months.

Plausible Analytics Dashboard Simple Analytics Dashboard

Summary

  • Open-source with an active community.
  • Well-documented self-hosted solution.
  • Cheaper than its competitors with roughly the same features.
  • Uses hashing method to calculate accurate unique visitor metrics.
  • Offers more detail on referrers and devices.

See a working demo of Plausible

#Cloudflare

Cloudflare caused quite a stir recently when it announced its entry into what has until recently been a market dominated by small, self-funded startups.

This is a big announcement, making Cloudflare the first large corporate to join the fray. No doubt, the internet juggernauts are starting to pay attention. We'll almost certainly see other large companies enter this space with similar offerings soon.

In keeping with the products we've already discussed, Cloudflare will count visits without tracking users. They don't use cookies or local storage and don't fingerprint individuals via their IP address or other attributes. Unique visits are identified using the referrer method described above.

One unique feature coming to Cloudflare analytics soon, is the ability to see which bots are reaching the website and block them using firewall rules. This seems like quite an innovative idea but presumably requires the use of other Clourflare products. Since Cloudflare is already an established infrastructure provider, it can augment client-based analytics with data from their edge locations. This brings a higher degree of accuracy as it allows you to track visits from clients with third-party blockers enabled.

Cloudflare Analytics is going to be available for free when the javascript analytics script is ready, but it's only currently available at no additional cost for existing Cloudflare users.

One thing to keep in mind is that this is not Cloudflare's main business. This doesn't mean they won't continue to improve this service, but they might not be able to move as quickly as smaller, more nimble competitors focusing entirely on the privacy-focused analytics market.

Cloudflare Analytics Dashboard Cloudflare Analytics Dashboard

Summary

  • Large, established organisation with experience in the field.
  • Edge and client analytics
  • Uses referrer data to identify unique visitors.
  • Will be free, but requires a paid plan for now.

#Comparison

Now you've got a basic overview of each of these offerings, we'll dive into a side by side comparison across a number of categories.

#Cost

Free Option Basic Pricing Annual Discount
Matomo yes* $19/m 17% pricing
Fathom yes** $14/m 17% pricing
Simple Analytics trial only $19/m ~17% to ~53% pricing
Plausible yes** $6 33% pricing
Cloudflare coming soon** $20 No pricing
  • *This is a wordpress or self-hosted option and therefore not really free.
  • **There is a lite version you can self-host, but it uses cookies and hasn't been updated recently.
  • ***Self-hosted or trial version
  • ****Currently only available with an existing subscription.

#Compliance

Compliant Cookies IP Address
Matomo yes* No* anonymous data collected
Fathom yes No no data collected
Simple Analytics yes No no data collected
Plausible yes No no data collected
Cloudflare probably** No no*** N/A
  • *Considerable configuration required by the user.
  • **This isn't stated on their website, and they don't implicitly list the data they collect.
  • ***Not sure if the IP address is anonymised or discarded.

#Features

Screen Sizes Browser OS Referrers
Matomo yes yes yes yes
Fathom yes* yes no yes
Simple Analytics yes yes no yes
Plausible yes yes yes yes
Cloudflare yes yes no yes
  • *Screen size can be inferred from device type.
Page Views Unique Visitors Goals / Conversions Sharing
Matomo yes no* yes yes
Fathom yes yes** yes yes
Simple Analytics yes graph only*** no no
Plausible yes yes** yes yes
Cloudflare yes yes*** no no
  • *As far as I can tell, this is not possible when cookies are disabled.
  • **Fathom and Plausible use custom hashing mechanisms to generate accurate unique visitor metrics.
  • ***Simple Analytics and Cloudflare use the referrer to check if the viewer is unique.
Reports Custom Domain API Uptime Monitor
Matomo yes yes* yes plugin
Fathom yes yes no yes
Simple Analytics yes yes yes no
Plausible yes yes no no
Cloudflare no no yes yes*
  • *If the tracker is self-hosted.
  • **As part of a paid plan.

#Misc

Tracker Size Basic Plan Data Retention Dark Mode Paid Referrals Demo
Matomo 22.8 KB 6 months yes no no
Fathom 1.5KB Unlimited no yes yes
Simple Analytics 15KB N/A yes yes yes
Plausible 0.7KB Unlimited no no yes
Cloudflare N/A N/A* no no no
  • *I presume this is unlimited.

#Conclusion

I've been very pleasantly surprised to see the growing number of privacy-first, cookie-free analytics solutions that have given us a way to keep track of essential metrics without compromising user privacy. Though there are some obvious differences, they all offer roughly the same features given the right configuration.

Even though Cloudflare is free and Matomo is the most established, the three solutions that tempted me the most were Plausible, Simple Analytics and Fathom. I love the fact that they are all run by small teams dedicated to the privacy cause. I'd happily sign up for any of them, especially when you consider the traditional alternatives.

In the end, I went with Fathom, mostly because they appear to have the most accurate way of tracking data. The sign up and set up process was incredibly smooth. They are also unwaveringly dedicated to their users and answer any queries within seconds.

Over recent years, we've been spoiled by free analytics solutions that track far more information than we will ever require. We didn't realise that this data wasn't collected for our benefit. We unknowingly became complicit in turning our users into commodities.

Now we know better. It's time to put our user's privacy first. Though it will take some time to adjust to the idea of paying for things again, we can look forward to the day when we don't have to click our way through a maze of cookie alerts to get to the information we are looking for.

Thank you for reading this article.

If you've made it this far, you might like to connect with me on 𝕏 where I post similar content and interact with like-minded people. If this article was helpful to you I'd really appreciate it if you would consider buying me a coffee.
Continue Reading

Add Google Analytics To A Nuxt Js App

3 years ago Fri, Oct 2, 2020

Over recent weeks, I've been working hard to make this blog look and work well. Now that I'm writing more often, I wanted a way to see what's working and what's not. My first thought was to add Google Analytics as I remember it being a quick and easy process.

That said, the days when you could just add analytics without thinking about the privacy of your users is thankfully coming to an end. As it turns out, some more work is needed to comply with GDPR and other legislation. In this article, I'll show you how I went about adding Google Analytics and a compliant Cookie Banner to this site.

If you've installed Google Analytics on a website in the past, you might be familiar with the analytics.js script. Google has now moved away from this script in favour of its gtag.js or Global Site Tag solution. They strongly recommend that we should upgrade to the new "modern measurement library" and so we'll do just that.

#Install GTAG on a simple HTML website

If you're looking to install gtag on a simple HTML website, you can simpy follow Google's instructions to paste the following code immediately after the <head> tag on every page of your site, making sure to replace GA_MEASUREMENT_ID with the Google Analytics property that you want to send the data to.

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'GA_MEASUREMENT_ID');
</script>

If you're using a templating engine, you can paste the code in of your layout file, so that it is loaded automatically on every page that uses that layout.

#Installing GTAG in a Nuxt JS app

Nuxt allows you to customise the app html template by creating an app.html file in the src directory of your project. We could easily place the gtag.js script there, but we can do better than that by pulling in a small npm package that wraps the gtag script. I've chosen to use vue-gtag, but you could use the same technique with another package if you prefer.

  1. Install vue-gtag in your application:
npm install vue-gtag
  1. Create a new javascript file in the plugins directory and load the vue-gtag plugin, making sure to replace the following properties with your own:
  • GA_MEASUREMENT_ID - the ID of the property to which you want to send data.
  • APP_NAME - The name of your application.
import Vue from 'vue';
import VueGtag from 'vue-gtag';

Vue.use(VueGtag, {
    config: { id: 'GA_MEASUREMENT_ID' },
    appName: 'APP_NAME',
});
  1. Tell Nuxt to load your Google Analytics plugin.
plugins: [
    {
        src: './plugins/GoogleAnalytics.js',
        mode: 'client'
    }
]

At this point, the gtag.js script should load on all pages and environments in your app, but you really shouldn't stop here. Read on to find out how to make sure you only load the script once you have obtained the consent of your users.

#GDPR, PECR and EU cookie compliance

When you install gtag.js, Google will place cookies in the user's browser to track the user uniquely. There are three things we need to do to make sure that we comply with PECT, GDPR, and other similar regulations as well as Google's own terms. Let's discuss each of these in turn.

  1. Tell visitors to our site that we are using cookies.

The convention is to add a banner to inform users that the site uses cookies. The banner should load immediately when the user first visits the site.

Cookie Banner Cookie Banner

  1. Explain what the cookies are doing and why.

The cookie banner should have a link to a clear explanation describing the cookies that will be used as well as their purpose. This will help the user to make an informed decision.

Privacy Policy Privacy Policy

  1. Get the user's consent before placing cookies on their device.

The banner should be displayed until the user specifies whether they accept the use of cookies. If they click yes, we can go ahead and load the analytics plugin which will store cookies on their device. If they click no, we will prevent the analytics tracker from loading. In both cases, we will remove the banner once the user has made their choice.

Now we know what needs to be done, we can make a CookieAlert vue component to add the banner to our site. I'm using Tailwind CSS for styling, but you can change the template to suit your needs.

First, we will define the way the banner should look in the template tag of our component:

    <div v-if="isOpen"
         class="fixed bottom-0 left-0 lg:flex items-center p-4 bg-gray-100 shadow-sm justify-center w-full">
        <div class="text-5xl pb-2 leading-none">
            🍪
        </div>
        <div class="lg:mx-8">
            <p>
                Can I use cookies for analytics? Read
                <nuxt-link class="text-link" to="/privacy-policy">the privacy policy</nuxt-link>
                for more information.
            </p>
        </div>
        <div class="flex justify-center mt-4 lg:mt-0">
            <div class="button ml-2 md:ml-0" @click="accept">Yes, sure</div>
            <div class="button md:ml-2" @click="deny">&times;</div>
        </div>
    </div>

Next, we will add a data property to track whether the cookie banner should be shown:

data() {
    return {
        isOpen: false
    };
}

We can now create a method to call when the user denies our request to use cookies. If the clicks deny, then we will hide the banner and save their preference to local storage.

deny() {
    if (process.browser) {
        this.isOpen = false;
        localStorage.setItem('GDPR:accepted', false);
    }
}

Similarly, we can create a method to call when the user accepts our request to use cookies. If the user clicks accept, we will hide the banner, save their preference to local storage and bootstrap the vue-gtag plugin.

import {bootstrap} from 'vue-gtag';

export default {
    methods: {
        accept() {
            if (process.browser) {
                bootstrap().then(gtag => {
                    this.isOpen = false;
                    localStorage.setItem('GDPR:accepted', true);
                    location.reload();
                })
            }
        },
        ...
    },
}

We should also make sure the component knows whether the banner should be shown when it is first loaded.

created() {
    if (!this.getGDPR() === true) {
        this.isOpen = true;
    }
},

methods() {
    getGDPR() {
        if (process.browser) {
            return localStorage.getItem('GDPR:accepted', true);
        }
    },
    ...
}

You may be wondering what the bootstrap method is doing here. Happily, vue-gtags allows us to load the plugin conditionally. This means the script will only load when we want it to. Lets' head back to our own analytics plugin and modify the code like this:

import Vue from 'vue';
import VueGtag from 'vue-gtag';

const getGDPR = localStorage.getItem('GDPR:accepted');

Vue.use(VueGtag, {
    config: { id: 'GA_MEASUREMENT_ID' },
    bootstrap: getGDPR === 'true',
    appName: 'APP_NAME',
    enabled: getGDPR === 'true',
});

You can read more about this in the vue-gtag documentation.

#Tracking page views

Since we are using vue-router as part of Nuxt JS, we can pass the application router to vue-gtag so that it can associate tracking information with the specific page the user is viewing.

import Vue from 'vue';
import VueGtag from 'vue-gtag';

export default ({ app }) => {
    const getGDPR = localStorage.getItem('GDPR:accepted');

    Vue.use(VueGtag, {
        config: { id: 'GA_MEASUREMENT_ID' },
        bootstrap: getGDPR === 'true',
        appName: 'APP_NAME',
        enabled: getGDPR === 'true',
        pageTrackerScreenviewEnabled: true
    }, app.router);
}

#Conclusion

Google Analytics is undoubtedly easy to install, but it takes a bit more work to inform your users that you are using cookies to track their use of your website and give them the option to opt out entirely. This process has made me think about whether this really is the right solution for me. I've been looking into cookie-free, privacy-focused tracking solutions and hope to be able to remove Google Analytics soon. I'd love to hear about how you measure visits to your blog and whether you've used any cookie-free solutions.

Thank you for reading this article.

If you've made it this far, you might like to connect with me on 𝕏 where I post similar content and interact with like-minded people. If this article was helpful to you I'd really appreciate it if you would consider buying me a coffee.
Continue Reading