Matomo mit CookieConsent: das Consent-Banner von Orest Bida anbinden

Ein Consent-Banner muss nicht von einem Anbieter in der Cloud kommen. CookieConsent von Orest Bida ist eine kleine JavaScript-Bibliothek unter MIT-Lizenz, die Sie mit Ihrer Website ausliefern. Sie fragt nach Kategorien wie Statistik und Marketing, merkt sich die Entscheidung, gibt Skripte erst nach Zustimmung frei und löscht Cookies wieder, wenn jemand ablehnt. Matomo hängt sich über Callbacks daran.

Das Prinzip: cookielos messen, Cookies nach Zustimmung

Matomo misst jeden Besuch ohne Cookies und ohne Erkennung von Browser-Funktionen. Stimmt jemand der Kategorie Statistik zu, setzt Matomo ab dann Cookies und erkennt den Besucher wieder. Lehnt er ab oder zieht seine Zustimmung zurück, löscht Matomo die Cookies. Die Grundzahlen bleiben so vollständig, und wer zustimmt, wird über mehrere Besuche hinweg erkannt. Was cookielos fehlt, steht unter Matomo ohne Cookies.

Einbinden, selbst gehostet

CookieConsent gibt es als npm-Paket vanilla-cookieconsent, im November 2026 in Version 3.3. Aus dem Ordner dist brauchen Sie zwei Dateien, cookieconsent.umd.js und cookieconsent.css, dazu eine Datei mit Ihren Texten. Alle drei legen Sie auf Ihren Server; die Beispiele in der Dokumentation laden sie von einem CDN, das braucht es nicht.

<link rel="stylesheet" href="/assets/cookieconsent/cookieconsent.css">
<script src="/assets/cookieconsent/cookieconsent.umd.js"></script>
<script>
  CookieConsent.run({
    categories: {
      necessary: { enabled: true, readOnly: true },
      analytics: {
        // Matomo-Cookies löschen, wenn Statistik abgelehnt wird
        autoClear: { cookies: [{ name: /^_pk_/ }, { name: 'mtm_cookie_consent' }] }
      },
      marketing: {}
    },
    language: {
      default: 'de',
      translations: { de: '/assets/cookieconsent/de.json' }
    },
    onConsent: syncConsent,   // bei der ersten Entscheidung und auf jeder Seite danach
    onChange: syncConsent     // wenn jemand seine Auswahl ändert
  });
</script>

Ein paar Standards von CookieConsent passen schon: Der Modus ist opt-in, Skripte laufen also erst nach Zustimmung. Die Schaltflächen für Annehmen und Ablehnen sind gleich gewichtet. Und die Entscheidung liegt 182 Tage im Cookie cc_cookie. Mit revision fragt das Banner neu, wenn Sie Dienste oder Kategorien ändern.

Matomo ohne Tag Manager

Der Tracking-Code bekommt eine Zeile dazu, requireCookieConsent. Damit misst Matomo von Anfang an, aber ohne Cookies:

<script>
  var _paq = window._paq = window._paq || [];
  _paq.push(['requireCookieConsent']);   // cookielos, bis die Zustimmung kommt
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u = 'https://matomo.example.com/';
    _paq.push(['setTrackerUrl', u + 'matomo.php']);
    _paq.push(['setSiteId', '1']);
    var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
    g.async = true; g.src = u + 'matomo.js'; s.parentNode.insertBefore(g, s);
  })();
</script>

Der Callback, den CookieConsent oben aufruft, übersetzt die Entscheidung in Matomo-Befehle. Definieren Sie ihn vor CookieConsent.run:

<script>
  function syncConsent() {
    window._paq = window._paq || [];
    if (CookieConsent.acceptedCategory('analytics')) {
      _paq.push(['rememberCookieConsentGiven']);   // Cookies ab jetzt erlaubt
    } else {
      _paq.push(['forgetCookieConsentGiven']);     // Cookies löschen, wieder cookielos
    }
  }
</script>

rememberCookieConsentGiven speichert die Zustimmung im Cookie mtm_cookie_consent, forgetCookieConsentGiven löscht es und die Matomo-Cookies. Die Befehle über _paq erreichen jeden Matomo-Tracker auf der Seite, auch den aus einem Container des Tag Managers.

Mit dem Matomo Tag Manager

Mit dem Tag Manager steuert der Callback nicht Matomo direkt, sondern schickt die Entscheidung in den Datenlayer. Was daraufhin passiert, legen Sie im Container fest, auch für Werbe-Tags:

<script>
  function syncConsent() {
    window._mtm = window._mtm || [];
    window._mtm.push({
      event: 'cc_consent',
      cc_analytics: CookieConsent.acceptedCategory('analytics') ? 'granted' : 'denied',
      cc_marketing: CookieConsent.acceptedCategory('marketing') ? 'granted' : 'denied'
    });
  }
</script>

Im Container brauchen Sie dafür:

