Going cookie-less with Matomo
Tags: analytics, gdpr, cookies, javascript
Published: 2021-07-01 12:31:49

*Basically every website on the Internet uses cookies to preserve your session, to show ads, track you across the web and much more. But, there's a revolution going on. More and more websites are getting rid of it. So, let's join this movement.*

## The awful cookie law.
Using cookies is helpful to save a user's session or to save settings like a dark mode toggle, for example. There are alternatives to this. You can use local storage, session storage or indexeddb.

Since the EU cookie law, every website using cookies is required to ask consent before saving cookies. Many sites fail to comply to this law. They either just completely ignore it by not asking for consent or they show a cookie wall, which, in fact, is illegal. A user must have a free choice to enter the website without cookies being used and cookie walls block you from viewing content if you don't consent. Note that a cookie wall is different than a cookie notice/banner.

Cookie walls and notices are just straight up garbage, time and resource wasting and annoying. They are just awful. For example. one of the worst ones I ever encountered are from the NPO (Dutch Public Broadcaster). Their notice is huge and requires you to select an option because there's no default option selected.

![A cookie banner from the Dutch Public Broadcasting System (NPO).
](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9pkxvoto31rtgd051phz.jpg)
<figcaption>A cookie banner from the Dutch Public Broadcasting System (NPO).</figcaption>


There's just no upside on cookie notices, besides not having cookies when manually deselecting all boxes. When deselecting the cookies you have to make sure you don't click the Agree to all cookies button. Which is a sneaky trick some cookie notices use. The primary button is the one who agrees to all and the secondary button agrees to the ones you just wasted an entire minute on deselecting.

## Analytics without cookies.
One of the main concerns of website developers and marketeers are analytics. Maybe it's your job, or you just want to see how many people are looking at the pictures of your face on the about me page of your personal website. No worries, analytics are still possible. In fact, my personal website is running analytics right now without requiring your consent since it is fully anonymous and is not using a single cookie.

So, how do we achieve that?

**Answer: Matomo**

Matomo is a free open-source analytics platform that markets itself as the best free Google Analytics alternative right now. And I agree, it is really similar and is free to use. It is still possible to purchase premium add ons like Heat map functionality, but those are optional and not even included in Google Analytics either.

Installing Matomo is a piece of cake. You can either just upload the files yourself by downloading the archive from the website or use the 1-click installer from [Ploi.io](https://ploi.io/register?referrer=GKaTfRhSDJBxW8micynN) (referral link).
![An easy way to install Matomo is by using Ploi's 1-click installer.
](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6vwalksq18o58a6jr789.png)
<figcaption>An easy way to install Matomo is by using Ploi's 1-click installer.
</figcaption>


## Set up Matomo
When accessing Matomo for the first time, you will be prompted with the installer to configure initial settings. 

Follow the steps on your screen and you're good to go.
In order to make the entire Matomo instance comply with the GDPR, we're going to configure some system wide settings.

Click the gear icon in the navigation menu and then go to Privacy → Anonymise data in the sidebar. Take a look at the following settings:
![A quick overview of Matomo's privacy and anonymise settings to comply with the GDPR.
](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c4a5vvszae4sj6550j9p.png)
<figcaption>A quick overview of Matomo's privacy and anonymise settings to comply with the GDPR.
</figcaption>

Let's walk through these settings so we thoroughly understand them.

**Anonymise Visitor's IP addresses**
Anonymising IP addresses is a good first step to preserve a visitor's privacy. IP addresses are seen as personal information under the GDPR and thus you require the user to agree on saving those. However, only saving 2 or 1 bytes of the IP address is completely fine because it is not possible to track the user.
There is one downside to this: geolocation accuracy. Matomo has to guess where the user comes from by using its IP address. However, it is accurate enough for most of us.

**Anonymise order ID**
If you're running a e-commerce website, enabling this option makes sure the order ID is not linked to a person. Otherwise it is seen as a personal information under the GDPR.

**Force tracking without cookies**
Finally 🎉 there we are. Going cookie-less. It makes sure Matomo does not save cookies and will ignore tracking cookies entirely. Great, isn't it?

## Configure a website
So you have now installed and configured Matomo and you're ready to configure your first website. When prompted for a *Website* or an *Intranet website*, pick *Website*. You will now see a form asking for some details. Enter the URL and name and you're good to go. If you run an e-commerce website or want to configure IP whitelists, configure those too. Though most people are good with just the name and URLs.

Now, let's head over to the tracking code. This is what the default tracking code looks like:
```javascript
<!-- Matomo -->
<script type="text/javascript">
  var _paq = window._paq = window._paq || [];
  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="MATOMO_URL";
    _paq.push(['setTrackerUrl', u+'matomo.php']);
    _paq.push(['setSiteId', 'MATOMO_SITE_ID']);
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.type='text/javascript'; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
  })();
</script>
<!-- End Matomo Code -->
```

Now, in order to make the tracking script honour DoNotTrack settings in the visitor's browser and disable cookies, add the following above properties to the tracking code snippet, just above the trackPageView property:

```javascript
  _paq.push(["setDoNotTrack", true]);
  _paq.push(["disableCookies"]);
```

## And... we're cookie-less!
Congratulations, your website now has working analytics without using cookies. Really, the results are small, but great. The biggest upside of this is you don't have to implement a cookie notice at all. It saves you and your visitor's a shitload of time.

Check out this tweet of mine where I posted my results:
{% twitter 1407290495978594305 %}

Good luck with your cookie-less website. I hope you liked this blog since it's the first real blog post I wrote besides my introduction.

If you have got any questions, feel free to reach out to me on Twitter 🙌