MATOMO-Tracking-Cookie Opt-IN

Cookie-Opt-IN Matomo

Hmmm… Matomo-Kekse (Alle verwendeten Logos und Markenzeichen sind Eigentum ihrer eingetragenen Besitzer)

In diesem Artikel beschreibe ich, wie man das Javascript Cookie Consent by Osana (vormals Insites) dazu nutzen kann, um die MATOMO-Webanalyse (vormals PIWIK) erst nach expliziter Zustimmung zu laden. Dadurch wird der zugehörige Tracking-Cookie erst dann gesetzt, wenn der Nutzer damit einverstanden ist – was aus meiner Sicht nicht nur rechtlich sondern auch menschlich der richtige Weg ist.

1. Vorbereitungen

1.1 Site-ID aus MATOMO / Piwik heraus suchen

Damit wir MATOMO / Piwik sagen können, für welche Site Besuche aufgezeichnet werden sollen, brauchen wir die Site-ID. Hat man nur eine Site in MATOMO angelegt, so ist das für gewöhnlich die 1. Wer sich nicht sicher ist, loggt sich in MATOMO ein, ruft das Dashboard über das Menü auf und schaut dann oben in der Adresszeile des Browser nach. Irgendwo steht dann sowas wie idSite=1 – was bedeuten würde, dass die Site-ID die 1 ist. Bei idSite=42 wäre die Site-ID entsprechend 42.
Im unten aufgeführten Beispielcode werde ich die Site-ID 1 verwenden, welche vermutlich in vielen Fällen die richtige ist.

1.2 Cookie Consent by Osana einbinden

Nun muss das Javascript sowie das Stylesheet für das Layout des Cookie-Banners in die eigene Site eingebunden werden. Hierbei rate ich ausdrücklich davon ab, das Code-Beispiel von der Osano-Website zu verwenden, da dort JS- und CSS-Dateien von cdn.jsdelivr.net nachgeladen werden und man sich somit gleich ein neues Datenschutzproblem ins Haus holt. Stattdessen sollten die beiden Dateien im Code-Beispiel (cookieconsent.min.js & cookieconsent.min.css) heruntergeladen und auf der eigenen Site bereitgestellt werden – die MIT-Lizenz der Cookie-Consent-Lösung macht das möglich.

Wie man JS- und CSS-Dateien in die eigene Site einbindet, werde ich hier nicht näher erklären – ich gehe mal davon aus, dass die Leser dieses Artikels nicht ohne Grund hier gelandet sind und wissen wie man das macht. Falls nicht, schreibt gern einen Kommentar unter diesen Artikel.

2. Der JS-Code für den Opt-In

Da moderne Webprojekte heute kaum noch ohne Javascript auskommen, gibt es sicher bereits eine entsprechende .js-Datei zur Steuerung von fancy Sachen. Nennen wir sie hier mal beispielhaft main.js. In dieser Datei wird Folgendes ergänzt (getestet mit der zum Zeitpunkt dieses Artikels aktuellen Version von MATOMO und Cookie Consent by Osano):

// MATOMO vars and functions
// Source: https://matomo.org/blog/2017/04/different-ways-embedding-piwik-tracking-code-faster-website-performance/
var _paq = _paq || [];
_paq.push(['setVisitorCookieTimeout', 2880]); // 2 days
_paq.push(['setReferralCookieTimeout', 2880]); // 2 days
_paq.push(['setSessionCookieTimeout', 0]); // session only
_paq.push(["trackPageView"]);
_paq.push(["enableLinkTracking"]);

function embedTrackingCode() {
   var u="//analytics.example.com/";
   _paq.push(["setTrackerUrl", u+"piwik.php"]);
   _paq.push(["setSiteId", "1"]);
   _paq.push(['enableHeartBeatTimer', 30]);

   var d=document, g=d.createElement("script"), s=d.getElementsByTagName("script")[0]; g.type="text/javascript";
   g.defer=true; g.async=true; g.src=u+"piwik.js"; s.parentNode.insertBefore(g,s);
   
   console.log('MATOMO Tracking enabled')
}

function deleteMatomoCookies(){
    _paq.push(["disableCookies"]);
    _paq.push(["deleteCookies"]);
    location.reload();

    console.log('MATOMO Tracking disabled')
}


