Articles with the tag Tools

My sister recently bought herself a new MacBook Air. Getting a new laptop is always exciting, but nothing beats the experience of opening your first Mac. Since she's coming over from Windows, I thought it would be useful for me to write down a few tips and tricks she (and you) might find useful for getting started on a Mac.

#1. How do I get online?

The first job of any modern computer is surely to access the internet. Those cat pictures don't view themselves. If you're reading this you're probably already online but here it goes anyway.

If you haven't aleady connected to WI-FI when going through setup then you'll want to look at the Menu Bar on the top right hand side of your screen. There you'll see a fan shaped icon that you can click on to show you a list of available networks. Choose your local WI-FI from the list, enter your password and you should be online in no time.

Next, you'll need a browser. Just as on an iPhone, the default browser is Safari. You'll find this in your dock if you look for a big compass icon.

Bonus Tip: On a Mac, the option key on the keyboard can often be used to list addition options in a menu. If you hold down the option key and then click on the same WI-FI icon as earlier, you will see a load more advanced options as well as more information about the network you are connected to.

#2. What's a Finder?

This is the app that let's you explore the file system of your machine, other machines on the local network, devices you plug into your machine or other computers on the internet. If you're coming from Windows, you're best thinking of it as something similar to Windows Explorer or File Explorer.

It's worth noting that this is one app you can't quit. You can close it's windows but you can't quit it as it's part of the Operating System and required for other apps. That begs a good question.

#3. How do I quit an app?

Before we get to that, it's a good idea to notice that when you click on an app in the dock, a small dot appears beneath it. That tells you that the app is open.

Now if you come from windows you might be used to pressing the red X button at the top right off any window. On a Mac, things work slightly differently as you might expect. The buttons are on the top left instead, but they don't work in exactly the same way. From right to left you have three buttons:

• Green - Make the current window full screen (or vice-versa)
• Yellow - Minimise (Hide) the current window. Notice that it disappears into the dock. Simply click on the dock icon again to maximise that window.
• Red - Close the current window.

The real catch is in the last button. On a Mac, closing the window does not close the app. This is because many Mac apps allow multiple windows.

So, if you ever want to Quit the whole app, you can either:

• Click on the name of the app at the top left of your screen and then choose Quit App where App will be replaced by the name of the current application.
• Right click on the dock icon for the application you want to close and choose Quit.

Wait... you said 'Right Click'.

So I did, which brings us on to our next tip.

#4. How do I right click on a Mac?

When you first get a Mac you'll notice the beatiful trackpad doesn't have any buttons. In face, you can click anywhere on the trackpad to click on an item under your cursor. That doesn't mean you can't right click or bring up additional context menus. To get your trackpad to right click, open your computer's System Preferences. You can do this by clicking on the System Preferences app in the dock or by clicking on the Apple logo at the top left of your screen and then choosing System Preferences.

Now look for the Trackpad option. When you've opened the Trackpad setting, you'll notice that there is a Secondary Click checkbox. Make sure this is ticked and then click on the dropdown menu immediately beneath it. You'll find that you have the following options:

• Click or tap with two fingers (a very good option if you can get used to it)
• Click in the bottom right corner (just as you might be used to)
• Click in the bottom left corner (WHY??)

Cool Fact: Try clicking your trackpad when the Mac is turned off and you'll notice it doesn't actually move! What?! Despite giving off a nice clicky feeling, Apple uses some Haptic Feedback magic to make you feel like the trackpad moved when it didn't. This means there are less moving parts in your trackpad which will make it work better for longer.

#5. I can't find the app I want!

When you first get a Mac, you'll see a lot of apps in the dock at the bottom of the screen. After a while you might find that you can't see all the apps that your mac can run and besides, how could they all fit in the dock (though some people seem to try).

One way to see all the applications on your Mac is open your Finder window and click on Applications in the menu of favourites on the left hand side.

Another option is to make a five finger gesture on the trackpad. This can be a bit tricky till you get used to it, but you need to put all your fingers on the trackpad and then bring your fingers together in a pinching motion. If you've done it right, you'll see all your apps on screen with a search bar where you can filter down to the one you are looking for.

Finally, if you're in a hurry or can't be bothered with all the clicking, press the Command and Space keys together and you will see a search bar appear in the middle of your screen. You can use this search bar to find an Application, but you can also use it to search literally anything on your Mac. This has been one of the best features of a Mac for years and it's called Spotlight. You can also access this search bar by clicking on the search icon in the Menu Bar at the top right of your screen.

