Cookies deaktivieren bis man den Datenschutz akzeptiert hat

Das Video für Lesefaule

Es macht schon wieder die Runde. Die Rede ist vom bösen Datenschutz und es geht mal wieder um die leckeren Kekse. Es ist nicht erlaubt, Cookies zu setzen, bevor man nicht die Einwilligung hat, dies auch zu tun, zumindest wenn man mit seiner Seite in irgendeiner Art und Weise mit Europäern zu tun hat.

Soweit nichts Verwerfliches, aber jetzt mal die Frage in die Runde: Wer von euch macht das? Also ehrlich jetzt. Erfahrungsgemäß bindet man Google Analytics ein, das Facebook Tracking Pixel und noch etliche weitere andere und hat gar nicht auf dem Schirm, dass man da eigentlich aktiv werden sollte. Eins Vorweg: Keine Sorge wir sind da alle in bester Gesellschaft.

Noch bevor man dem Datenschutz zustimmen kann werden schon Cookies gesetzt. OH OH!

Kurzum: Eine Einwilligung wurde noch nicht erteilt, aber Kekse werden bereits verteilt. Und das kann, mal wieder, böse enden. Wenn die große Abmahnwelle durch Deutschland schwappt. Die große Frage, die bleibt: Was kann man dagegen tun?

Cookies deaktivieren mit dem Google Tag Manager

Wer bis zum jetzigen Zeitpunkt den Google Tag Manager nicht benutzt, sollte ab sofort ernsthaft über diese Idee nachdenken. Denn durch den Tag Manager lassen sich zig Probleme relativ leicht lösen.

Nochmal OH OH, Analytics wird pauschal auf jeder Seite SOFORT eingebunden

Betrachtet man das Bild, sieht man, dass Google Analytics auf dem Trigger “All Pages” sitzt. Das bedeutet: es wird einfach, ohne jede Bedingung auf jeder Seite ausgespielt. Ergo: Die Cookies wurden bereits gesetzt.

Und genau werden wir hier mit unserer Lösung ansetzen. Wie cool wäre es, wenn die Scripte und Services, die Cookies speichern möchten solange außer Kraft gesetzt sind bis der User sein Einverständnis gegeben hat?

Cookies deaktivieren Step 1: Ein Cookie Banner muss her

Wie genau ihr es realisieren wollt bleibt eigentlich euch überlassen. Ihr könnt ein Cookiebanner hardcoden, ihr könnt ein vorgefertigtes Script benutzen. Ihr könnt auch einfach einen Link auf der Seite platzieren, den der User anklicken muss. Das ist eigentlich völlig egal.

Als ehrliche Haut gebe ich den Grund an, wozu ich gerne hätte, dass ihr meine Kekse nehmt

Wenn ihr euch für ein Cookiebanner entschieden habt, ist es nur wichtig, dass die Buttons auch Klassen oder IDs haben, damit wir sie über den Tag Manager leichter identifizieren können. Das macht das Cookies deaktivieren leichter.

Cookies deaktivieren Step 2: Fangen wir uns den Klick

Wie bereits in einem anderen Beitrag erklärt (Buttontracking mit Google Tag Manager) legen wir in diesem Schritt einen Trigger an, der darauf reagiert ob der gelbe Button “Na gut, ist ok für mich” angeklickt wurde.

Wenn man sich die Seite im Vorschaumodus des Tag Managers anschaut und einmal auf “Na gut, ist ok für mich” klickt, sieht man folgendes:

Wer meinem anderen Beitrag gefolgt ist, erkennt sofort anhand welches Identifiers wir den Click jetzt einfangen können. Und wer den anderen Beitrag nicht kennt. Es ist “Click Classes -> String -> cc-bt cc-allow” mit diesem Wissen richten wir nun also den Trigger im Google Tag Manager ein. Die Einrichtung des Triggers ist dabei supereinfach.

K.I.S.S “Keep it small and stupid”

Um zu testen, ob unser Trigger auch funktioniert hänge ich ihn einfach mal an ein Custom Element Tag mit der einzigen Aufgabe mir in die Console zu schreiben ob der Button gedrückt wurde.

