Using Tarte au Citron Consent Manager CMP with Matomo (Alternative Integration)

Tarte au Citron offers built-in support for integrating Matomo, which can be set up in just a few steps. However, if you need more flexibility to manage tracking and cookies, this guide offers an alternative approach using the Matomo JS tracker code.

This approach is intended for scenarios where you are using the Manual Mode integration and disabled the Matomo Cloud service in Tarte au Citron. By using a consent handling script, you can track without cookies prior to consent and ensure cookies are removed when visitors deny or revoke consent. The method deviates from Tarte au Citron’s default privacy install, so it is important to evaluate this alternative implementation method against your compliance requirements.

To implement consent using Tag Manager, follow this guide: Using Tarte au Citron Consent Manager CMP with Matomo Tag Manager.

Prerequisites

Check the following is set up before starting the integration process:

  • You have a Tarte au Citron account setup with the initialisation script added to your website’s code (placed first in the tag).
  • Optionally, Tarte au Citron can be downloaded and installed locally without an account: Click the Github link.

Edit the Matomo tracking code

This step assumes you have already added the Matomo tracking code inside the <head> tag of your website code.

  1. Edit the tracking code by inserting the line _paq.push(['requireCookieConsent']);. Place this line just before the first line that starts with _paq.push in your existing tracking code.
  2. If you have not added the tracking code in your website, follow the steps to install and ensure the requireCookieConsent line is included.
  3. The version of your Matomo tracking code must have the requireCookieConsent line to properly enforce cookie consent functionality.

The updated 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 -->

When a visitor explicitly gives cookie consent, Matomo will track using cookies. If the visitor denies or revokes previous consent given, Matomo will track without cookies and remove any existing cookies from the browser.

Add the following code within the tag of each website page, below your Matomo script.
Note: Ensure the Tarte au Citron script is loaded before calling tarteaucitron.init(). You can include the script within the code below if it is not already added elsewhere:

 // Uncomment the following lines and replace the file path if Tarteaucitron is not loaded elsewhere
//<script src="/path/to/tarteaucitron/tarteaucitron.js"></script>
<script>
 var waitForTrackerCount = 0;
 function matomoWaitForTracker() {
  if (typeof _paq === 'undefined' || typeof tarteaucitron === 'undefined') {
    if (waitForTrackerCount < 40) {
      setTimeout(matomoWaitForTracker, 250);
      waitForTrackerCount++;
      return;
    }
  }
  // Initialise Tarteaucitron after the tracker is loaded
  tarteaucitron.init({
      // Optionally add non-default Tarteaucitron configs here
  });
  tarteaucitron.services.MatomoAnalytics = {
    "key": "MatomoAnalytics",
    "type": "analytic",
    "name": "Matomo Analytics",
    "needConsent": true,
    "cookies": ['_pk_id', '_pk_sess', '_pk_ref'],
    "readmoreLink": "/custom_read_more", // If you want to change the readmore link
"js": function () {
  "use strict";
  // When the user allows cookies
  console.log('Matomo cookies accepted');
  var _paq = window._paq = window._paq || [];
  _paq.push(['rememberCookieConsentGiven']);
  _paq.push(['setConsentGiven']);
},
"fallback": function () {
  "use strict";
  // When the user denies cookies
  console.log('Matomo cookies rejected');
  var _paq = window._paq = window._paq || [];
  _paq.push(['forgetCookieConsentGiven']);
  _paq.push(['deleteCookies']);
    }
  };
  // Ensure that tarteaucitron is loaded before pushing the job
  tarteaucitron.job = tarteaucitron.job || [];
  tarteaucitron.job.push('MatomoAnalytics');
}
matomoWaitForTracker();
</script>

Edit the Matomo tracking code

This step assumes you have already added the Matomo tracking code inside the <head> tag of your website code.

  1. Edit the tracking code by inserting the line _paq.push(['requireConsent']);. Place this line just before the first line that starts with _paq.push in your existing tracking code.
  2. If you have not added the tracking code in your website, follow the steps to install and ensure the requireConsent line is included.
  3. The version of your Matomo tracking code must have the requireConsent line to properly enforce cookie consent functionality.

The updated 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 script ensures that when the user gives tracking consent, Matomo will track (without cookies) and if the user does not give consent, Matomo will cease all tracking.

Add the following code within the tag of each website page below your Matomo script.
Note: Ensure the Tarte au Citron script is loaded before calling tarteaucitron.init(). You can include the script within the code below if it is not already added elsewhere:

// Uncomment the following lines and replace the file path if Tarteaucitron is not loaded elsewhere
//<script src="/path/to/tarteaucitron/tarteaucitron.js"></script>
<script>
 var waitForTrackerCount = 0;
 function matomoWaitForTracker() {
  if (typeof _paq === 'undefined' || typeof tarteaucitron === 'undefined') {
    if (waitForTrackerCount < 40) {
      setTimeout(matomoWaitForTracker, 250);
      waitForTrackerCount++;
      return;
    }
  }
  // Initialise Tarteaucitron after the tracker is loaded
 tarteaucitron.init({
    //optionally add non-default Tarteaucitron configs here
});
tarteaucitron.services.MatomoAnalytics = {
  "key": "MatomoAnalytics",
  "type": "analytic",
  "name": "Matomo Analytics",
  "needConsent": true,
  "cookies": ['_pk_id','_pk_sess','_pk_ref'],
  "readmoreLink": "/custom_read_more", // If you want to change readmore link
  "js": function () {
    "use strict";
    // When user allow cookie
    ('Matomo cookies accepted');
    var _paq = window._paq = window._paq || [];
    _paq.push(['setConsentGiven']);
  },
    "fallback": function () {
    "use strict";
    // when use deny cookie
    ('Matomo cookies rejected');
    var _paq = window._paq = window._paq || [];
    _paq.push(['forgetConsentGiven']); 
    _paq.push(['deleteCookies']);
  }
};
  // Ensure that tarteaucitron is loaded before pushing the job
  tarteaucitron.job = tarteaucitron.job || [];
  tarteaucitron.job.push('MatomoAnalytics');
</script>

Disclaimer: The use of any third-party tools (plugins, extensions, platforms, APIs, widgets, etc.) is at your own risk. Matomo does not own, control, maintain or support any third-party tools that integrate with our product. We recommend checking your privacy setup is correctly configured across your environment when using any third party tools.

Previous FAQ: Using Tarte au Citron Consent Manager CMP with Matomo