11. Mai 2018

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

Geschätzte Lesezeit: 3 Minuten

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.

Artikel wurde gefunden mit den Suchbegriffen:
  • matomo opt in
  • cdn cookieconsentcdn com/ajax/libs/cookieconsent2/3 0 3/cookieconsent min css
  • https://yandex ru/clck/jsredir?from=yandex ru;search;web;;&text=&etext=1826 ILsnDzEpSvgHDfDjYcmPt138oQVGGW0POQVzJtWUroUpJqMz-3BIgXxcHkZeMC1o 85b2606e0fd66f3608d3613224fec6ac3a41573e&uuid=&state=_BLhILn4SxNIvvL0W45KSic66uCIg23qh8iRG98qeIXme
  • https://yandex ru/clck/jsredir?from=yandex ru;search;web;;&text=&etext=1830 kaRJ_Ytmq90MtZ1t4sRugSBfMsgOtISrUEZVhNBiEO7gxrOIj5AiRObHFcl7c40U f4825fadd485a0ac0b686fcf611b7680fec5ae6d&uuid=&state=_BLhILn4SxNIvvL0W45KSic66uCIg23qh8iRG98qeIXme
  • https://yandex ru/clck/jsredir?from=yandex ru;search;web;;&text=&etext=1837 YMbwHOSBSDZjdWn_-uuRgwRAkeGu16I6NkpPESLEFfhDRMMsRccrVD8GDCHXnkCf d615ecad252f445aa57609ffbb9a58117f8a7f6a&uuid=&state=_BLhILn4SxNIvvL0W45KSic66uCIg23qh8iRG98qeIXme

Carsten Hager

Carsten Hager ist Vater, Hobby-Webdeveloper und Musiker. Bei Twitter findet ihr ihn als @CarstenHager.

Kommentare (18) Schreibe einen Kommentar

  1. Sollte man nicht noch die beiden Einträge die auf das CDN (cloudflare und rawgit.com) auf die interne Seite holen?

    Antworten

    • Hallo Mario,

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

      Antworten

  2. 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.

    Antworten

  3. 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?

    Antworten

    • Hallo Tom,

      dieses Verhalten kann ich so nicht nachstellen. Hast du einen Link wo ich mir das anschauen kann?

      Antworten

      • 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…

        Antworten

    • 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

      Antworten

      • 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

        Antworten

  4. 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.

    Antworten

    • 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

      Antworten

  5. 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!

    Antworten

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.