Dieses Tag dient nur zur Überprüfung als Trigger wird hier der Catch the Cookie Trigger ausgewählt.

Um meine These zu verifizieren, dass das Tag ausgelöst wird, sobald ich auf den Button klicke, schaue ich im Vorschaumodus oder in der Console nach, ob meine Ausgabe ankommt.

Das schaut schon mal gut aus. Check Cookiemonster wurde ausgeführt.
Und auch in der Console kommt die Ausgabe an.

Cookies deaktivieren Step 3: Butter bei die Fische – Mach fertig das Ding

Jetzt haben wir alles, was wir brauchen, um die Cookies vor dem Bestätigen der Datenschutzerklärung zu deaktivieren. Wir müssen es nur noch zusammenbauen. Dazu verknüpfen wir im letzten Step einfach das Analytics Tag mit dem Catch the Cookie Trigger.

Als auslösenden Trigger für Analytics setzt man jetzt den neu angelegten Trigger ein.

In der Theorie passiert nun folgendes:

Das Analytics Tag wird solange nicht ausgeführt, bis jemand auf den Button “Na gut, ist ok für mich” klickt. Erst dann wird es aktiv und nimmt seine Arbeit auf, trackt den User und setzt seine Cookies. Das Ganze sieht in der Praxis dann folgendermaßen aus:

Keinerlei Cookies werden auf der Seite geladen, das kann man da links sehen wenn man sich nicht ablenken lässt.

Wie man sehen kann, werden beim Aufrufen der Seite keinerlei Cookies geladen. Wenn der User sich nun dafür entscheidet Cookies zuzulassen:

Nach dem akzeptieren werden die Cookies erst gesetzt.

Erst jetzt wird das Analytics Tag ausgeführt und Google fängt damit an, fleißig Daten zu sammeln.

Ja aber dann klickt man ja auf jeder Seite neu auf “Einverstanden”?

Damit der User nicht bei jedem Seitenaufruf erneut den Cookies einwilligen muss, braucht es an dieser Stelle noch ein wenig finetuning.

Die Theorie:
Sobald ein User auf “Na gut, ist ok für mich” geklickt hat müssen wir ein Cookie speichern, das vom Tag Manager ausgelesen werden kann. Und sollte dieses Cookie einen von uns vorher definierten Wert haben, wird Analytics einfach sofort mit geladen.

Cookie festlegen

Im Google Tag Manager gibt es eine eigene Variable für Cookies. Dazu geht ihr im Tag Manager auf Variablen -> Benutzerdefinierte Variablen -> Neu.

Wählt hier “First-Party-Cookie”

Im nachfolgenden Dialog vergebt ihr lediglich einen Namen für den Cookie, den ihr ablegen wollt und drückt auf speichern. Es ist wichtig, dass ihr bei der Namensvergabe genau seid, denn diesen Namen braucht ihr gleich noch.

Ein Tag anlegen um den Cookie mit Werten zu füllen

Den Code gibts gleich zum kopieren

Jetzt legt ihr ein neues Tag an, um Euren Cookie zu erstellen. Hier ist es nun wichtig, den gleichen Namen zu verwenden wie in der Variable. Denn sonst kann der Tag Manager den Wert des Cookies nicht auslesen. Ausserdem legen wir als Trigger noch fest, wann der Cookie gespeichert werden soll. Und zwar genau in dem Augenblick, wenn der User auf “Na gut, is ok für mich” klickt. Dazu nutzen wir einfach unseren bereits angelegten “Catch the Cookie” Trigger.

Für diejenigen, die den Code für das Tag nicht abtippen wollen, bitte sehr:

<script>
var cookieName = "cookie_einverstaendnis"; // Name des Cookies
var cookieValue = "true"; // Der Wert, der in den Cookie gespeichert werden soll
var expirationTime = 2592000; // Ein Monat in Sekunden
expirationTime = expirationTime * 1000; // Konvertiert Sekunden zu Milisekunden
var date = new Date(); 
var dateTimeNow = date.getTime(); 