Was	Typ	Einstellung
Matomo-Konfiguration	Variable	Einwilligung zu Cookies erfordern an
cc_analytics, cc_marketing	Variable vom Typ Data-Layer	Data-Layer-Variablenname cc_analytics bzw. cc_marketing
Zustimmung Statistik	Trigger vom Typ Benutzerdefiniertes Ereignis	Ereignis cc_consent, Bedingung cc_analytics ist gleich granted
Ablehnung Statistik	Trigger vom Typ Benutzerdefiniertes Ereignis	Ereignis cc_consent, Bedingung cc_analytics ist gleich denied
Zustimmung Marketing	Trigger vom Typ Benutzerdefiniertes Ereignis	Ereignis cc_consent, Bedingung cc_marketing ist gleich granted
Matomo Analytics	Tag	wie bisher auf Seitenansicht, misst bis zur Zustimmung cookielos
Matomo-Cookies erlauben	Tag vom Typ Benutzerdefiniertes HTML	_paq.push(['rememberCookieConsentGiven']), Trigger Zustimmung Statistik
Matomo-Cookies entfernen	Tag vom Typ Benutzerdefiniertes HTML	_paq.push(['forgetCookieConsentGiven']), Trigger Ablehnung Statistik
Werbe-Tags	etwa Facebook-Pixel oder Google Tag	Trigger Zustimmung Marketing statt Seitenansicht

In beiden Tags vom Typ Benutzerdefiniertes HTML steht vor dem Befehl window._paq = window._paq || [];, damit er auch greift, wenn Matomo noch lädt.

Weil CookieConsent onConsent auf jeder Seite aufruft, auf der eine Entscheidung vorliegt, kommt das Ereignis cc_consent auf jeder Seite, und die Werbe-Tags feuern dort, nur eben erst mit Zustimmung. Wie Variablen, Trigger und Versionen im Tag Manager funktionieren, steht unter Matomo Tag Manager. Nach jeder Änderung veröffentlichen Sie eine neue Version des Containers.

Skripte von Google, Meta und anderen steuern

Werbe-Skripte dürfen erst nach Zustimmung laden. Dafür gibt es drei Wege:

Über die Skript-Tags. CookieConsent gibt ein Skript erst frei, wenn die Kategorie angenommen ist, wenn Sie es mit type="text/plain" und data-category kennzeichnen. Mit data-service bekommt es im Banner einen eigenen Schalter:

<script type="text/plain" data-category="marketing" data-service="Meta Pixel">
  /* Code des Meta Pixel */
</script>
<script type="text/plain" data-category="marketing" data-service="Google Ads"
        data-src="https://www.googletagmanager.com/gtag/js?id=AW-XXXXXXX"></script>

Über den Tag Manager. Wer Werbe-Tags im Matomo Tag Manager pflegt, hängt sie an den Trigger Zustimmung Marketing, wie in der Tabelle oben.

Über den Consent Mode von Google. Google-Tags kennen eigene Einwilligungssignale. Sie starten mit denied und werden im Callback auf granted gesetzt:

<script>
  window.dataLayer = window.dataLayer || [];
  function gtag() { dataLayer.push(arguments); }
  gtag('consent', 'default', {
    ad_storage: 'denied', ad_user_data: 'denied',
    ad_personalization: 'denied', analytics_storage: 'denied'
  });
  // im Callback, wenn Marketing angenommen ist:
  // gtag('consent', 'update', { ad_storage: 'granted', ad_user_data: 'granted', ad_personalization: 'granted' });
</script>

Wie viele Pixel es überhaupt braucht, ist eine eigene Frage: Conversions lassen sich auch vom Server an die Werbeplattformen melden, beschrieben unter Conversions API.

Im Browser prüfen

Ein Banner ist nur so gut wie das, was der Browser tatsächlich tut. Öffnen Sie die Website in einem privaten Fenster mit den Entwicklerwerkzeugen:

1. Vor der Entscheidung: Unter Speicher oder Anwendung gibt es keine Cookies, die mit _pk_ beginnen. Im Netzwerk gehen Anfragen an matomo.php, aber keine an Facebook, Google oder andere Werbenetzwerke.
2. Nach Annehmen: Die Cookies _pk_id und _pk_ses und mtm_cookie_consent erscheinen, die Werbe-Skripte laden.
3. Nach Ablehnen oder Widerruf: Die Matomo-Cookies sind weg, Matomo misst weiter cookielos, Werbe-Skripte laden nicht.

Ob Ihre Website schon vor der Entscheidung Daten an Dritte schickt, zeigt auch der kostenlose Website-Check.

Quellen

Stand: 13. November 2026, CookieConsent 3.3, Matomo 5.14 und 6.0.0-rc1

• CookieConsent: Dokumentation
• CookieConsent: Erste Schritte
• CookieConsent: Skripte verwalten
• CookieConsent: Callbacks und Ereignisse
• CookieConsent: Konfiguration
• GitHub: orestbida/cookieconsent
• Matomo Developer: Tracking mit Einwilligung
• Google: Consent Mode einrichten