Opt-In Lösung für TYPO3 mit Matomo und Cookieconsent

|

Dieser Gastartikel von Carsten Hager zeigt eine Möglichkeit auf, mittels des Skriptes cookieconsent ein Opt-In für das Tracking über Matomo umzusetzen.

Dieser Beitrag wurde am 06.06.18 überarbeitet!

In den Kommentaren wurde ich darauf aufmerksam gemacht, dass in meinem Beispiel schon Matomo/Piwik Cookies gesetzt werden, bevor der Nutzer überhaupt einen Button gedrückt hat. Um dies zu verhindern muss mein Code etwas umgestellt werden. Wir verschieben dazu einen Teil des Matomo/Piwik Codes in das JS vom Cookie Consent.

Warum brauche ich eine Opt-In Lösung für Matomo/Piwik?

Die Konferenz der deutschen Datenschutzbehörden hat vor kurzem ein Positionspapier veröffentlicht.
Darin fand ich folgenden Ausschnitt:

„Es bedarf jedenfalls einer vorherigen Einwilligung beim Einsatz von Tracking- Mechanismen, die das Verhalten von betroffenen Personen im Internet nachvollziehbar machen und bei der Erstellung von Nutzerprofilen. Das bedeutet, dass eine informierte Einwilligung im Sinne der DSGVO, in Form einer Erklärung oder sonstigen eindeutig bestätigenden Handlung vor der Datenverarbeitung eingeholt werden muss, das heißt zum Beispiel bevor Cookies platziert werden bzw. auf dem Endgerät des Nutzers gespeicherte Informationen gesammelt werden.“

Bei meiner Google-Suche, habe ich viele verschiedene Meinungen zu diesem Thema gefunden, dass ich hier lieber auf Nummer sicher gehen möchte.
Daher habe ich versucht, eine einfache Lösung für dieses Thema zu entwerfen.

Die Anleitung bezieht sich auf Matomo ab Version 3.5.0.

1. Ggf. muss Matomo auf Version 3.5.x aktualisiert werden

2. cookieconsent-Skript einbinden

Das Skript kann in TYPO3 per page.headerData eingebunden werden.
Allerdings gibt es zur Zeit in der aktuellen Version noch einen Bug bezüglich des Opt-Ins. Der Fehler ist gemeldet und es gibt auch schon einen Fix dafür, dieser ist aber noch nicht in die aktuelle Version integriert. Wir verwenden deshalb hier die Version mit dem Bugfix.
Wer die Dateien lieber von seinem eigenen Server laden möchte, kann diese natürlich vorher herunterladen und muss dann nur den Pfad entsprechend anpassen.

In das TypoScript-Setup:

page.headerData.12345 = TEXT
page.headerData.12345.value (
 
    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.6/cookieconsent.min.css" />
    <script src="https://github.com/AquaGenLive/cookieconsent/blob/10cff8415ba648c4d0975726eb5fa032186c6732/src/cookieconsent.js"></script>
 
    <script>
 
        window.addEventListener("load", function(){
            window.cookieconsent.initialise({
                "palette": {
                    "popup": {
                        "background": "#edeff5",
                        "text": "#838391"
                    },
                    "button": {
                        "background": "#4b81e8"
                    }
                },
                "theme": "edgeless",
                "type": "opt-in",
                "content": {
                    "message": "Diese Webseite verwendet Cookies und Matomo/Piwik, um die Bedienfreundlichkeit zu erhöhen.",
                    "dismiss": "Ablehnen",
                    "allow": "OK",
                    "link": "Weitere Informationen",
                    "href": "/datenschutz"
                },
                onInitialise: function (status) {
                    var type = this.options.type;
                    var didConsent = this.hasConsented();
                    if (type == 'opt-in' && didConsent) {
                        // enable cookies
                        console.log('onInitialise in - begin' );
                        console.log(type );
                        console.log(didConsent);
                        console.log('onInitialise in - end' );
                        _paq.push(['rememberConsentGiven']);
                        // Dieser Teil kommt aus dem Matomo/Piwik Code
                        (function() {
                          var u="//DEINEDOMAIN.de/";
                         _paq.push(['setTrackerUrl', u+'js/']);
                         _paq.push(['setSiteId', '1']);
                         var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
                         g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'js/'; s.parentNode.insertBefore(g,s);
                       })();
                    }
                    if (type == 'opt-in' && !didConsent) {
                        // disable cookies
                        console.log('onInitialise out - begin' );
                        console.log(type );
                        console.log(didConsent);
                        console.log('onInitialise out - end' );
                        _paq.push(['forgetConsentGiven']);
                    }
                },
                onStatusChange: function(status, chosenBefore) {
                    var type = this.options.type;
                    var didConsent = this.hasConsented();
                    if (type == 'opt-in' && didConsent) {
                        // enable cookies
                        console.log('onStatusChange in - begin' );
                        console.log(type );
                        console.log(didConsent);
                        console.log('onStatusChange in - end' );
                        _paq.push(['rememberConsentGiven']);
                        // Dieser Teil kommt aus dem Matomo/Piwik Code
                        (function() {
                          var u="//DEINEDOMAIN.de/";
                         _paq.push(['setTrackerUrl', u+'js/']);
                         _paq.push(['setSiteId', '1']);
                         var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
                         g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'js/'; s.parentNode.insertBefore(g,s);
                       })();
                    }
                    if (type == 'opt-in' && !didConsent) {
                        // disable cookies
                        console.log('onStatusChange out - begin' );
                        console.log(type );
                        console.log(didConsent);
                        console.log('onStatusChange out - end' );
                        _paq.push(['forgetConsentGiven']);
                    }
                }
            })
        });
 
 
)
</script>

