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!

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.