11. Mai 2018

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

Geschätzte Lesezeit: 2 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.

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 ganz einfach 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.

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://cdn.rawgit.com/AquaGenLive/cookieconsent/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']);
                    }
                    if (type == 'opt-in' && !didConsent) {
                        // disable cookies
                        console.log('onInitialise out - begin' );
                        console.log(type );
                        console.log(didConsent);
                        console.log('onInitialise out - end' );
                    }
                },
 
                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']);
                    }
                    if (type == 'opt-in' && !didConsent) {
                        // disable cookies
                        console.log('onStatusChange out - begin' );
                        console.log(type );
                        console.log(didConsent);
                        console.log('onStatusChange out - end' );
                    }
                }
 
            })
        });
    </script>
)

Die Zeilen mit console.log dienen nur zum besseren Verständnis dessen, was beim Klick auf „ok“ oder „ablehnen“ passiert.
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.
Achtung: Matomo-URL und -ID anpassen!

page.footerData{
    999 = TEXT
    999.value(
        <!-- Matomo -->
        <script type="text/javascript">
          var _paq = _paq || [];
          /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
          _paq.push(['requireConsent']);
          _paq.push(['trackPageView']);
          _paq.push(['enableLinkTracking']);
          (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);
          })();
        </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.

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:
  • https://wwagner net/typo3/opt-in-loesung-typo3-matomo/
  • matomo opt in
  • matomo opt-in cookie

Carsten Hager

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

Kommentare (4) 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

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.