Using Tarte au Citron Consent Manager CMP with Matomo Tag Manager

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 Matomo Tag Manager.

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 the Matomo JS tracker code, follow this guide: Using Tarte au Citron Consent Manager CMP with Matomo (Alternative Integration).

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 <head> tag).
  • Optionally, Tarte au Citron can be downloaded and installed locally without an account: Click the Github link.
  • The Matomo Tag Manager script is added to your website code.
  • The basic requirements are completed for the Tag Manager configuration.

Create a Custom HTML tag to include the Matomo script that manages cookie-based tracking according to the consent updates from Tarte au Citron. If the user explicitly gives cookie consent, Matomo will track using cookies and if the user does not give cookie consent, Matomo will track without cookies.

  1. Go to Matomo > Tag Manager and open the container to edit.
  2. Navigate to Triggers and click Create New Trigger.
  3. Choose the DOM Ready trigger and click Create New Trigger to save.
  4. Navigate to Tags to add the script for consent status updates.
  5. Click Create a New Tag and choose the Custom HTML tag type.
  6. Provide a name for the tag, which will be publicly visible in the source code when previewing and debugging the container.
  7. Paste the following script into the Custom HTML field.
    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<script>
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(['rememberCookieConsentGiven']);
    _paq.push(['setConsentGiven']);
  },
  "fallback": function () {
    "use strict";
    // when use deny cookie
    ('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');
</script>
  1. Set the Position to Head Start. This defines where the script gets inserted into the website’s code.
  2. In the section, Configure when the tag should do this, the DOM Ready trigger must be linked.
  3. Click Create New Tag to save the tag.
  4. Make sure your Matomo Configuration Variable has the Require Cookie Consent option enabled. Your Custom HTML Tag and all other tags in your container should reference this Matomo Configuration Variable.
  5. Open the Matomo tag and in the section, Configure when the tag should do this, ensure its configured with the Pageview trigger.
  6. You can run the container in preview mode to test and debug before publishing live.
  1. Go to Matomo > Tag Manager and open the container to edit.
  2. Navigate to Triggers and click Create New Trigger.
  3. Choose the DOM Ready trigger and click Create New Trigger to save.
  4. Navigate to Tags to add the script for consent status updates.
  5. Click Create a New Tag and choose the Custom HTML tag type.
  6. Provide a name for the tag, which will be publicly visible in the source code when previewing and debugging the container.
  7. Paste the following script into the Custom HTML field.
    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<script>
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>
  1. Set the Position to Head Start. This defines where the code gets inserted into the website’s code.
  2. In the section, Configure when the tag should do this, the DOM Ready trigger must be linked.
  3. Click Create New Tag to save.
  4. Make sure your Matomo Configuration Variable has the Require tracking consent option enabled. Your Custom HTML Tag and all other tags in your container should reference this Matomo Configuration Variable.
  5. Open the Matomo tag and in the section, Configure when the tag should do this, ensure its configured with the Pageview trigger.

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 Osano Consent Manager CMP with Matomo Tag Manager