// Insites Cookie Consent with Opt-IN for MATOMO tracking Cookie
// Source: https://cookieconsent.osano.com/documentation/disabling-cookies/
window.addEventListener("load", function () {
    window.cookieconsent.initialise({
        "palette": {
            "popup": {
                "background": "#000"
            },
            "button": {
                "background": "#fbb600"
            }
        },
        "cookie": { 
            "expiryDays": 1 
         },
        "type": "opt-in",
        "content": {
            "message": "Wir verwenden Tracking-Cookies, um unsere Website stetig zu verbessern sowie für anonymisierte Nutzungsstatistiken.",
            "allow": "Einverstanden",
            "deny": "Ablehnen",
            "link": "Mehr erfahren",
            "href": "/datenschutz",
            "policy": 'Cookie Einstellungen'
        },
        onPopupOpen: function () {
            document.body.classList.add("cookieconsent-banner-opened");
        },
        onPopupClose: function () {
            document.body.classList.remove("cookieconsent-banner-opened");
        },
        onInitialise: function (status) {
            var type = this.options.type;
            var didConsent = this.hasConsented();
            if (type == 'opt-in' && didConsent) {
                // enable cookies
                embedTrackingCode();
            }
            if (type == 'opt-out' && !didConsent) {
                // disable cookies
            }
        },
        onStatusChange: function (status, chosenBefore) {
            var type = this.options.type;
            var didConsent = this.hasConsented();
            if (type == 'opt-in' && didConsent) {
                // enable cookies
                embedTrackingCode();
            }
            if (type == 'opt-in' && !didConsent) {
                // disable cookies
                deleteMatomoCookies();
            }
            if (type == 'opt-out' && !didConsent) {
                // disable cookies
                deleteMatomoCookies();
            }
        },
        onRevokeChoice: function () {
            var type = this.options.type;
            if (type == 'opt-in') {
                // disable cookies
            }
            if (type == 'opt-out') {
                // enable cookies
                embedTrackingCode();
            }
        },

    })
});


// function for triggering a click on the cc-revoke button
// wich will show the consent banner again.
// You may use it in a link, such as this example:
// <a href="#" onclick="openCCbanner(); return false;">Cookie Consent</a>
function openCCbanner(){
    var el = document.querySelector('.cc-revoke');
    el.click();
}

2.1 Erläuterungen

In Zeile 4–6 setzten wir die Lebensdauer der MATOMO-Cookies – kürzere Werte sind besser für den Datenschutz. In Zeile 7 sagen wir MATOMO/Piwik, was getrackt werden soll (hier der PageView, also der Seitenaufruf) und aktivieren in Zeile 8 das Link-Tracking (Erfassen von Klicks auf externe Links).

