Using Klaro Consent Manager with Matomo

Introduction

Klaro is a popular consent management platform which supports service based blocking, multi-language, a REST API and real time statistics. It has both open source and cloud service versions.

In this step-by-step guide you will learn how to set up Klaro open source or Klaro Cloud and Matomo to work together. Klaro can request and track visitor consent, with Matomo enabling or disabling analytics tracking based on the consent status provided by Klaro.

Klaro Cloud Service

Prerequisites

For the Klaro cloud service you should have created a Klaro account and have completed the necessary steps to add the consent manager code to your website.

Step 1) Add a service for Matomo

Login to your Klaro dashboard
Choose the website you wish to configure
Choose the Configuration tab
Click on ‘Default Config’
In the ‘Add a service’ box, type matomo and click ‘add as a new service’

Step 2) Configure the Matomo service

Click on ‘Matomo’ in the list of services.
Type Analytics into the service purpose dropdown and click ‘Add new purpose’.
Set Service Default State to ‘On’.
Add a cookie definition with the name /^pk.*$/.
Add a cookie definition with the name /^mtm.*$/.
Add a cookie definition with the name /^MATOMO.*$/.
Save the service.

Step 3) Connection Matomo and Klaro

To have the Matomo JavaScript tracker always use the visitor consent status provided by Klaro the following code should be added to the header of each website page beneath the Klaro code.

<script>
function KlaroWatcher() {};
KlaroWatcher.prototype.update = function(obj, name, data) { 
  if (data !== 'undefined' && data.hasOwnProperty('matomo')) {
    if (data.matomo) { 
      _paq.push(['setConsentGiven']);
      _paq.push(['setCookieConsentGiven']);
    } else {
      _paq.push(['forgetConsentGiven']);
      _paq.push(['forgetCookieConsentGiven']);
    }
  }  
}; 
window.kw = new KlaroWatcher();

var waitForTrackerCount = 0;
function matomoWaitForTracker() {
  if (typeof _paq === 'undefined' || typeof klaro === 'undefined') {                
    if (waitForTrackerCount < 40) {
      setTimeout(matomoWaitForTracker, 250);
      waitForTrackerCount++;  
      return;
    }
  } else {
    klaro.getManager().watch(kw);
  }
}  
document.addEventListener('DOMContentLoaded', matomoWaitForTracker());
</script>

The consent mode used by Matomo now needs to be configured: Configure Matomo Tracker Consent Mode

Klaro Open Source

Prerequisites

For Klaro open source you should already have downloaded the consent manager code, added it to your website and have a working config.js setup.

Step 1) Adding a Matomo service to Klaro open source

To add a service definition for Matomo edit your config.js file and find the services section:

var klaroConfig = {

    ....

    services: [
       // Add here
    ],
};

Add the following configuration to the services section:

{
 name: 'matomo',
 default: true,
 title: 'Matomo',
 purposes: ['analytics'],
 cookies: [
     [/^_pk_.*$/, '/', 'localhost'],
     [/^_mtm_.*$/, '/', 'localhost'],
     [/^MATOMO.*$/, '/', 'localhost'],
 ],
 callback: function(consent, service) {
     if (_paq !== 'undefined') {}
         if (consent == true){
              _paq.push(['setConsentGiven']);
              _paq.push(['setCookieConsentGiven']);
         } else {
              _paq.push(['forgetConsentGiven']);
              _paq.push(['forgetCookieConsentGiven'])
         }
      }
  },
  required: false,
  optOut: false,
  onlyOnce: true,
 },

Save the updated config.js file for the changes to take affect.

The consent mode used by Matomo now needs to be configured: Configure Matomo Tracker Consent Mode

This step applies to the Klaro cloud service and Klaro open source:

Matomo can apply consent in two different ways:

“Consent to Cookie”
This mode can be used when personal data is not being tracked. If consent to use cookies is not given then Matomo will still track visitors without using cookies and provide a full range of metrics, however the accuracy of some metrics may be reduced. Cookies will only be used if consent for Analytics was given in Klaro.

“Consent to Track”
If personal data is tracked, such as user identifiers or eCommerce orders, then this mode should be used. If consent for Analytics is not given in Klaro then Matomo will not perform any tracking at all.

Find out more about personal data processing in Matomo

Depending on which Matomo consent mode you choose, follow step a or step b.

  • Go to Administration > Measurables > Tracking Code in your Matomo dashboard, make sure the correct website is selected.

  • Copy the tracking code shown in the Matomo dashboard and paste it into a text editor. It should look similar to this:

    <!-- Matomo -->
<!-- SAMPLE CODE - DO NOT COPY THIS -->
<!-- COPY THE TRACKING CODE FROM YOUR MATOMO DASHBOARD -->
<script>
  var _paq = window._paq = window._paq || [];
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="//matomo/";
    _paq.push(['setTrackerUrl', u+'matomo.php']);
    _paq.push(['setSiteId', '1']);
  })();
</script>
<script src="//matomo/matomo.js"></script>
<!-- End Matomo Code -->

  • Add the line _paq.push(['requireCookieConsent']); just before the first line starting with _paq.push.

  • The resulting code should now look similar to this:

    <!-- Matomo -->
<!-- SAMPLE CODE - DO NOT COPY THIS -->
<!-- COPY THE TRACKING CODE FROM YOUR MATOMO DASHBOARD -->
<script>
  var _paq = window._paq = window._paq || [];
  _paq.push(['requireCookieConsent']);
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="//matomo/";
    _paq.push(['setTrackerUrl', u+'matomo.php']);
    _paq.push(['setSiteId', '1']);
  })();
</script>
<script src="//matomo/matomo.js"></script>
<!-- End Matomo Code -->

  • This code should now be added to all pages on your website directly before the tag, if you already have Matomo tracking code on the page then it should be replaced with this updated version.

  • Go to Administration > Measurables > Tracking Code in your Matomo dashboard, make sure the correct website is selected.

  • Copy the tracking code shown in the Matomo dashboard and paste it into a text editor. It should look similar to this:

    <!-- Matomo -->
<!-- SAMPLE CODE - DO NOT COPY THIS -->
<!-- COPY THE TRACKING CODE FROM YOUR MATOMO DASHBOARD -->
<script>
  var _paq = window._paq = window._paq || [];
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="//matomo/";
    _paq.push(['setTrackerUrl', u+'matomo.php']);
    _paq.push(['setSiteId', '1']);
  })();
</script>
<script src="//matomo/matomo.js"></script>
<!-- End Matomo Code -->

  • Add the line _paq.push(['requireConsent']; just before the first line starting with _paq.push.

  • The resulting code should now look similar to this:

    <!-- Matomo -->
<!-- SAMPLE CODE - DO NOT COPY THIS -->
<!-- COPY THE TRACKING CODE FROM YOUR MATOMO DASHBOARD -->
<script>
  var _paq = window._paq = window._paq || [];
  _paq.push(['requireConsent'];
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="//matomo/";
    _paq.push(['setTrackerUrl', u+'matomo.php']);
    _paq.push(['setSiteId', '1']);
  })();
</script>
<script src="//matomo/matomo.js"></script>
<!-- End Matomo Code -->

  • This code should now be added to all pages on your website directly before the tag, if you already have Matomo tracking code on the page then it should be replaced with this updated version.

Conclusion

If you’ve successfully followed the steps in this guide then your website will now have both Klaro and Matomo working together, with Klaro managing all visitor consent and the Matomo JavaScript tracker only tracking visitors who have given consent to be tracked.

Previous FAQ: Using Tarte au Citron Consent Manager with Matomo