Die Suche nach dem perfekten Cookie Consent für die eigene Website kann sich schnell als frustrierend herausstellen. Das wissen wir, weil es uns auch so ergangen ist. Es gibt zwar zahlreiche Lösungen für den Einsatz auf der eigenen Website, aber wenn man genau hinsieht stellt man fest:
Die meisten Cookie-Consent-Lösungen sind nicht DSGVO-konform
DSGVO-konforme Lösungen sind meist kostenpflichtig
Bestehende Lösungen sind oft an ein bestimmtes Redaktionssystem geknüpft
Das Wichtige bei einem Cookie Consent: Die (Analyse- und Marketing-)Cookies dürfen erst dann im Browser gesetzt werden, wenn die Nutzer:innen sie auch explizit akzeptiert haben.
Also sind wir unseren eigenen Weg gegangen und haben - mit Hilfe des Google Tag Managers – einen kostenlosten und DSGVO-konformen Cookie-Consent entwickelt, den wir hier Schritt für Schritt erklären. Falls du unsere Cookie Consent Lösung auf deiner Website einsetzten willst, schicken wir dir gerne eine detaillierte Anleitung mit dem gesamten Code per Email zu.
Wir haben uns für einen Cookie Consent entschieden, bei dem der Nutzer die Möglichkeit hat, Präferenzen für Marketing oder Analyse Cookies zu setzen. Notwendige Cookies werden jedoch gesetzt, ohne dass der Nutzer die Möglichkeit hat, diese zu ignorieren.
Cookie-Consent: Das Design
Als ersten und einfachsten Schritt, um den Cookie Consent selber zu implementieren, benötigst du das entsprechende HTML und CSS. Wenn du den Nutzern die Möglichkeit bieten willst, Cookie Präferenzen zu setzen, sollte das ebenfalls in dem HTML Code berücksichtigt werden. Der beste Weg dafür ist eine Checkbox im HTML zu erstellen.
Mit dem erstellten HTML und CSS Code sollte nun der Cookie Consent auf deiner Website sichtbar sein. Um die erste Interaktion zu implementieren, kann durch den Klick auf “Akzeptieren” ein Cookie im Browsers des Nutzers gesetzt werden um zu speichern, dass der Nutzer die Cookies akzeptiert hat und der Cookie Banner ausgeblendet wird.
$(“.acceptBtnClass”).click(function (e) {
e.preventDefault();
$(“.cookieBannerClass”).css('display', 'none');
setCookie("cookie_consent", true);
});
function setCookie(cname, cvalue) {
var d = new Date();
d.setTime(d.getTime() + (365*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
Wenn du nun auf deiner Website die Developer Tools deines Browser öffnest und zu Anwendung -> Cookies navigierst, sollte nun ein Cookie mit dem Namen “cookie_consent” gesetzt sein.
Cookie Consent: true
Da ein Nutzer nicht bei jedem Besuch deiner Website die Cookies akzeptieren will und nicht jedes mal ein neues Cookie gesetzt werden sollte, wird im nächsten Schritt überprüft, ob bereits ein Cookie mit dem Namen “cookie_consent” gesetzt wurde. Wenn ja, bedeutet das, dass der Nutzer bei einem Besuch der Website bereits die Cookies akzeptiert hat. Der Cookie Banner muss daher nicht mehr angezeigt werden.
if(hasAcceptedCookies())
{
$(“.cookieBannerClass”).css('display', 'none');
}
else if(!hasAcceptedCookies())
{
$(“.cookieBannerClass”).css('display', 'initial');
}
function hasAcceptedCookies(){
return getCookie("cookie_consent");
}
function getCookie(cname) {
var v = document.cookie.match('(^|;) ?' + cname + '=([^;]*)(;|$)');
return v ? v[2] : false;
}
Unterschiedliche Cookie Kategorien
Um dem Nutzer die Möglichkeit zu bieten, Cookie Präferenzen zu setzen, muss anschließend ein Click-Handler für die jeweiligen Checkboxen im Cookie Banner implementiert werden. Auf Basis der Auswahl des Nutzers werden für die jeweiligen Präferenzen ein Cookie mit entweder “TRUE” oder “FALSE” gesetzt. Wenn der Nutzer im Cookie Banner die Auswahl der Checkbox von z.B. Analyse Cookies entfernt, wird das Cookie “cookie_consent_analyse” mit dem Wert “FALSE” gesetzt, wenn der Nutzer die Checkbox erneut auswählt, wird der Wert auf “TRUE” gesetzt.
Die Cookies für die Präferenzen werden dazu verwendet, um später im Google Tag Manager die entsprechenden Cookies zu laden oder zu blockieren.
var analyseSetting = $("#analyseCheckboxID");
$(analyseSetting).click(function () {
checkCookie(analyseSetting, "cookie_consent_analyse");
});
function checkCookie(checkbox, cname) {
if (checkbox.prop("checked") === true)
setCookie(cname, true);
else
setCookie(cname, false);
}
Anschließen muss der Click-Handler für das “Akzeptieren” noch um die Funktion “checkCookie” erweitert werden. Diese Funktion wird hier benötigt, damit die Cookies für die Präferenzen gesetzt werden, auch wenn der Nutzer auf keine der Checkboxen klickt.
$(“.acceptBtnClass”).click(function (e) {
e.preventDefault();
$(“.cookieBannerClass”).css('display', 'none');
setCookie("cookie_consent", true);
checkCookie(analyseSetting, "cookie_consent_analyse");
});
Wenn du jetzt nochmal in den DevTools in deinem Browser die Cookies öffnest, sollten nun drei Cookies “cookie_consent”, “cookieconsentmarketing” und “cookieconsentanalyse” mit entweder “TRUE” oder “FALSE” Werten erscheinen.
Implementierung in Google Tag Manager
Die nächsten Schritte werden nun im Google Tag Manager gemacht. Dort legst du als erstes zwei Variablen für die Marketing und Analyse Cookies an. Der Variablentyp sollte dabei “First-Party-Cookie” sein und im Feld für den Cookie-Namen musst du “cookie_consent_marketing” oder “cookieconsentanalyse” eintragen. Dadurch werden die Werte der Cookies, welche wir vorher mit JavaScript gesetzt haben, ausgelesen.
Klick-Trigger in Google Tag Manager anlegen
Nun legen wir die benötigten Trigger an. Wir benötigen einen Klick-Trigger für unseren “Akzeptieren” Button, einen Opt-out Klick-Trigger für die Marketing Cookies, der ausgelöst wird, wenn die vorher definierte Marketing Variable gleich dem Wert “FALSE” ist und dann noch dieselbe Opt-out Möglichkeit für die Analyse Cookies. Ebenfalls benötigen wir noch einen Seitenaufruf Trigger für jeweils die Marketing und Analyse Cookies. Auch bei diesen beiden Trigger müssen die zuvor definierten Variablen jeweils auf “TRUE” gesetzt werden. Diese Trigger sind notwendig, um die jeweiligen Cookies bei jedem Seitenaufruf zu setzen.
Tags für die Cookies bzw. Tracking-Codes erstellen
Als nächsten und letzten Schritt legen wir die Tags an. Um einen neuen Tag für zum Beispiel den Facebook Pixel anzulegen, benötigst du das Script Tag welches dann als Benutzerdefiniertes HTML eingefügt wird. Dieser Facebook Pixel soll dann ausgelöst und beim Nutzer gesetzt werden, wenn dieser auf Cookies “Akzeptieren” klickt und danach jedes mal, wenn der Nutzer eine Seite auf deiner Website aufruft. Hat der Nutzer jedoch die Marketing Cookies nicht akzeptiert, darf der Facebook Pixel nicht gesetzt werden. Dafür müssen wir einen blockierenden Trigger hinzufügen, wofür der vorher angelegte Opt-out Marketing Trigger bei den Ausnahmen hinzugefügt werden kann. Für den Facebook Pixel kann das nun so aussehen:
Das gleiche ist nun auch für andere Cookie Tags möglich.
Abschließend sollte in den Datenschutzbestimmungen deiner Website der Nutzer die Möglichkeit haben, seine Cookie Einstellungen für die Präferenzen zu ändern. Dazu kann durch den Klick auf einen Link der Cookie Banner erneut angezeigt werden.
Den gesamten Sourcecode + Anleitung bekommst im Austausch für deine Email direkt in dein Postfach ;-)