Google-Analytics-Tracking-Cookie Opt-IN

Cookie-Opt-IN Google Analytics

Hmmm… Analytics-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 Google-Analytics erst nach expliziter Zustimmung zu laden. Der Text baut auf meinem vorherigen Artikel zum MATOMO-Tracking-Cookie Opt-IN auf und ich werde an eingen Stellen auf diesen verweisen.

1. Vorbereitungen

1.1 Tracking-ID aus Google Analytics heraus suchen

Damit wir Analytics sagen können, für welche Site Besuche aufgezeichnet werden sollen, brauchen wir die Tracking-ID. Diese findet man nach dem Login in Google Analytics unter Verwaltung (Zahnrädchen-Symbol unten links) → Property-Einstellungen im Format UA-XXXXXXXX-X.

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 (cookieconsent.min.js & cookieconsent.min.css). Wie man dabei am besten vorgeht, ohne sich ein neues Datenschutzproblem einzutreten, habe ich im Artikel MATOMO-Tracking-Cookie Opt-IN unter Punkt 1.2 notiert.

2. Der JS-Code für den Opt-In

In der Javascript-Datei eures Webprojektes, nennen wir sie hier mal beispielhaft main.js, wird Folgendes ergänzt (getestet mit der zum Zeitpunkt dieses Artikels aktuellen Version des Cookie Consent by Osano):

// Google Analytics Function for embedding tracking code
// Google Analytics tracking ID
var $tracking_id = "UA-XXXXXXXX-X";

// Google Analytics Cookie Domain & Path (needed for clearing cookies – have look in the inspector to get the values needed)
var $tracking_cookie_domain = ".example.com";
var $tracking_cookie_path = "/";

function embedTrackingCode(){
    // add <script> to head
    var gascript = document.createElement("script");
    gascript.async = true;
    gascript.src = "https://www.googletagmanager.com/gtag/js?id="+$tracking_id;
    document.getElementsByTagName("head")[0].appendChild(gascript, document.getElementsByTagName("head")[0]); 

    // track pageview
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', $tracking_id, { 'anonymize_ip': true }); 
    
    console.log('Google Analytics Tracking enabled')
}

function deleteGACookies(){
    
    // because the gtag cookie uses the tracking id with "-" replaced though "_"
    // we have to do this string manipulation too
    var $gtag_cookie = "_gat_gtag_"+$tracking_id.replace(/-/g, "_");

    clearCookie('_ga',$tracking_cookie_domain,$tracking_cookie_path);
    clearCookie('_gid',$tracking_cookie_domain,$tracking_cookie_path);
    clearCookie('_gat',$tracking_cookie_domain,$tracking_cookie_path);
    clearCookie($gtag_cookie,$tracking_cookie_domain,$tracking_cookie_path);
    location.reload();

    console.log('Google Analytics Tracking disabled')
}


// Insites Cookie Consent with Opt-IN for MATOMO tracking Cookie
// Source: https://cookieconsent.insites.com/documentation/disabling-cookies/
window.addEventListener("load", function () {
    window.cookieconsent.initialise({
        "palette": {
            "popup": {
                "background": "#000"
            },
            "button": {
                "background": "#72c326",
                "text":"#fff"
            }
        },
        "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
                deleteGACookies();
            }
            if (type == 'opt-out' && !didConsent) {
                // disable cookies
                deleteGACookies();
            }
        },
        onRevokeChoice: function () {
            var type = this.options.type;
            if (type == 'opt-in') {
                // disable cookies
                
            }
            if (type == 'opt-out') {
                // enable cookies
                embedTrackingCode();
            }
        },

    })
});

