Wie ich die Cookie-Einwilligung kostenlos umgesetzt habe

Nachdem nun auch der Bundesgerichtshof dem Urteil des Europäischen Gerichtshofes gefolgt ist, benötigen Webseiten-Betreiber die aktive Einwilligung der Nutzer, dass Cookies gesetzt werden dürfen. Im Internet tummeln sich eine ganze Menge Tools, wie man dieses Urteil für seine eigene Webseite umsetzten kann. Eine Vielzahl davon ist leider richtig teuer. Wie ich das Ganze für meine Webseite kostenlos umgesetzt habe, zeige ich euch hier. Normaler Weise schreibe ich über Aktienstrategien, beliebte Indizes oder Gebühren von ETFs, aber da es kaum gute Anleitungen für die Umsetzung der Cookie-Richtlinie gibt, hier ein kleiner Ausreißer.

Vorab: Ich bin weder Rechtsanwalt noch ein ausgebildeter Datenschutzbeauftragter. Diese Lösung funktioniert für meine Seite, heißt aber nicht, dass das auch das Richtige für eure Webseite ist.

Cookie Notice

Was sind Cookies?

Cookies sind Daten, die von einer Webseite auf euren Computer zwischengespeichert werden. Sie sollen zu einem angenehmeren Surfverhalten im Internet beitragen. So speichern Cookies z.B. Passwörter oder sonstige Log-In Daten. Cookies können aber auch zum Tracking benutzt werden. Mit Hilfe von diesen Daten wird euch beispielsweise personalisierte Werbung angezeigt. Ihr merkt schon: Es gibt „gute“ und „böse“ Cookies.

Deshalb haben EuGH und BGH entschieden, dass der Webseiten-Nutzer aktiv zustimmen muss, bevor nicht notwendige Cookies auf seinem Computer zwischengespeichert werden. Umgesetzt wird das gern mit diesen nervigen Pop-ups, die erscheinen sobald ihr das erste Mal auf einer Webseite seid. Nach dem neuesten Gerichtsurteil ist das leider auch kaum mehr anders möglich.

Google Analytics und die Cookies

Auch ich habe auf meiner Seite einen Cookie-Einwilligungs-Banner. Und zwar benutze ich Google Analytics, um mehr über die Nutzer meiner Seite zu erfahren. Dafür speichert Google einen Cookie bei euch. Nach dem neusten Urteil geschieht das aber erst, wenn ihr dem aktiv zugestimmt habt. Nämlich indem ihr auf „Akzeptieren“ geklickt habt. Doch wie habe ich das kostenlos und auch noch im Style meiner Seite umgesetzt? Das möchte ich euch jetzt zeigen.

Kostenloses WordPress Plugin für die Cookie-Einwilligung

Meine Seite läuft mit WordPress. Und das gute an WordPress ist: Es gibt eine Vielzahl von kostenlosen Plugins. Denn meistens ist man mit seinem Problem nicht alleine und eine andere schlaue Person hat sich schon an eine Lösung gemacht. Da das Problem mit der Cookie-Einwilligung ganz Europa betrifft, gibt es tatsächlich eine Vielzahl von Lösungen. Ich habe mich für das Plugin „Cookie Notice GDPR & CCPA“ entschieden. Dieses installiert und aktiviert ihr ganz einfach und geht dann in die Einstellung des Plugins.

Hier könnt ihr die Cookie-Einwilligung nach euren Wünschen konfigurieren. Ganz wichtig: Um Cookies beispielsweise von Google Analytics erst nach der Einwilligung zu speichern, müsst ihr alle Scripte, die Cookies speichern, in das entsprechende Feld kopieren.

Cookie-Einwilligung
Cookie-Einwilligung

Da ihr euren Code jetzt im Plugin platziert habt, könnt ihr ihn dort entfernen, wo ihr ihn vorher eingefügt hattet. Denn ansonsten laufen Google Analytics oder auch andere Skripte weiter ohne die Einwilligung des Nutzers. Und dann nützt euch der ganze Einsatz des Plugins nichts.

Wie kann ich überprüfen, ob ich alle nicht notwendigen Skripte blockiere?

