Articles in the year 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:

• Matomo
• Fathom
• Simple Analytics
• Plausible
• Cloudflare

Let's investigate each of these offerings in turn.

#Matomo

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

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

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.

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

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

• *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

• *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 size can be inferred from device type.

• *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.

• *If the tracker is self-hosted.
• **As part of a paid plan.

#Misc

• *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.

I first heard about the full potential of AWS Organisations in this excellent talk on IAM Policies. I had seen this option in the console before, but I thought it would be overkill to create an organisation with multiple accounts when I only had a few small projects running on AWS at the time. Nowadays I make a new account for every new project I host on AWS. I love the organisation and separation of concerns that this brings to my setup. It's given me a lot of confidence to experiment with new AWS features and configurations.

#What is a multi-account environment?

A multi-account environment is the name that AWS gives to a setup in which you spread your resources across multiple accounts. This might sound like it adds a lot of complexity to your setup, but it's actually very simple to implement and brings a number of benefits in exchange.

AWS offers an easy way to manage multiple accounts under an AWS organisation in your root account. These new "sub-accounts" can be grouped into organisational units (OUs), and arranged into a hierarchy that matches your real-world needs.

This article on best practices outlines a number of useful organisational units based on best practices from existing AWS customers.

#When should you set up a multi-account environment?

AWS recommends this as best practice as soon as your workload grows in size and complexity.

In my opinion, the benefits are such that you should consider using this technique as soon as possible.

#Benefits of a multi-account AWS environment

1. Experiment with confidence

If you're anything like me, you felt pretty overwhelmed the first time you logged into the AWS console. As I'm writing this, there are now more than 175 products and services on AWS, ranging from storage to satellite communications and everything in between. What's more, the learning curve is pretty steep, and the repercussions of making a mistake can be costly.

One of the best things you can do when learning to use Amazon Web Services is to set up a sandbox account in which you can experiment freely, knowing you can tear down your resources when you are done. Of course, its possible to set up a new root account with the same purpose, but then you wouldn't gain any of the other benefits of a multi-account environment.

2. Simpler, more accurate billing

As soon as you're working on multiple projects, it becomes useful to know the total cost for the project across all resources. If you're using a single AWS account you can track the cost of a project by using tags, but there are several issues with this approach. First, there are some services that don't allow custom tags. Second, tags have to be managed, updated and maintained, which could lead to some project costs being missed.

By using a separate account for projects, teams or departments, you can track costs accurately across all resources created in that account. You can then see an overview of all costs across the organisation or drill down into the charges for each account in the billing dashboard.

3. Better organisation

When you use a multi-account environment, you can enforce tag and backup policies for each account. What's more, you'll be able to find resources quicker, making it much easier to build solutions that require several resources to communicate with each other. Multiple accounts will enable you to adapt each account to the specific needs of your project or team.

4. Increased Security

With each new account, you get a fresh set of IAM users, roles and policies. You can create completely different security configurations for each account, giving you fine-grained control over access to your resources. This is especially useful when projects need to meet strict compliance requirements or operate in a different region.

5. Scale easier

You never know when that side project might become your main stay. If you keep all your projects in one account, it can be extremely tricky and time-consuming to retrospectively extract one of them to another account. If, on the other hand, you create a new account for your project on day one, you can easily:

• give new users permission to access specific resources
• promote the account to a root account for accounting or other purposes
• hand over the account in the event that you sell the project
• take action quickly and efficiently in case something goes wrong.

#How to set up an AWS organisation

Follow these steps to create your AWS organisation:

1. Click on your name on the AWS Management Console.
2. Choose "My Organisation"
3. Choose "Create Organisation"
4. Choose "Enable all features or Enable only consolidated billing."
5. Choose "Create"

See this article to watch a short video on how to set up your AWS organisation.

#How to add a new account to your organisation

Once you've created your organisation, you're ready to add another account. You can either create a new account or invite an existing account to join your organisation.

Follow these steps to add a new account to your organisation:

1. Click on your name on the AWS Management Console.
2. Choose "My Organisation"
3. Chose "Add account"
4. Choose "Create account"
5. Fill in the "Account Name", "Email Address" and "IAM role name".
6. Add any tags that you want to add to the account.
7. Choose "Create"

The IAM role name specifies the name of a role that will be created by AWS in the new account and allow you to gain access to it. The default value is OrganizationAccountAccessRole, which will grant the organisation full administrative control over the new account.

#Conclusion

This setup may not be for everyone, but it can be a powerful option in your AWS toolbox when you outgrow your root account. Personally, I wish I had known about this option sooner and haven't regretted the decision to use this architecture for my own projects.

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

2. 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',
});

3. 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

2. 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

3. 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.

While reading a blog post on web mentions I noticed that the author, Freek Van der Herten was using a comment system that I had never seen before. It looked very similar to a GitHub issue, which piqued my interest. After some digging, I found that it was powered by a free and open source tool called Utterances.

Utterances provides a GitHub app and a lightweight script to embed a comment widget on your website. When Utterances loads, it will use the GitHub API to find a matching issue based on one of the following criteria:

• the article pathname
• the site url
• the page title
• the page open graph title
• a specific issue number
• an issue title containing a specific term

The comments from that issue are displayed inline on your site as you can see in the comment section at the bottom of this article.

#Who is this for?

Before we jump into installation instructions, I thought it best to mention that this tool is not for everyone. Utterances will require users to be signed in with a valid GitHub account to post a comment. This means that it is better suited to technical and software development blogs or sites whose users are familiar with GitHub. If you are catering to a wider audience, it is probably better to use a more generic solution such as Disqus or Commento.

#Installation

Follow these steps to install the Utterances comment widget on your site:

1. Create a new public GitHub repository. Be sure to make it public, or your readers will not be able to see the comments.

Create a new public GitHub repository

2. Head over to https://github.com/apps/utterances to install the GitHub app and give Utterances permission to access your public repository.

Utterances Permissions

3. Use the tool at https://utteranc.es/ to configure the comment section to match the style of your site. Once you have configured your options, you will see and be able to copy a script that looks something like this:

<script src="https://utteranc.es/client.js"
            repo="carlcassar/blog-comments"
            issue-term="pathname"
            theme="github-light"
            crossorigin="anonymous"
            async>

4. Paste the script into your code. The widget will be loaded at the location at which you paste the code snippet.

You should now be able to see the comment section and sign in to post a comment. After this, you can go to the issues tab of your public repository where you will see that Utterances has created a new issue. From now on, Utterances will synchronise issues between GitHub and your site.

#Nuxt / Vue sites

This blog, carlcassar.com, is built using the Vue.js base framework, Nuxt JS. There are several ways to add external scripts to a Nuxt project.

First, Nuxt allows you to add a file called app.html in the root directory of your project. In this file, you can modify the template into which Nuxt will inject your code. In my case, this option was not a viable solution as I only want the comment section to load on blog articles and not on every page of the site.

Ordinarily, Nuxt also lets you inject external scripts in the scripts property of the head() method. In this case, however, Utterances does not let you specify which div to attach the comment section to, which means that this method will load the Utterances widget in the head tag of the page, rendering it invisible.

The solution I ended up using was to simply copy and paste the auto-generated script tag into the view component for this page adding the attribute type="application/javascript".

<script type="application/javascript"
        src="https://utteranc.es/client.js"
        repo="carlcassar/blog-comments"
        issue-term="pathname"
        theme="github-light"
        crossorigin="anonymous"
        async>
</script>