date.setTime(dateTimeNow + expirationTime); // Legt das Verfallsdatum fest (Zeit jetzt + ein Monat)
var date = date.toUTCString(); // Konvertiert Millisekunden zum UTC time string
document.cookie = cookieName+"="+cookieValue+"; expires="+date+"; path=/; domain=." + location.hostname.replace(/^www\./i, ""); // Cookie direkt auch für alle Subdomains setzen
</script>

Die Bedingungen festlegen

Grundsätzlich haben wir zu diesem Zeitpunkt fast alles was wir brauchen. Ein Cookie wird gesetzt, sobald der User die Cookies akzeptiert und wir sind in der Lage diesen Wert auszulesen. Legen wir das doch direkt als Trigger an.

Eine nicht ganz unwichtige Bedingung

Dieser Trigger wird einer unserer Auslöser um Google Analytics, Facebook oder jedes andere Cookiebelastete Script auszuführen. Wir legen hier fest, das wenn bei einem Seitenaufruf der Cookie den Wert true enthält, Analytics (oder jedes andere Cookiebelastete Script) ausgeführt wird.

Achtung! Dies führt zu einem sehr blöden Problem!

Dieser Part hat mich einige Zeit gekostet, vermutlich weil ich auf dem Schlauch gestanden habe. Aber ich möchte euch gerne nervenaufreibende Probleme ersparen.

Analytics Tag Einstellungen == Böse

In diesem Step wollt ihr nun natürlich zusammenführen, was zusammen gehört. Aber wenn eure Einstellungen dann so wie in dem Bild oben aussehen, bekommt ihr ein Problem:

Zu diesem Zeitpunkt funktioniert folgendes: Wenn ein User auf das Einverständnis klickt, wird ein Cookie mit dem Wert true abgelegt. Allerdings wird das Cookie erst beim nächsten Seitenaufruf erkannt. So dass die Session des Users bis zum nächsten Seitenaufruf unsichtbar wäre. Das kann so nicht bleiben.

Und noch eine Bedingung

Die Lösung ist relativ simpel (wenn man weiß wie).

Das ist die Lösung

Um dieses Problem zu umgehen, reicht es völlig aus, einen zweiten Trigger an das Tag zu hängen, und zwar “wenn der User auf einverstanden klickt”. Jetzt wird Analytics ausgeführt, wenn ein User auf das Einverständnis klickt ODER wenn bereits ein Cookie mit dem Wert true vorhanden ist.

Zusammenfassung:

Wenn ihr der Anleitung bis zu diesem Schritt gefolgt seid funktioniert das Ganze folgendermaßen.

Ein User kommt auf die Seite, der Tag Manager prüft ob ein Cookie mit dem Wert true vorhanden ist. Wenn kein Cookie vorhanden ist wird auch kein Analytics eingebunden.

Ruft ein “frischer User” die Seite aus, sieht das Kekslager so aus.

Klickt ein User jetzt auf “Cookies akzeptieren” wird ein Cookie abgelegt, der Wert gespeichert und das Analytics Tracking gestartet.

Jetzt läuft alles, wie es sein soll

Und was, wenn der User nicht mehr will?

Nun ja zum einen besteht ja immer die Möglichkeit, dass der User seine Cookies löscht. Aber darauf können wir uns ja nicht verlassen. Also Legen wir ein weiteres Tag im Tag Manager an.

Das vermutlich letzte Tag, dass du in diesem Guide anlegen musst.

Was tun wir hier? Zum einen setzen wir das Verfallsdatum des Cookies in die Vergangenheit und zum anderen löschen wir den Cookie direkt.

<script>
 function delete_cookie(name) {
 var expires = new Date(0).toUTCString();
 var domain = location.hostname.replace(/^www\./i, "");
 document.cookie = name + "=; expires=" + expires + "; path=/; domain=." + domain;
 }
 
 delete_cookie("cookie_einverstaendnis"); 
</script>

Achtet hier nur darauf, dass ihr bei delete_cookie() den richtigen Namen eingebt.

Jetzt fehlt nur noch der auslösende Trigger und der greift dann natürlich direkt, wenn ein User auf “Never ever” oder eben auf einen “Ich möchte das nicht mehr Link” klickt, den ihr vergeben könnt.