In Zeile 10–20 wird die Funktion deklariert, die aufgerufen wird wenn der Nutzer das Tracking akzeptiert – dort muss in Zeile 11 die URL der MATOMO-Installation eingetragen werden (hier //analytics.example.com/ als Beispiel) und in Zeile 13 legen wir die Site-ID fest (siehe Punkt 1.1).

Zeile 14 ist optional und aktiviert den „Heartbeat Timer“ um die Verweildauer eines Besuchers auf einer einzelnen Seite zu messen – im Code habe ich den auf 30 Sekunden gesetzt.

Das console.log('MATOMO Tracking enabled') in Zeile 19 sollte im Live-Betrieb natürlich auch auskommentiert oder gelöscht werden, hilft aber beim initialen Einrichten und Testen.

In Zeile 22–28 wird die Funktion deklariert, die aufgrufen wird wenn der Nutzer seine Zustimmung zurückzieht. Diese gibt MATOMO das Kommando die gesetzten Cookies zu löschen und lädt dann die Seite neu (ohne Tracking und ohne Cookies). Auch dort kann das console.log('MATOMO Tracking disabled')in Zeile 27 natürlich raus wenn alles läuft.

Ab Zeile 33 geht es dann mit dem eigentlichen Code des Cookie Consent Skriptes von Osano weiter. Dort können die Farben und Texte angepasst werden und auch die Lebensdauer des Cookie-Consent-Cookies festgelegt werden (weniger lang ist mehr gut!). Außerdem wird in Zeile 52 die URL zur Datenschutzerklärung festgelegt – im Beispiel /datenschutz. Weitere Informationen zur Konfiguration des Cookie-Banners findet ihr in der offiziellen Dokumentation.

3. Testen

Das wars auch schon – nun sollte beim Aufruf einer Seite der Website das Banner am unteren Rand erscheinen und zwei Schaltflächen das Akzeptieren und Ablehnen des Trackings ermöglichen.

Um zu prüfen, ob auch tatsächlich nur der Request an MATOMO rausgeht (und der Cookie gesetzt wird) nachdem der Nutzer zugestimmt hat, bietet es sich an die Developer-Tools des Browsers zu nutzen. Dort kann auch geprüft werden, ob der / die Tracking-Cookie(s) bei nachträglicher Ablehnung auch wieder korrekt gelöscht werden: Via CMD+ALT+I (MacOS) bzw. F12 (Windows) kann man in Chrome, Firefox, Edge, Safari (und vielen anderen) Entwicklerwerkzeuge aufrufen – dort gibt es dann meist einen Tab „Network“ bzw. „Netzwerk-Analyse“ (o.ä.) und „Application“ (o.ä.) bzw. „Web-Speicher“. Im Tab Network sieht man die vom Browser ausgehenden HTTP-Requests und in „Application“ bzw. „Web-Speicher“ unter anderem die abgelegten Cookies.

4. Bonus

4.1 Cookie-Banner per Link an beliebiger Stelle erneut öffnen

Nach dem Akzeptieren oder Ablehnen im Cookie Consent Banner zeigt die Lösung von Osano unten links ein kleines Slideout (fährt beim Mouseover aus), welches nach dem Anklicken das Banner erneut anzeigt und der Nutzer so eine Auswahl ändern kann. Wenn man das Banner aber auch über einen zusätzlichen Link erneut öffnen lassen möchte (z.B. in der Datenschutzerklärung oder über einen Link im Footer, neben Impressum, Datenschutz und den den ganzen Kram) dann kann man dafür folgende Link-Syntax nutzen:

<a href="" onclick="openCCbanner(); return false;">Cookie-Einstellungen</a>

Nach dem Klick auf einen solchen Link, wird die Javascript-Funktion openCCbanner() aufgerufen, welche im obigen Code-Schnipsel bereits enthalten ist. Diese simuliert einen Klick auf das Slideout und sorgt somit für das erneute Einblenden das Banners. Das Slideout selber kann man per CSS verbergen, wenn man es nicht nutzen möchte. (Falls es eine dokumentierte Funktion in der API des Cookie Consent Skriptes gibt, die das Banner erneut einblendet, lasst es mich wissen – ich konnte da aktuell nichts finden und nutze daher diesen durch JS getriggerten Klick)

4.2 Verdecken der Fußzeile mit Links zu Impressum & Datenschutzerklärung verhindern

Wie der javascript-affine Leser vielleicht bemerkt hat, macht der oben dargestellte JS-Code auch noch etwas Anderes: Er fügt bei geöffnetem (sichtbarem) Cookie-Banner dem body-Element die CSS-Klasse cookieconsent-banner-opened hinzu und entfernt diese auch wieder wenn das Banner ausgeblendet wird. Diese Klasse kann z.B. genutzt werden, um der Fußzeile der Website bei geöffnetem Cookie-Banner deutlich mehr padding-bottom zu geben, um somit das Verdecken wichtiger Links zu verhindern:

.cookieconsent-banner-opened footer{
 padding-bottom: 8em;
}

Mögliche Verbesserungen

Das Code-Fragement enthält aktuell noch ungenutzte IF-Zweige, welche ich aber absichtlich drin gelassen habe, damit Jeder das nach Bedarf anpassen kann. Außerdem kann Version 4.0 des Cookie Consents von Osano auch anders initialisiert werden. Das oben abgebildete Code-Fragement hatte ich für Version 3.x geschrieben, es funktioniert aber auch tadellos mit Version 4.0 (und vermutlich allen 4.x-Versionen).

Gibt’s das auch für Google Analytics?

Jo, hier drüben: Google-Analytics-Tracing-Cookie Opt-IN

Das Skript ist nach besten Wissen getestet und erfüllt in meinem Szenario die gewünschten Anforderungen. Dennoch erfolgt die Nutzung des auf eigene Gefahr!

20 Kommentare Schreibe einen Kommentar

    • Hallo Hans,

      das stimmt – ist mir nach dem Update auf die letzte Matomo-Version auch aufgefallen. Habe das Problem daraufhin auf GitHub gemeldet und einer der Entwickler konnte das nachvollziehen und hat eine Behebung in der kommenden Version in Aussicht gestellt.

      Allerdings ist der testcookie, der jetzt fälschlicherweise nicht korrekt gelöscht wird, kein Tracking-Cookie sondern dient Matomo nur dem Test, ob der Browser Cookies akzeptiert. Damit sind also keine nutzerbezogenen Daten verknüpft und es handelt sich daher meiner Meinung (!) nach um einen s.g. technisch notwendigen Cookie für den man soweit ich weiß keinen Opt-IN benötigt.

      Von daher ist dieser Fehler in Matomo aktuell sicher rechtlich unkritisch (aus meiner Nicht-Juristen-Sicht) – aber natürlich wäre es schöner und sauberer, wenn auch der testcookie korrekt gelöscht werden würde.

      Aber ich bin zuversichtlich, dass wir das in der kommenden Version behoben sehen.

      Beste Grüße
      André

  1. Hallo Hans,

    auch ich war auf der Suche nach genau einer solchen Anleitung. Vielen Dank für Deine wertvolle Arbeit!
    Du schreibst oben: „Stattdessen sollten die beiden Dateien im Code-Beispiel (cookieconsent.min.js & cookieconsent.min.css) heruntergeladen und auf der eigenen Site bereitgestellt werden…“. Wo finde ich denn diese beiden Dateien?
    Sind die auf der Osano-Homepage? Habe dort nur die Schnipsel gefunden, die ich nicht nehmen soll. Vielleicht kannst Du mir hier noch mal helfen…
    Vielen Dank!

    • Hallo,

      in den Code-Schnipseln von Osano findest Du die URL zu den benötigten Dateien (irgendwas mit cdn.jsdlivr.net). Die URLs kopierst Du in einen neuen Browser-Tab – damit werden die Dateien geladen und angezeigt – und speicherst diese dann via STRG+S (CMD+S) auf Deiner Platte. Anschließend kannst Du die Dateien dann in Dein Webprojekt kopieren und somit ohne den bedenklichen Umweg über jsdelivr.net direkt einbinden.

      Beste Grüße
      André

      PS: Wer ist Hans ;-)

  2. hallo andré,

    danke für deine anleitung. ein freund von mir ist gestern abend zufällig auf den selben trichter gekommen, sodass ich die dateien schon einbinden konnte. weißt du zufällig, ob es diese beiden dateien auch irgendwo in nicht-minimierter form gibt, und wenn ja, wo? sie funktionieren natürlich, aber ich stehe nicht so auf komprimierte dateien…
    der hans war eine verwechselung mit einem anderem kommentar hier ;-)

  3. hallo andré,

    habe tatsächlich die unkomprimierten dateien gefunden und stattdessen genommen. die konnte ich auch besser bearbeiten…

    lieben dank noch mal für deine mühe,

    liebe grüße, grashalm

    • Hallo grashalm,

      habe das eben noch mal gecheckt: Bei jsdelivr.net ist die neueste Version die 3.1.1 – in der Dokumentation des Skriptes im Github-Repository ist allerdings von Version 4 die Rede. Das scheint allerdings ein Fehler zu sein, wie auch schon jemand in den Issues bemerkt hat.

      Keine Ahnung, ob da lediglich vergessen wurde, die Versionsnummer hoch zu zählen oder ob die Version 4 tatsächlich noch garnicht veröffentlicht ist … aber mit der 3.1.1 machst Du jedenfalls auch nichts verkehrt.

      Beste Grüße
      André

  4. hallo andré,

    vielen dank nochmal für deine recherche. mein englisch lässt nach, deshalb ist github für mich oft ein buch mit 7 siegeln. danke, dass du nachgesehen hast.
    gut, dann weiß ich jedenfalls bescheid und muss auch nichts mehr ändern.

    abschließend möchte ich dich einladen, mal auf meiner seite vorbeizuschauen,
    wenn du was für texte oder andere künste übrig hast: die-schreibmaus.de. vielleicht lässt du dich da mal von der muse küssen, wenn du magst.

    liebe grüße,

    grashalm

  5. Hallo,

    danke für die Beschreibung, die ist wirklich super! Ich habe nur noch das Problem, dass auf mobilen Geräten die Cookie-Leiste nicht ganz klein verschwindet sondern immer das kleine Fenster, welches eigentlich nur beim Hovern erscheinen soll, angezeigt wird. Dadurch werden auf mobilen Geräten meine Links wie z.B. zum Impressum verdeckt. Kann man dies auch durch das Padding beheben? Und falls ja, wie?

    Danke und liebe Grüße
    Anna

    • Hallo Anna,

      vielen Dank für Deinen Kommentar und das damit verbundene Lob!

      Zu Deiner Frage: Wenn es um die Site geht, welche Du hier angegeben hattest, dann würde folgendes CSS das Problem lösen:

      .tg-site-footer .site-info{
      padding-bottom: 3em
      }

      Beste Grüße
      André

  6. Hallo André,

    ich habe deine anleitung nun auch angewendet. In der console sind mir dann aber mehrere meldungen aufgefallen, die den erfolg zunichte machen.

    1a. Firefox:
    Das Cookie “cookieconsent_status” wird in Zukunft bald abgelehnt werden, da es für das Attribut „sameSite“ entweder „none“ oder einen ungültigen Wert angibt, ohne das „secure“-Attribut zu verwenden. Weitere Informationen zum „sameSite“-Attribut finden Sie unter https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameSite

    1b. Chrome:
    diepraxx.app/:1 A cookie associated with a cross-site resource at http://diepraxxapp.tuuvasystems.com/ was set without the `SameSite` attribute. It has been blocked, as Chrome now only delivers cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032

    In der konsequenz wird nun bei chrome nur noch matomo disabled ausgegeben, auch wenn ich auf „Ok“ klicke.

    2. Firefox:
    Das Cookie “zenMode” wird bald als Cross-Site-Cookie gegen “http://matomo.derplaan.de/piwik.js” behandelt, da das Schema nicht übereinstimmt.

    Dazu kommt es in chrome natürlich gar nicht erst, weil „enabled“ blockiert wird.

    Wir mussten wegen dieser immer strenger werdenden prüfungen im browsern auch den datenbankzugang unserer app umbauen (same site origin problem).

    Hast du das problem auch schon bemerkt? Es betrifft ja wohl den osano code direkt, nicht deine brücke zu matomo, aber was kann man da jetzt machen?

    LG
    Thomas

    • Hallo Thomas,

      ja, das Problem ist mir neulich auch aufgefallen und das liegt – wie Du richtig schriebst – am Code von Osano. Hier muß Osano also reagieren und tatsächlich gibt es auch bereits einen entsprechenden Pull-Request eines Contributors im Github-Repo – der allerdings leider bis heute noch nicht integriert wurde.

      Wenn Du nicht warten möchtest, bis die das einbauen, könntest Du Dir auch den Code des Pull Requests anschauen und Dir selber eine neue Version bauen. Persönlich hoffe ich, das osano das in die „offizielle“ Version übernimmt aber tatsächlich sieht es aktuell nicht so aus, als würden die noch aktiv dran arbeiten: Die letzte Code-Änderung im Repository ist vier Monate her … :-(

      Beste Grüße
      André

  7. … was ja aber heißt, die arbeit war umsonst, weil chrome (und edge hinten dran) als der meistbenutzte browser das cookie komplett blockiert.

    Müsstest du das nicht eigentlich nun weiter oben prominent kommunizieren?

    • Also in Chrome Version 84.0.4147.135 (die laut Info im Browser derzeit die aktuelle Version ist), wird das Cookie weiterhin korrekt abgelegt und nich abgelehnt. Tatsächlich erhalte ich dort nicht mal eine Fehlermeldung in der Konsole (wohl aber im Firefox – der aber aktuell das Cookie ebenfalls noch korrekt ablegt). Welche Chrome-Version hast Du?

  8. Ha, du hast recht. Und ich habe sozusagen recht für mein setup. Die Ursache bei mir liegt in der iframe-weiterleitung meiner seite von einer adresse ohne webspace zu einer anderen, die aber in der browser adresszeile nicht sichtbar werden soll (te). Da macht chrome nicht mit hinsichtlich der cookies. Firefox gibt in beiden fällen nur den hinweis, dass sich bald etwas ändern wird. Wieder was gelernt.

Schreibe einen Kommentar

Personenbezogene Daten interessieren mich nicht – daher ist die Angabe von Name und E-Mail-Adresse freiwillig. Jedoch wird jeder Kommentar von mir geprüft, bevor er freigeschalten wird.