// Function for deleting Cookies (such as that ones from Google Analytics)
// Source: https://blog.tcs.de/delete-clear-google-analytics-cookies-with-javascript/
function clearCookie(d,b,c){try{if(function(h){var e=document.cookie.split(";"),a="",f="",g="";for(i=0;i<e.length;i++){a=e[i].split("=");f=a[0].replace(/^\s+|\s+$/g,"");if(f==h){if(a.length>1)g=unescape(a[1].replace(/^\s+|\s+$/g,""));return g}}return null}(d)){b=b||document.domain;c=c||"/";document.cookie=d+"=; expires="+new Date+"; domain="+b+"; path="+c}}catch(j){}};


// 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();
}



// –  – OPTIONAL – -----------------
// Google Analytics Opt-Out Cookie
var $tracking_disable_cookie = 'ga-disable-' + $tracking_id;
if (document.cookie.indexOf($tracking_disable_cookie + '=true') > -1) {
window[$tracking_disable_cookie] = true;
}
function gaOptout() {
    document.cookie = $tracking_disable_cookie + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
    window[$tracking_disable_cookie] = true;
    alert("Der Opt-Out-Cookie für das Deaktivieren von Google Analytics wurde abgelegt.")
}

2.1 Erläuterungen

In Zeile 3 definieren wir die Tracking-ID, welche bei Punkt 1.1 (siehe oben) heraus gesucht wurde.

In Zeile 6-7 wird die Cookie-Domain definiert (wichtig für das spätere Löschen der Cookies) und der Cookie-Pfad. Die Cookie-Domain ist dabei der Hostname eurer Website, im Beispiel .example.com – wobei der Punkt am Anfang sicherstellt, dass auch  www.example.com eingeschlossen wird. Sofern sich die Website nicht in einem Unterordner befindet, ist der Cookie-Path für gewöhnlich einfach ein Slash (/).

In den Zeilen 9-23 wird die Funktion deklariert, die beim Akzeptieren von Cookies aufgerufen wird. Dort wird in Zeile 20 Google-Analytics so konfiguriert, dass die IP-Adresse anonymisiert wird – das ist wichtig für den datenschutzkonformen Einsatz des Tracking-Tools.

Das console.log('Google Analytics Tracking enabled') in Zeile 22 sollte im Live-Betrieb natürlich auskommentiert oder gelöscht werden, hilft aber beim initialen Einrichten und Testen.

In Zeile 25–38 wird die Funktion deklariert, die aufgrufen wird wenn der Nutzer seine Zustimmung zurückzieht. Diese löscht – mithilfe eine weiteren Funktion – alle von Google Analytics gesetzten Cookies (funktioniert nur wenn in Zeile 6 die Domain korrekt definiert wurde, siehe oben).

Das console.log('Google Analytics Tracking disabled) in Zeile 37 kann natürlich auch weg, wenn alles läuft.

Ab Zeile 43 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 (kürzer ist besser!). Außerdem wird in Zeile 63 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. Wie das geht, habe ich drüben im Artikel MATOMO-Tracking-Cookie Opt-IN unter Punkt 3 beschrieben.

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>

Mehr dazu ebenfalls drüben im Artikel MATOMO-Tracking-Cookie Opt-IN unter Punkt 4.1.

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;
}

4.3 Opt-Out-Cookie setzen

In den Zeilen 130–140 des oben gezeigten Codes gibt es noch eine Funktion namens gaOptout(), welche zum Setzen eines Opt-OUT-Cookies genutzt werden kann. Im Prinzip ist das durch den Opt-IN nicht mehr nötig aber ich habe es trotzdem mal im Code-Snippet belassen – wer will kann diese Funktion z.B. innerhalb von deleteGACookies() nutzen, um beim Ablehnen von Cookies auch zusätzlich noch den Opt-Out-Cookie zu setzen. Oder man kann in z.B. in der Datenschutzerklärung Folgendes zum Auslösen dieser Funktion ins HTML einfügen:

<div style="background-color:#fdeac0; padding: 1em; margin: 1em 0;"><strong>Sie können die Erfassung durch Google Analytics verhindern, indem Sie auf folgenden Link klicken. Es wird ein Opt-Out-Cookie gesetzt, das die zukünftige Erfassung Ihrer Daten beim Besuch dieser Website verhindert: <br>
<a href="" onclick="gaOptout(); return false;">Google Analytics deaktivieren</a></strong></div>

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 MATOMO Webanalyse?

