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!

3 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é

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.