Die Zeilen mit console.log dienen nur zum besseren Verständnis dessen, was beim Klick auf „ok“ oder „ablehnen“ passiert und sollten später entfernt werden!
Die Zeile

_paq.push(['rememberConsentGiven']);

überschreibt dann sozusagen

_paq.push(['requireConsent']);

in Schritt 3.

3. Matomo einbinden

Matomo über das TypoScript-Setup einbinden. Die Zeile „requireConsent“ muss vor „trackPageView“ eingebunden werden.
Einen Teil des originalen Matomo/Piwik Codes wurde in das JS von Cookie Consent verschoben!!
Achtung: Matomo-URL und -ID anpassen!

page.footerData{
 
    999 = TEXT
    999.value(
        <!-- Matomo -->
        <script type="text/javascript">
 
            var _paq = _paq || [];
            _paq.push(['requireConsent']);
            _paq.push(['trackPageView']);
            _paq.push(['enableLinkTracking']);
 
        </script>
        <!-- End Matomo Code -->
    )
}

Wie funktioniert das ganze?

Durch die Zeile

_paq.push(['requireConsent']);

beim Matomo Code werden beim Aufruf der Homepage erstmal keine Daten an Matomo weitergeben.
Erst wenn man bei Cookieconsent auf „OK“ klickt, wird durch

_paq.push(['rememberConsentGiven']);

diese Einstellung überschrieben und der „restliche“ Matomo/Piwik-Code ausgeführt.

Erklärung – onStatusChange: function
– Wenn ein Button geklickt wird geht er in diese Funktion

Erklärung – onInitialise: function
– Wenn schon ein Button geklickt wurde (wird in ein Cookie gespeichert), geht er in diese Funktion

Wenn man parallel die Entwickler-Console des Browsers öffnet, sieht man, was bei einem Klick passiert.

18 Gedanken zu “Opt-In Lösung für TYPO3 mit Matomo und Cookieconsent

    • Hallo Mario,

      selbstverständlich kann man das lokal einbinden. Das bleibt jedem selbst überlassen wie er es machen kann.

  1. Ich glaube hier fehlt noch die Berücksichtigung des Status.
    didConsent ist nämlich true bei beiden Buttons (Ablehnen und OK).
    Es muss nach status = dismiss und status = allow unterschieden werden.

  2. Der code setzt einen Cookie mit dismiss, wenn ich Cookies im Popup ablehne. Trotzdem setzt Matomo anschliessend ebenfalls 2 Cookies. Irgendwas stimmt da noch nicht?

      • Hallo Carsten,

        das ist die Seite, auf der ich es ausprobiere: http://t1p.de/xzm8

        Evtl. ist requireConsent im Trackingcode richtig. Auf der Matomoseite steht, dass trotz requireConsent cookies gesetzt werden. Mit disableCookies im Trackingcode würden gar keine gesetzt, dann braucht es aber auch keinen opt-in mehr…

    • Hallo Tom,

      du hast Recht mit den Cookies.
      Ich hab das gerade lösen können. Ich werde in den nächsten Tagen den Beitrag oben überarbeiten.

      Gruß Carsten

      • Hallo Carsten,

        vielen Dank fürs Überarbeiten. Ich konnte es jetzt erfolgreich testen. In Deinem überarbeiteten Artikel wurden die Script-Tags und JS/CSS Sourcen aus dem Quelltext gefiltert.

        Gruß,
        Tom

  3. Die cookieconsent-Lösung von insites, die hier benutzt wird, funktioniert im Mobilbereich gar nicht gut. Es kommt sowohl bei Android als auch bei IOs zu Fehldarstellungen. Auch im Opera-Browser ist die Darstellung nicht einwandfrei.

    Bezogen auf Matomo/Piwik muss ich sagen: Ich verstehe nicht, wieso trotz Ablehnung der Cookies weiter Cookies von Piwik/Matomo gesetzt werden. Das ist auch nicht so wie es sein soll.

    • Hallo Stefan,

      ich habe den Beitrag eben überarbeitet. Nun sollten keine Cookies mehr gesetzt werden.

      Kannst du etwas näher beschreiben, welche Fehldarstellung du meinst? Gerne auch als Nachricht über Slack Twitter ect.
      Gruß Carsten

  4. Hallo Wolfgang,

    vielen Dank für das großartige Script! Wir verwenden das nun auf allen Webseiten. Mir ist gerade nur aufgefallen, dass wenn man auf der Datenschutzseite den Opt-Out iframe von Matomo zur Verfügung stellt, dann ergibt das einen kleinen Konflikt. Denn wenn ich im Cookie Consent Window auf „OK“ geklickt habe und später aber auf der Datenschutzseite den Opt-Out nutzen möchte, dann funktioniert dieser nicht und er trackt trotzdem weiter Daten und löscht das gesetzte Piwik ignore cookie wieder. Hast du hierfür noch eine Lösung? Auf den zusätzlichen Opt-Out im Datenschutz sollte man ja nicht verzichten, denn das Cookie Consent Window ist ja irgendwann auch ganz weg.

    Vielen Dank für deine Hilfe!

Schreibe einen Kommentar

TYPO3 9 LTS Videotraining

Das Videotraining zu TYPO3 9 LTS

Momentan in Vorbereitung

Klicke hier für weitere Infos zum neuen Videotraining!

close-link
In Vorbereitung: Das Videotraining zu TYPO3 9 LTS
Hier klicken für mehr Informationen!
close-image

YouTube aktivieren?

Auf dieser Seite gibt es mind. ein YouTube Video. Cookies für diese Website wurden abgelehnt. Dadurch können keine YouTube Videos mehr angezeigt werden, weil YouTube ohne Cookies und Tracking Mechanismen nicht funktioniert. Willst du YouTube dennoch freischalten?