Using Klaro Consent Manager CMP with Matomo

Klaro is a popular consent management platform that 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 already have created a Klaro account and completed the necessary steps to add the consent manager code to your website.

Add a service for Matomo

1. Login to your Klaro dashboard and choose the website to configure.
2. Select Configuration tab > Default Config.
3. In the Add a service box, type Matomo and click ‘add as a new service’.
   

Configure the Matomo service

1. Click on Matomo in the list of services.
2. Enter Analytics into the Service Purpose dropdown and click Add new purpose.
3. Set Service Default State to On.
4. Add a cookie definition with the name /^pk.*$/.
5. Add a cookie definition with the name /^mtm.*$/.
6. Add a cookie definition with the name /^MATOMO.*$/.
7. Save the service.

Configure Matomo to apply consent for cookies

Step 1: Insert code for Klaro consent

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 and insert below the Klaro code.

    <script>
    function KlaroWatcher() {};
    KlaroWatcher.prototype.update = function(obj, name, data) { 
      if (data !== 'undefined' && data.hasOwnProperty('matomo')) {
        if (data.matomo) { 
          _paq.push(['rememberCookieConsentGiven']);
          _paq.push(['setConsentGiven']);
        } else {
          _paq.push(['forgetCookieConsentGiven']);
          _paq.push(['deleteCookies']);
        }
      }  
    }; 
    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>

Cookies will only be used if consent for Analytics was given in Klaro. If a visitor revokes consent, the cookies are deleted.

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.

Step 2: Insert Matomo tracking code

1. Go to Administration > Measurables > Tracking Code in your Matomo dashboard and make sure the correct website is selected.
2. Copy the tracking code shown in the Matomo dashboard and paste it into a text editor.

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

4. This code must be added to all pages on your website before the </head> tag. If you already have the Matomo tracking code on the page, replace it with this updated version.

Find out more about personal data processing in Matomo.

Configure Matomo to apply consent for tracking without cookies

Step 1: Insert code for Klaro consent

To setup Matomo to track visitor metrics without using cookies, add the following code to the header of each website page and insert below 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']);
        } else {
          _paq.push(['forgetConsentGiven']);          
        }
      }  
    }; 
    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>

Step 2: Insert Matomo tracking code

1. Go to Administration > Measurables > Tracking Code in your Matomo dashboard and make sure the correct website is selected.
2. Copy the tracking code shown in the Matomo dashboard and paste it into a text editor.

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

4. This code must be added to all pages on your website before the </head> tag. If you already have the Matomo tracking code on the page, replace it with this updated version.

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.

Configure Matomo to apply consent for cookies

Step 1: 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 for consent to cookies:

    {
     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(['rememberCookieConsentGiven']);
                  _paq.push(['setConsentGiven']);
             } else {
                  _paq.push(['forgetCookieConsentGiven'])
                  _paq.push(['deleteCookies']);
             }
          }
      },
      required: false,
      optOut: false,
      onlyOnce: true,
     },

Save the updated config.js file for the changes to take affect. Cookies will only be used if consent for Analytics was given in Klaro.

Step 2: Insert Matomo tracking code

1. Go to Administration > Measurables > Tracking Code in your Matomo dashboard and make sure the correct website is selected.
2. Copy the tracking code shown in the Matomo dashboard and paste it into a text editor.

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

4. This code must be added to all pages on your website before the </head> tag. If you already have the Matomo tracking code on the page, replace it with this updated version.

Configure Matomo to apply consent for tracking without cookies

Step 1: 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 for consent to tracking:

    {
     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']);
             } else {
                  _paq.push(['forgetConsentGiven'])                  
             }
          }
      },
      required: false,
      optOut: false,
      onlyOnce: true,
     },

Save the updated config.js file for the changes to take affect. If consent for Analytics is not given in Klaro, then Matomo will not perform any tracking at all.

Step 2: Insert Matomo tracking code

1. Go to Administration > Measurables > Tracking Code in your Matomo dashboard and make sure the correct website is selected.
2. Copy the tracking code shown in the Matomo dashboard and paste it into a text editor.

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

4. This code must be added to all pages on your website before the </head> tag. If you already have the Matomo tracking code on the page, replace it with this updated version.

Conclusion

If you successfully followed the steps in this guide, then your website will have both Klaro and Matomo working together. Klaro will manage all visitor consent and the Matomo JavaScript tracker will only track visitors who have given consent.