Wenn ihr diesen Stand nun veröffentlicht, habt ihr das Grund Cookie Management auf eurer Seite im Griff.

Und das ist jetzt zu 100% sicher?

Nein natürlich nicht. Denn Datenschutz, Cookies und das ganze Gedöns sind mit Sicherheit um einiges komplizierter. Was man mit dieser Methode allerdings bewerkstelligen kann, ist die Deaktivierung der Cookies bevor der User Cookies speichern möchte.

Auf die gleiche Art und Weise können auch Facebook und Co Pixel Cookies deaktiviert werden. Also so ziemlich alles, was man extern auf der Seite einbinden möchte. Man legt es einfach als Tag im Tag Manager an und wählt als Trigger dann seinen Button Trigger aus.

Für diese Methode hassen mich die Online Marketer und Unicorn Entrepreneure…

Natürlich gibt es mit dieser Variante auch Nachteile. Denn man kennt ja seine Pappenheimer, wie viele User klicken schon auf “Na gut, ist ok für mich”? Vermutlich nicht so viele. Hier gilt es aber zu bedenken: Ich habe auf der Seite eine ziemlich unauffällige Topbar verbaut. Stellt euch mal vor ich würde das als PopUp oder Modal verbauen. Das würde mehr Aufmerksamkeit erzeugen und die Chance, dass User den Cookies zustimmen wäre auch um einiges höher. Ich stelle hier lediglich EINE von vielen Möglichkeiten zur Verfügung, dem Cookie Wahnsinn auch ohne Plugin Herr zu werden. Und die lässt sich auf jedes Element anwenden das ein User anklicken kann.

Mein geschätzter rotbärtiger Kollege hat bereits eine viel interessantere Lösung, die auch Verluste im Tracking minimieren wird. Allerdings macht der Gute jetzt erstmal Urlaub und ich weiß auch noch gar nicht ob wir darüber sprechen werden. Wenn ja, werde ich diese Methode ggf. auch vorstellen.

Falls euch der Beitrag gefallen hat würde ich mich über Feedback, ein Like oder Kritik erkenntlich zeigen.

4 Gedanken zu “Cookies deaktivieren bis man den Datenschutz akzeptiert hat”

  1. Hallo Benjamin,

    vielen Dank für diesen Beitrag, er hat mir sehr geholfen und zudem noch erfrischend geschrieben. Eine Frage kommt bei mir auf.
    Ich stelle die Klick Funktion mit definierter Klasse cc-allow ein. Soweit funktioniert alles. Klickt man auf den Button wird Google Analytics abgefeuert. Toll.

    Nun meine Frage, die sich auch auf Deiner Seite reproduzieren lässt. Wenn ich auf “einverstanden” klicke und auf eine andere Seite innerhalb der Website wechsel ist alles vergessen. Analytics ist wieder raus. Das lässt sich auch innerhalb Analytics beim Echtzeit User nachbilden. An der Stelle wo der Nutzer akzeptiert wird er getrackt aber auf Folgeseiten passiert nichts. Erst dann, wenn ich auf dieser Seite immer wieder unten das “einverstanden” abfeuer. Das kann ja nicht Sinn der Sache sein.

    Habe ich einen Denkfehler? Aus meiner Sicht greift Analytics mit dieser Lösung immer genau einmal und hört bei Seitenwechsel auf zu tracken.

    Freue mich auf Deine Meinung dazu

    • Danke dir für dein Kommentar (ich feier das gerade ein wenig)

      Nein du hast keinen Denkfehler. Es ist tatsächlich so, dass jede Seite ein Einverständnis fordert. Das ist natürlich Käse, zu dem Zeitpunkt, an dem der User auf Einverstanden klickt muss natürlich noch ein Cookie abgelegt werden (darauf hinweisen) der abspeichert DAS das Einverständnis gegeben wurde. Was dann auch bedeutet, dass bevor das Banner ausgegeben wird, geprüft werden muss OB der User bereits das “Ich hab mein Einverständnis gegeben” Cookie hat.

      Ich werden den Part so schnell wie möglich nachliefern.

Schreibe einen Kommentar