Klar: MATOMO-Tracking-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!

7 Kommentare Schreibe einen Kommentar

  1. Hallo. Danke für das Tutorial, sehr hilfreich.
    Mir ist jedoch eines aufgefallen:

    Nachdem ich auf Einverstanden klicke, laden die Cookies, was auch so sein soll. Wenn ich jetzt jedoch auf Ablehnen klicke, bleiben die Cookies leider weiterhin. Ich sehe dass auf eurer Website so ein ähnlicher Banner verwendet wird, dort ist das Problem jedoch nicht vorhanden. Nachdem man bei euch auf Einverstanden klickt und in Folge dessen auf Ablehnen, werden die Cookies wie verlangt entfernt wieder entfernt.

    Habe einiges probiert um das Problem mit eurem bereits erstelltem Skript zu lösen, nur leider war ich erfolglos. Könntet ihr mal sehen ob vielleicht etwas am Skript aktualisiert werden muss? Sind immerhin ein paar Monate vergangen seitdem der Beitrag erstellt wurde. :)

    Danke nochmals,
    LG

    • Hallo,

      vielen Dank für das Lob!
      Was das geschilderte Problem angeht: Damit die Cookies sauber gelöscht bzw. inaktiviert werden, ist es wichtig dass $tracking_cookie_domain und $tracking_cookie_path im Script angepasst werden. Außerdem ist es im Falle von Google so, dass die Cookies nicht direkt gelöscht sondern nur geleert und mit einem zurückliegenden Ablaufdatum versehen werden. Im Firefox werden derart inaktivierte Cookies nicht mehr angezeigt – Chrome hingegen zeigt sie weiterhin an (allerdings leer und mit geänderten Ablaufdatum).

      Hier auf diesem Blog nutze ich Matomo – dort gibt es im Gegensatz zu Google Analytics eine Methode zum Löschen der Cookies. Im obigen Snippet für Google Analytics wird hingegen clearCookie() von tcs.de genutzt. In Kombination mit dem Nicht-mehr-laden des Google Analytics Javascript sind diese inaktivierten, leeren Cookies aber aus meiner Nicht-Juristen-Sicht datenschutztechnisch i.O..

      Beste Grüße
      André

  2. Hey,

    danke für dein Tutorial.

    ich denke die Fragen wird auch für andere Interessant sein, deswegen Frage ich einfach direkt mal hier. Wie kann ich dein Script denn erweitern das sowohl GA als auch MATOMO darin enthalten sind? Kann ich auch noch weitere Anbieter einfügen? Vielen Dank!

    • Hallo,

      für den (vermutlich oder hoffentlich recht seltenen) Fall, dass man MATOMO und Google Analytics gleichzeitig nutzen möchte, könnte man den Funktionen zum Aktivieren und Deaktivieren der Tracker eindeutige Namen geben und diese dann beim Erfüllen der entsprechenden Bedingungen jeweils beide aufrufen. In meinen Beispielen für MATOMOMATOMO und Google AnalyticsGoogle Analytics heißt die Funktion zum Aktivieren jeweils embedTrackingCode(), während die Funktionen zum Deaktivieren bereits unterschiedliche Namen haben (deleteMatomoCookies() bzw. deleteGACookies()) – da müsste man also zumindest die Aktivierungsfunktion embedTrackingCode() sinnvoll umbenennen (z.B. embedMatomoTracking() und embedGaTracking()).

      Bei weiteren Anbietern würde man ebenso vorgehen, wobei jeder Anbieter seine eigenen Methoden hat die man herausfinden und in passende Funktion zum Aktivieren und Deaktivieren packen muss.

      Aber letzlich hoffe ich, dass niemand auf die Idee kommt Nutzer unnötigerweise mit mehreren Anbietern zu Tracken.

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.