Matomo installation – Cookiebot Support

Websites using Matomo can deploy Cookiebot, and/or control tags to honor the visitors consent by following the instructions in this guide.

In this guide, we will show you how to:

Implement the cookie consent banner
Control cookie-setting tags
Display the cookie declaration on a subpage

We assume that you've already created a Matomo account, and added the Matomo container snippet to your website.

1. Implementing the cookie consent banner in Matomo

Create a new tag by clicking the "Tags" menu item, and clicking the "+ CREATE NEW TAG" button.
Under Tag type, select "Custom HTML".
Give the tag a name, for example "Cookiebot CMP"
Under "Configure what this tag should do", add the following code:
Enter you own CBID here to update the snippet (which you can find in the Manager, on the "Your scripts" tab):

<!-- Cookiebot -->
<script>
  window.addEventListener("CookiebotOnConsentReady", function () {
    var C = Cookiebot.consent,
        c = ["preferences", "statistics", "marketing"];
    function m(a) {_mtm.push({event: "cookie_consent_" + a})}
    c.forEach(function (i) {C[i] && m(i)})
  })

  !function(C,oo,k,ie,b,o,t){
  b=C.createElement(oo),o=C.getElementsByTagName(oo)[0];
  b.src='https://consent.cookiebot.com/uc.js?cbid='+ie;
  b.id=k;b.async=!0;o.parentNode.insertBefore(b,o);
  }(document,'script','Cookiebot','00000000-0000-0000-00000-000000000000')
</script>
<!-- End Cookiebot-->

Choose "Head Start" under "Position"
Choose the "Page view" trigger under "Configure when the tag should do this"

Your tag configuration should look similar to this:

tag configuration

Ensure that you have registered and saved the domain name(s) of your website(s) in the Cookiebot Manager.

2. Controlling cookies

To honor the visitor's consent, you need to define the logic that controls the behavior of cookie-setting tags on your website.

To do this you need to create the following Triggers, to be used in your Matomo configuration:

Name: Cookie Consent Preferences,
Event Name: cookie_consent_preferences
Name: Cookie Consent Statistics,
Event Name: cookie_consent_statistics
Event Name: Cookie Consent Marketing,
Event Name: cookie_consent_marketing

To create the Triggers, repeat these steps for each of the Cookiebot triggers:

Click the "Triggers" menu item and click "+ CREATE NEW TRIGGER"
Choose "Custom Event" under "Choose a type of trigger to continue"
Assign a name and the matching event from the list above
Click the "CREATE NEW TRIGGER" button to save the trigger

Your trigger configuration should look similar to this:

Tags which set cookies within one of these three categories (review the scan report if you are in doubt) must only be triggered when the user has consented to the relevant category.
To achieve this, assign the appropriate Cookie Consent Trigger on each cookie-setting tag, e.g. "Cookie Consent Statistics" for your Matomo Analytics tag:

You can also define Custom JavaScript variables to use as a condition for existing triggers:

Click the "Variables menu" item
Under "Choose a type of variable to continue", choose "Custom JavaScript"
Give the new variable an appropriate name, for example "CookieConsent preferences"
Under "JavaScript function" add the following:

function () {
  return Cookiebot.consent.preferences.toString()
}

Click the "Show advanced settings" link
Under "Default value" write "false" (including the quotation marks)

Repeat these steps for the "statistics" and "marketing" categories with the following code:

CookieConsent statistics:

function () {
  return Cookiebot.consent.statistics.toString()
}

CookieConsent marketing:

function () {
  return Cookiebot.consent.marketing.toString()
}

Your variables should look similar to this:

You can create variables for for preferences and marketing by following the same steps, simply replace the word "statistics" with "preferences" or "marketing" in the JavaScript Function.

3. Implementing the cookie declaration

To give visitors the option to change or withdraw their consent, you can choose to implement Cookiebot CMP's "Cookie Declaration" on a page of your own choice, by embedding the following script tag directly into the body of the page. The script tag should be placed in the exact position on the page where you want the cookie declaration to be displayed.

Be sure to replace 00000000-0000-0000-0000-000000000000 with your own Domain Group ID, which you can find in the Manager on the "Your scripts" tab:

<script
  id="CookieDeclaration"
  src="https://consent.cookiebot.com/00000000-0000-0000-0000-000000000000/cd.js"
  type="text/javascript"
></script>

Make sure to have a link to the page with the Cookie Declaration on all pages of your website, for example in the website template footer.

4. Marking up your non-Matomo website elements

With your Matomo setup now complete, it's time to mark up your non-Matomo website elements.
When you implement Cookiebot using Matomo, Cookiebot can be used to control website elements which require consent and do not originate from Matomo, i.e. scripts, images and iframes inserted directly into your website template.
Such elements need to be marked up for 'prior consent' as described in our manual mark up guide.