Tracking Opt-Out und Status ohne iFrame und Cookies

Code

Wie du Cookies und iframes in Tracking Tools wie Matomo oder GA verhindern kannst.

Jon Uhlmann

9. April 2021

Matamo ist super wenn du deine Tracking Data selber hosten willst, aber die iframe Integration hat Schwächen wenn du deinen eigenen Stil einbringen willst. Seitenränder, Schriftart, der Style der Checkbox um nur ein paar Sachen zu nennen. Dieses kleine Beispiel hilft dir, das iframe loszuwerden. Du kannst natürlich auch das AjaxOptOut Plugin verwenden, aber diese hier gezeigte Lösung benötigt kein Plugin in deiner Matamo installation.

Beispiel

Zum CodePen

Features

Kein iframe
Keine Cookies (Wir benutzen stattdessen den HTML5 Web Storage)
Falls Javascript deaktivert ist, wird eine Fallback Nachricht angezeigt
Nachricht für alte Browser, welche HTML5 Web Storage nicht unterstützen
Überprüft, ob beim Browser Do Not Track gesetzt ist
Unterstützt mehrer Sprachen auf einer Seite
Du kannst das für irgendeine Trackinglösung benutzen (z.B. Google Tag Manager, Google Analytics, Matamo, etc.)

Das HTML für die OptOut Checkbox

Füge diesen HTML Code auf die Seiten ein, wo du die Opt-Out Checkbox darstellen willst, z.B. auf der Datenschutzerklärung. Wenn gewünscht (mehrere Sprachversionen), kann dieses HTML auch mehrmals auf einer Seite inkludiert werden.

tracking-status.html

<div class="tracking-optout">
    <label class="tracking-optout__label" style="display:none">
        <input type="checkbox" class="tracking-optout__input">
        <span class="tracking-optout__status tracking-optout__status--active" style="display:none">
            Ihr Besuch dieser Webseite wird aktuell anonym von der Webanalyse erfasst. Klicken Sie hier, damit Ihr Besuch nicht mehr erfasst wird.
        </span>
        <span class="tracking-optout__status tracking-optout__status--inactive" style="display:none">
            Ihr Besuch dieser Webseite wird aktuell von der Webanalyse nicht erfasst. Klicken Sie hier, um Ihren Besuch wieder erfassen zu lassen und helfen Sie uns hiermit unsere Seite zu verbessern.
        </span>
    </label>
    <span class="tracking-optout__dnt" style="display:none">
        Das Tracking ist bei Ihnen derzeit nicht aktiv, denn Ihr Browser hat uns mitgeteilt, dass Sie kein Tracking wünschen. Hierbei handelt es sich um eine Browsereinstellung. Um das Tracking wieder zu aktivieren, müssen Sie die sogenannte „Do Not Track“-Einstellung in Ihren Browsereinstellungen deaktivieren.
    </span>
    <span class="tracking-optout__oldie" style="display:none">
        Ihr Browser scheint zu alt zu sein, um diese Einstellung zu unterstützen. Bitte bringen Sie Ihren Browser auf den neuesten Stand für mehr Kontrolle über Ihre Daten. <a rel="nofollow noopener" target="_blank" href="https://bestvpn.org/outdatedbrowser/de">Den Browser jetzt aktualisieren</a>
    </span>
    <noscript>
        Es scheint, dass Sie Javascript in Ihrem Browser deaktiviert haben. Diese Funktion ist nur mit eingeschaltetem Javascript verfügbar. Wenn Sie nicht möchten, dass Ihre Daten gesammelt werden, können Sie in Ihrem Browser trotzdem „Do Not Track“ einschalten. Dies ist eine allgemeine Einstellung und wird von unserer Tracking-Installation respektiert.
    </noscript>
</div>

Optionen

Beim Aufruf von trackingOptout(OPTIONS) kannst du folgende Optionen setzen:

doNotTrackRespected

Stelle hier ein, ob die DoNotTrack-Option des Browsers respektieren werden soll. Standardmässig auf true gesetzt.

storageKey

Lege den Namen des Keys fest, auf dem der aktuelle Status gespeichert wird. Standardmässig auf 'trackingEnabled' gesetzt.

enabledPerDefault

Setze diesen Wert auf `true`, wenn du das Tracking per default aktivieren möchtest. Standardmässig auf true gesetzt.

API

Wenn duie den Wert dynamisch setzen willst (z. B. über eine Schaltfläche in einem Cookie-Dialog), stehen dir die folgenden Befehle zur Verfügung:

trackingOptout.doNotTrack

true falls "Do not track" in den Browsereinstellungen gesetzt ist.

trackingOptout.enabled

true wenn das Tracking aktiviert ist.

trackingOptout.toggle()

Schaltet das Tracking-Verhalten um.

trackingOptout.set(true)

Tracking aktivieren

trackingOptout.set(false)

Tracking deaktivieren

Wenn doNotTrackRespected in den OPTIONS auf true gesetzt ist, haben die Funktionen toggle und set keine Wirkung.

Wie du es benutzen kannst

Binde das Javascript in jede Seite ein und bette deinen Javascript-Tracking-Code in diese Bedingung ein:

src/tracking-code.js

if (trackingOptout.enabled) {
    // Your Tracking code
}

Zum Beispiel für Matomo:

src/tracking-code-matomo.js

if (trackingOptout.enabled) {
    const _paq = _paq || [];
    _paq.push(['disableCookies']);
        ...
    })();
}

oder Google Analytics:

src/tracking-code-google-analytics.js

if (trackingOptout.enabled) {
    const key = 'ga:clientId';
    ga('create', 'UA-XXXXX-Y', {
        'storage': 'none',
        'clientId': localStorage.getItem(key)
    });
    ga(function(tracker) {
        localStorage.setItem(key, tracker.get('clientId'));
    });
    ga('send', 'pageview');
}

Hier kannst du mehr über die Deaktivierung von Cookies lesen

Anmerkung

Im Gegensatz zu Cookies ist localStorage an die same-origin policy gebunden. Wenn sich Teile deiner Seite auf verschiedenen Subdomains befinden oder wenn einige Seiten http und andere Seiten https verwenden, kannst du localStorage nicht verwenden, um die Benutzeraktivität zwischen diesen Seiten zu messen. Aus diesem Grund sind Cookies weiterhin die offiziell empfohlene Methode zum Speichern der Client-ID.