#6. What other gestures can I use on the Trackpad?

Over the years, the Mac has gained a lot from the success of iOS on iPhone and iPad. There are countless gestures you can make use of, but it takes some time to get used to them and can be quite tricky to master at the start.

The best way to learn all these gestures is to head back into the Trackpad option in your System Preferences. There you will see that there are actually three tabs, one of which is named, quite helpfully, More Gestures. There you will see that you can configure the gesture you want to use, but even more helpfully, you'll find a little video when you click on each option, that explains how to perform each trackpad gesture.

If you're feeling lazy and can't be bothered with that, you can experiment by yourself. When you've had enough of things randomly scooting off and on your screen, you can also look at this helpful article on Apple's support website that lists all available gestures.

#7. How do I force quit an app?

Despite what you might have heard, even on a Mac, things occasionally go wrong and you might find yourself in a situation where the current application has become unresponsive. Luckily, the Mac operating system tends to keep things under control and one hanging application does not usually freeze the whole machine. If you notice a spinning beach ball icon then your app has probably encountered an issue that requires it to be closed forcefully.

To do this, you can either hold down the option key whilst right clicking on the application icon in the dock. You will then see that the Quit option has changed into a Force Quit option. If you open the menu and toggle the option key, you will notice the option change from Quit to Force Quit and back again.

Another option is to click on the Apple Icon at the top left of the screen and choose the Force Quit... option. You should then see a list of open applications that you can choose to Quit Forcefully.

#8. How do I install a new app?

Good question. Unlike iOS, this can sometimes become a little bit more complicated, but only because developers have more options on how to package and distribute their application.

First things first, just like you might be use to on an iPhone or iPad, the Mac comes with its very own app store. You can open the App Store app as described above or else by clicking on the Apple logo at the top left of your screen and choosing App Store. You'll need your Apple ID handy, even if you choose to download a free app. Things might change in the future, but for now you may soon notice that some apps that you would expect to be in the App Store are missing. That brings us to downloading apps from the internet.

Apps downloaded from the internet will usually end up in your Downloads folder which you can find in the left hand menu of the Finder app. When you click on them (or they open after download), you will find one of two things. If the app requires a complicated setup on your machine then the app will come with an installer that will go ahead and walk you through a number of steps in a Wizard that will ususally guide you through everything you need to do and know. An installer will usually also clean up after itself.

A more typical, but initially confusing scenario is that you will end up with something called a Disk Image in your downloads folder. A disk image is a little bit tricky to understand at first, but you should think about it like a temporary CD that has been inserted into your computer. As such, when you click on it, it is mounted and will need to be ejected when you are finished. Often times, this disk image will mount itself immediately after it is finished downloading. When the disk image is mounted you will see a Finder window with the application in it and perhaps a folder that says Applications. It might be tempting to click on the application there and then and you will infact find that it will open. You should not do this, as you will be confused later on when the application is not in your Applications folder. Instead, you should click and drag the application from the disk image into the applications folder (or the shortcut usually found in the disk image). That way, the self contained application is moved to your applications folder once and for all. After this, you can eject the disk image (remember the cd analogy) by clicking the Eject button next to the name of the disk image which you will find in the left hand menu of the finder window.

#9. Can't I just ask Siri?

If you don't mind talking to your computer, then Siri can be a great way to make your way around a Mac, especially when you are just getting to grips with things. To ask Siri, press the command key and the space bar at the same time, just as though you were going to make a spotlight search. Just hold the keys for a second longer and you will notice a window appear where Siri is asking, "What can I help you with?". Check out Siri's Support Page if you're not sure what to ask. Here are a few things to get you started:

• Turn the brightness up
• Turn the volume down
• Open Finder
• What's the weather like today?
• Send Carl a message saying "Thanks for writing this article".
• Tell me a joke (they're actually quite funny).

#10. Where can I get more help?

That's a lot of information to take in at once. If you're new to a Mac, it will take some time for things to start to feel natural. If you're looking for more help and a wealth of knowledge, there is no better place to start than Apple's Support Site and more specifically, the Mac OS User Guide.

Finally, and this goes to anyone reading this and not just my sister, please feel free to get in touch if you need any help. You can add a comment below or get in touch on Twitter.

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.

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>