Falls ihr euch nicht sicher seid, ob ihr alle nicht notwendigen Skripte in das Plugin kopiert und überall anders entfernt habt, könnt ihr das ganz leicht überprüfen. Dafür gibt es eine Browser-Erweiterung namens Ghostery. Auch dieses Tool ist kostenlos. Habt ihr es einmal installiert, könnt ihr auf jeder Webseite sehen, welche Art von Cookies bei euch gespeichert werden. Bevor ein Nutzer auf eurer Seite also „Akzeptieren“ bei der Cookie-Einwilligung geklickt hat, sollte Ghostery unbedingt nur notwendige Skripte anzeigen. Ansonsten wird bei euch noch ein nicht notwendiges Skript ohne die Erlaubnis des Nutzers ausgeführt. Und das ist seit neuestem nicht mehr erlaubt.

Ghostery Cookie
Ghostery Cookie

Wie passe ich das Design der Cookie-Einwilligung an?

Von Haus aus kommt Cookie Notice GDPR & CCPA nicht in einem besonders schönen Design daher. Damit die Cookie-Einwilligung zu eurer Seite passt, sind also noch ein paar Design-Anpassungen notwendig. Dafür müsst ihr die entsprechenden CSS-Klassen ansprechen und nach eurem Geschmack abändern. Für meine Einwilligung sieht das beispielsweise so aus:


/* Cookie - Container */
#cookie-notice .cookie-notice-container {
background: rgba(255, 255, 255); /* Hintergrundfarbe */
color: #000; /* Schriftfarbe */
font-family: Poppins; /* Schriftart */
font-size: 14px; /* Schriftgröße */
bottom: 0; /* Orientierung: unten */
position: sticky; /* Container bleibt an einer Stelle */
border-color: #fff; /* Rahmenfarbe */
border-style: solid; /* Rahmenart */
border-width: 20px; /* Rahmenstärke */
-webkit-box-shadow: 0 -0.2em 0.4em rgba(0,0,0,0.2) /* Schlagschatten */
}
/* Akzeptieren - Button */
#cn-accept-cookie {
background: #FE005A; /*Hintergrundfarbe*/
color: #fff; /*Schriftfarbe*/
font-size: 14px; /*Schriftgröße*/
font-family: Poppins; /* Schriftart */
line-height: 1.2; /* Zeilenhöhe */
padding: 1.1em 2.2em; /* Abstand zum Rand */
border-radius: 4em; /*Abrundung der Ecken*/
-webkit-box-shadow: 0 0.2em 0.4em rgba(0,0,0,0.2); /*Schatteneffekt rund um die Buttons*/
}
/* Ablehnen - Button */
#cn-refuse-cookie {
background: #fff; /*Hintergrundfarbe*/
color: #999; /*Schriftfarbe*/
font-size: 14px; /*Schriftgröße*/
font-family: Poppins; /* Schriftart */
line-height: 1.2; /* Zeilenhöhe */
padding: 1.1em 2.2em; /* Abstand zum Rand */
border-radius: 4em; /*Abrundung der Ecken*/
}
/* Einwilligung widerrufen - Button */
.cn-revoke-cookie {
background: #FE005A; /*Hintergrundfarbe*/
color: #fff; /*Schriftfarbe*/
font-size: 14px; /*Schriftgröße*/
font-family: Poppins; /* Schriftart */
line-height: 1.2; /* Zeilenhöhe */
padding: 1.1em 2.2em; /* Abstand zum Rand */
border-radius: 4em; /*Abrundung der Ecken*/
-webkit-box-shadow: 0 0.2em 0.4em rgba(0,0,0,0.2); /*Schatteneffekt rund um die Buttons*/
}
/* Akzeptieren - Button - Hover Effekt */
#cn-accept-cookie:hover, #cn-accept-cookie:focus {
background: linear-gradient(90deg,#fe005a,#cc318b); /* Farbverlauf */
}
/* Einwilligung widerrufen - Button - Hover Effekt */
.cn-revoke-cookie:hover {
background: linear-gradient(90deg,#fe005a,#cc318b); /* Farbverlauf */
color: #fff; /* Schriftfarbe */
}

Diesen Code packt ihr einfach in eure Custom-CSS Datei, euer Theme oder fügt es über ein Plugin ein. Ihr könnt diesen Code gern benutzen und abändern. Alle Eigenschaften, die ihr in CSS bestimmen könnt, findet ihr bei W3. Aber bitte bedenkt: Wichtiger als das Aussehen, ist immer noch dass ihr alle nicht notwendigen Skripte vor der Einwilligung blockiert.