FrontAid CMS - Agile Content Management with JSON & Git.

» FrontAid CMS / Blog

How to respect DoNotTrack (DNT) with Matomo

Matomo is an open source alternative to Google Analytics. DoNotTrack (DNT) is a browser setting to opt-out of user tracking. Websites are encouraged to adhere to that preference.

Data privacy should be a human right. And even if you don’t agree with that, you still have to be extra careful when you are dealing with personal information of your users. Given more and more strict privacy laws and regulations, you should—or even have to—give your users a choice. You could do that using crappy and abusive overlays, or you can just use the standard DoNotTrack (DNT) setting. That is a browser configuration that users can enable. Websites can detect that configuration and apply their data privacy measures accordingly.

The web analytics software Matomo is probably one of the most used alternatives to Google Analytics. It is open source and can be installed on your own server. To integrate it in your website, you just need to add some JavaScript code. By default, such an integration script looks similar to the following.

<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 = "//analytics.example.com/";
    _paq.push(['setTrackerUrl', u + 'matomo.php']);
    _paq.push(['setSiteId', '1']);
    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>

But now we want to make that script to respect the user’s DNT preference. While you can let Matomo itself handle DoNotTrack, that does not make much sense. It will request Matomo’s JavaScript code to only abort any tracking if DNT is enabled. That is a waste of bandwidth and increases loading time. Instead, you should not even load any Matomo code at all if DNT is enabled. You can easily check for DNT using navigator.doNotTrack with JavaScript. It’s value will be a string of the number one "1" if it is enabled. In that case just don’t load Matomo at all. You can see an example of the check in the code below.

<script type="text/javascript">
  var _paq = window._paq || [];
  if (navigator.doNotTrack !== '1') {
    /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
    _paq.push(['trackPageView']);
    _paq.push(['enableLinkTracking']);
    (function () {
      var u = "//analytics.example.com/";
      _paq.push(['setTrackerUrl', u + 'matomo.php']);
      _paq.push(['setSiteId', '1']);
      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>

With that code, Matomo will only be loaded if DoNotTrack is not enabled. If it is enabled, the Matomo script will not load at all and save your users’ bandwidth. As you can see, there is one line that is executed regardless of the user’s DNT setting. The code var _paq = window._paq || []; is just being used to create (or reassign) a list of things in a variable called _paq. If Matomo is not loaded, that is only kept locally and no data is transferred anywhere. And the reason why we would suggest doing that is Matomo’s event tracking.

You can track certain events, for example a button click, by pushing data into the _paq variable. That would likely look similar to _paq.push(['someEvent', 'arg']). These code snippets can be scattered among your code base. But that only works if the _paq variable already exists. It will fail if it does not and that might break your JavaScript code. So either you have to explicitly check for DNT everywhere you want to track an event, or alternatively just make sure that the variable always exists. We chose the second approach as it is a very simple way of handling it.

With the proposed code to integrate Matomo, you can adhere to your users’ preferences. And doing that is just two lines of code away. Please make use of it and respect your users.