!!!!!! Wichtiges Update zu diesem Blogartikel !!!!!
Bei Wix gab es im letzten Monat interne Systemänderungen, wodurch diese Anleitung nicht mehr zielführend ist und die Implementierung von Cookiebot über diesen Weg fehlerhaft ist.
Anleitung für die korrekte Cookiebot Implementierung - Stand 29.11.2020
Cookiebot Script zu deiner Website hinzufügen
Als allererstes müsst ihr einen Script von Cookiebot in euren Head der Website einfügen. Deine Cookiebot ID findest du in deinem Cookiebot Account.
<script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="*****ADD YOUR OWN COOKIEBOT ID HERE*****" data-blockingmode="auto" type="text/javascript"></script>
Diesen Code fügst du dann unter Einstellungen -> Tracking Tools in deinen Head der Website ein.
Unterseiten für den Cookie Consent Text einrichten
Als nächstes werden wir zwei Unterseiten erstellen, worauf die User ihre Cookie Präferenzen einsehen können.
Hierbei wird ein iFrame Element auf der Unterseite angebracht auf der die User zukünftig ihre Cookie Einstellungen ansehen können. Bei der Website Adresse gebt ihr folgendes ein:
domain.at/cookiebot
Nun erstellen wir eine zweite Unterseite.
Auf diese Unterseite muss kein Element hinzugefügt werden, einfach eine leere Seite.
Wichtig hier ist, dass der URL Path der Unterseite /cookiebot lautet.
Wurden diese beiden Unterseiten erstellt, sind wir im Editor fertig und du kannst die Seite speichern und veröffentlichen.
Zu guter Letzt müssen wir noch zwei Elemente im Dashboard unter "Tracking Tools" hinzufügen.
Cookiebot iFrame Style - Code Snippet
Dieses Code Snippet gestaltet das Layout deines Cookie Consent Texts und ist dafür speziell für die Unterseite gedacht, auf der du deinen Text anzeigen lassen wirst.
<style>
#comp-khxtf2hf {
border: solid 1px;
}
</style>
Cookie Consent Text - Code Snippet
Dieses Code Snippet ist dafür verantwortlich, dass der Text auf der Unterseite angezeigt wird.
Dieser soll jedoch bewusst auf die Unterseite /cookiebot eingebaut werden, da dass iFrame Element über die Verlinkung sich den Content auf die eigentliche Unterseite holt.
<script id="CookieDeclaration" src="https://consent.cookiebot.com/*****ADD YOUR OWN COOKIEBOT ID HERE*****/cd.js" type="text/javascript" async></script>
Wenn du diese beiden Snippets zu deiner Website hinzugefügt hast, ist die Cookiebot Implementierung vollständig. Wenn neue User nun auf deine Website kommen, poppt der Banner von Cookiebot auf und auf der jeweiligen Unterseite können die User ihre Cookie Präferenzen einsehen und sogar abändern.
Seit In-Kraft-treten der Datenschutz-Grundverordnung am 25. Mai 2018 hat sich für Unternehmer und vor allem Website Betreiber einiges geändert!
Nicht nur wurde seit der Umsetzung mit hohen Strafen gedroht, sondern auch im Bezug der Erfassung von Daten im digitalen Bereich dauerhaft neue Änderungen gemacht.
Da kann man schon mal den Überblick zur aktuellen Situation verlieren.
Um deine Website zum Stand vom 1.2.2020 datenschutzkonform zu machen, zeige ich dir in diesem Artikel welche Regeln aktuell gelten und welches kostenloses Tool du für deine Website verwenden kannst.
Aufgrund der vielen Datenschutz Konflikte in der Vergangenheit, wie der Fall von Edward Snowden oder Facebook und Cambridge-Analytica möchte die EU nun ihre Bürger besser schützen. Grundsätzlich eine tolle Maßnahme um die Daten der Bürger zu schützen, doch wie so oft treffen solche schnellen Gesetzesänderungen oft auch viele Personen und Unternehmen die in erster Linie gar nichts dafür können! Egal ob großer Konzern oder kleiner Familienbetrieb, eine datenschutzkonforme (dsgvo) Website ist im Jahr 2020 einfach Pflicht!
Was sind die aktuellen Bestimmungen für eine konforme Website? (1.2.2020)
Um es kurz zu sagen:
Ein einfacher Cookie-Banner reicht leider nicht mehr aus!
Nur den User über die Speicherung der Cookies zu informieren, ist leider zu wenig.
Um konform zu sein, muss der Cookie-Banner folgende Merkmale aufweisen:
Bei Aufruf der Website über Cookies informieren
Tracking Tools wie Google Analytics oder der Facebook Pixel dürfen nur nach Zustimmung des Users aktiviert werden
User muss einen Überblick über verwendete Software erhalten
User kann frei entscheiden welche Daten er teilen möchte und welche nicht
Muss die Möglichkeit haben seine Datenschutz Meinung abrufen und abändern zu können
Klingt jetzt erstmal nach viel Arbeit und einige Fragen zur Umsetzung wirst du wahrscheinlich auch schon im Kopf haben. Doch bevor wir zur Umsetzung gehen, möchte ich dir das Tool vorstellen, mit dem wir deine Website datenschutzkonform machen!
Cookiebot - die All in One Cookie Lösung für konforme Websiten
Mittlerweile wird es ein Haufen Anbieter von Cookie Lösungen geben. Wir haben auch schon mit anderen Anbietern herum experimentiert, doch keine Lösung war für uns so einfach und verständlich in der Umsetzung wie Cookiebot.
Cookiebot kann auf allen gängigen CMS Plattformen wie Wordpress, Wix, Shopify und Magento eingebaut werden.
Was mir besonders gut an Cookiebot gefällt ist, dass die Software einen Scan über die Website macht und von selbst jeden Cookie in die richtige Cookie Kategorie steckt. Optional kann man im Nachhinein einzelne Cookies neu kategorisieren.
Ein weiterer Vorteil ist der Preis.
Die kostenlose Version wird für 99% der Website Besitzer ausreichen und es muss daher mit keinen weiteren Kosten gerechnet werden.
Mit der kostenlosen Version sind zwar die Anpassungsmöglichkeiten des Cookie Banners beschränkt, doch im Grunde geht es um die Funktionalität und einer konformen Website.
Vorraussetzungen für die Implementierung von Cookiebot
Um Cookiebot auf deiner Website erfolgreich einbauen zu können benötigst du folgendes:
Vollen Zugriff zu deiner Website um den Google Tag Manager hinzuzufügen. Wird deine Website von einer Agentur betreut kannst du entweder sie damit beauftragen oder dir die notwendigen Rechte ausstellen lassen.
Einen Account bei Cookiebot
Einen Account bei Google Tag Manager
Sind alle Vorraussetzungen erfüllt, kann mit dem Einbau von CookieBot begonnen werden.
1. Cookiebot Account erstellen
Um einen Account zu erstellen, gehe auf Cookiebot.com und klicke auf Login.
Nachdem du dich erfolgreich registriert hast, bekommst du einen Registrierungsschlüssel an deine angegebene Mail Adresse um dein Konto zu verifizieren.
Nachdem der Account eröffnet und der Registrierungsschlüssel erfolgreich eingegeben wurde, befindest du dich in deinem Dashboard.
Wie du im nachstehenden Bild siehst, musst du hier nun deine Domain angeben, damit Cookiebot weiß um welche Website es sich handelt. Wie vorhin beschrieben ordnet so der Bot automatisch die verwendeten Cookies in die notwendigen Kategorien ein.
Im nächsten Schritt navigierst du im Dashboard Menü auf "Cookies" um dein Scan für deine Website zu starten.
Der Scan kann bis zu 30 Minuten dauern. In der Zwischenzeit können wir jedoch mit der Implementierung ohne Probleme weiter machen.
2. Google Tag Manager Account erstellen
Wenn du noch keinen Google Tag Manager Account hast, kannst du über https://tagmanager.google.com/ einen kostenlosen Account erstellen.
Folge dabei einfach der Einleitung von Google und gib folgende Informationen an:
Kontoname - kann der Unternehmens- oder Projektname sein
Das Land in dem du deine Website betreust
Als Containername gibt wie im Beispiel angefügt die Domain deiner Website an
Als Zielplattform wählst du Web aus
Im letzten Schritt stimmst du noch den Nutzungsbedingungen zu und fertig ist dein Account Setup. Damit dein Google Tag Manager (GTM) Account mit deiner Website verbunden ist, musst du die ID deines GTM Accounts auf deiner Website einbinden. Alle gängigen Plattformen haben dazu ein Plugin, das du jeweiligen App Markt kostenlos runterladen kannst.
Wenn auch deine Website auf Wix basiert benötigst du kein weiteres Plugin mehr.
Plattform unabhängig benötigst du die ID die du mittig auf deinem GTM Dashboard siehst.
Diese ID musst du dann im vorgesehenen Plugin einfügen.
Bei Wix sieht es wie folgt aus. Hier musst du dann nur mehr der Anleitung von Wix selbst folgen.
Da wir nun einen Cookiebot und GTM Account haben, können wir nun endlich mit der Implementierung des Cookie Banners im GTM beginnen.
3. Implementierung des Cookie Banners im Google Tag Manager
Damit der Cookie Banner auf allen Seiten der Website funktioniert und abrufbar ist, wird im ersten Schritt der Banner als Anzeigeinstrument eingefügt.
Klicke in deinem GTM-Container auf "Vorlagen"> "Tag-Vorlagen"> "Galerie durchsuchen" und wähle "Cookiebot CMP" aus der Liste der Community-Tag-Vorlagen aus. Klicke auf "Zum Arbeitsbereich hinzufügen" und bestätige dann mit "Hinzufügen".
Erstelle einen neuen Tag, indem du auf "Neu"> "Tag-Konfiguration" klickst und "Cookiebot CMP" aus der Liste der Standardtagtypen auswählst. Kopiere im Feld "Cookiebot-ID" die ID von der Registerkarte "Ihre Skripte" unter deinem Dashboard auf cookiebot.com.
Wähle "Alle Seiten" als Trigger und gebe deinem Tag oben auf der Konfigurationsseite einen Namen, z.B. "Cookiebot". Klicke auf "Speichern", um den Tag zu erstellen. So sollte deine Tag-Konfiguration aussehen (die Cookiebot-ID ist individuell):
Der erste Schritt ist geschafft. Ja, so schnell kann es gehen! In nächsten Schritt werden wir nun die einzelnen Cookie Kategorien hinzufügen, damit das System versteht, wann deine Tracking Tools aktiviert werden dürfen und wann nicht.
4. Die Kontrolle der einzelnen Cookie Kategorien
Wenn der Website Besucher die Erlaubnis erteilt sein Verhalten für Marketingzwecke zu tracken, müssen wir nun Tags im GTM einbauen damit der Cookiebot diese Zustimmung auch versteht.
Klicke in deinem GTM-Container auf "Vorlagen"> "Variablenvorlagen"> "Galerie durchsuchen" und wähle "Cookiebot-Zustimmungsstatus" aus der Liste der Community-Variablenvorlagen aus.
Klicke auf "Zum Arbeitsbereich hinzufügen" und bestätige mit "Hinzufügen".
Füge nun eine Variable hinzu und nennen sie "Cookie Consent", indem du eine neue Variable erstellst und "Cookie Consent State" aus der Liste der Standardvariablen auswählst.
Es ist keine Konfiguration verfügbar oder erforderlich.
Erstelle dann die folgenden Trigger, die in deiner GTM-Konfiguration verwendet werden sollen:
Ereignisname: cookie_consent_preferences
Ereignistyp: Benutzerdefiniertes Ereignis
Diesen Trigger auslösen bei: Einige benutzerdefinierte Ereignisse
Filter: Cookie-Consent - enthält - Einstellungen
Ereignisname: cookie_consent_statistics
Ereignistyp: Benutzerdefiniertes Ereignis
Diesen Trigger auslösen bei: Einige benutzerdefinierte Ereignisse
Filter: Cookie-Consent - enthält - Statistiken
Ereignisname: cookie_consent_marketing
Ereignistyp: Benutzerdefiniertes Ereignis
Diesen Trigger auslösen bei: Einige benutzerdefinierte Ereignisse
Filter: Cookie-Consent - enthält - Marketing
Wenn du alle drei Kategorien hinzugefügt hast, sollte deine Trigger Liste so aussehen:
Wenn die Trigger erstellt wurden gehe zurück in das GTM Dashboard und veröffentliche alle Schritte die wir nun gerade absolviert haben.
Klicke auf Senden und gib dieser Version einen Namen.
Der Cookiebot ist nun funktionstüchtig! Im Cookie Dashboard kannst du unter "Dialogfeld" nach belieben den Cookie Banner anpassen.
5. Cookie Erklärung einrichten
Wie zu Beginn des Artikels erklärt habe, sind Website Besitzer nun dazu verpflichtet Usern zu jederzeit Auskunft über die Datenspeicherung zu geben. Des weiteren muss eine Möglichkeit gegeben werden, um die Cookie Einstellungen auch wieder zu ändern.
Um dem Benutzer die Möglichkeit zu geben, die Einwilligung zu ändern oder zu widerrufen, implementiere die Cookie-Erklärung von Cookiebot auf einer neuen Unterseite, indem du das folgende Skript-Tag direkt in den Quellcode der Unterseite einbettest.
Anleitung von Sebastian Zolg - zu seinem Artikel.
<script id="CookieDeclaration" src="https://consent.cookiebot.com/00000000-0000-0000-0000-000000000000/cd.js" type="text/javascript"></script>
Achtung: Ersetze 00000000-0000-0000-0000-000000000000 mit deiner eigenen CookieBot ID die du in deinem Dashboard findest.
Dieses Skript kannst du bei den gängigen Plattformen entweder über den Quellcode oder mittels einem Plugin einfügen. Wenn du Wix als CMS verwendest, kannst du unter "Einstellungen" > "Analysewerkzeuge" ein neues Werkzeug hinzufügen und darin den Code nur auf der neuen Unterseite einbauen. Folge auch hier wieder der Anleitung von Wix.
Grundsätzlich kann ab nun jeder Website Besucher einen Einblick in die Datenspeicherung erhalten und gegebenenfalls auch seine Präferenzen ändern.
Glückwunsch! Deine Website ist aktualisiert und DSGVO-konform und verfügt über einen Cookie Banner. Leider gibt es ein kleines Problem! Die Ansicht der Cookie Erklärung ist nicht sehr schön.
Doch auch dafür habe ich eine Lösung, wenn auch deine Website auf Wix aufbaut!
Ansicht der Cookie Einstellung mit Wix schöner gestalten
Zu Beginn gehen wir auf die neue Unterseite, die wir extra für die Cookie Einstellung erstellt haben und fügen ein Textfeld hinzu. Das Textfeld muss 1:1 den folgenden Text beinhalten "Cookie Einstellungen laden..." damit im Nachhinein das Script auch ladet.
Als nächstes gehen wir zurück in den Google Tag Manager und erstellen zwei Variablen mit dem Typ Konstant:
Variabel Name: Cookiebot Domain Group Id Im Wert wird die CookieBot Domain ID angegeben
Variabel Name: Cookiebot Placeholder Text Im Wert schreibst du den Text "Cookie Einstellungen laden..." hinein.
Wenn die beiden Variablen erfolgreich erstellt wurden, kommen wir zum nächsten Schritt. Jetzt erstelle einen Trigger der eine Verbindung zwischen den beiden soeben erstellten Variablen und einem Ereignis aufbaut. Den Tag erstellen wir danach.
Um den Trigger zu erstellen gehe wieder auf Trigger > "Neu" und wählen "benutzerdefiniertes Event" aus.
Nenne den Trigger "On Inject Cookie Declaration Event" und als Ereignisname ebenfalls.
Als nächstes erstellen wir den Tag.
Dazu gehst du auf "Tag" > "Neu" > "Tag-Konfiguration" wähle "Benutzerdefiniertes HTML" und füge es hinzu.
Den Tag nennst du "Inject Cookie Declaration" und fügst dieses Skript in die HTML Box ein:
<script>function InjectCookieDeclaration() { /* We're using native JavaScript as this solution should work without jQuery /* /* Loop through DOM and find Cookie Declaration placeholder element */ var elems = document.querySelectorAll("p"); cd = Array.from(elems).find( function(v) { return v.textContent == '{{Cookiebot Placeholder Text}}' }); cd.innerText = ""; /* Inject Coockie Declaration from CookieBot */ var scriptNode = document.createElement('script'); scriptNode.id = "CookieDeclaration"; scriptNode.src = "https://consent.cookiebot.com/{{Cookiebot Domain Group Id}}/cd.js"; scriptNode.type = "text/javascript"; scriptNode.async = true; cd.appendChild(scriptNode); /* Add some quick css styling to injected content as WIX might override some styles */ var styleNode = document.createElement('style'); styleNode.type = 'text/css'; styleNode.appendChild(document.createTextNode('.CookieDeclaration a {text-decoration: underline;}')); cd.insertBefore(styleNode, cd.firstChild);};delayInMilliseconds = 3000;$(function () { setTimeout(InjectCookieDeclaration, delayInMilliseconds);});</script>
Wenn du den Tag speichern möchtest, fragt dich der GTM ob du einen Trigger hinzufügen möchtest. Füge den davor erstellten "On Inject Cookie Declaration Event Trigger hinzu.
Wenn auch das geschafft ist, vergiss nicht deine Arbeit im GTM Dashboard abzusenden, damit sie auch live wirksam werden.
Nun haben wir alle arbeiten im Google Tag Manager erledigt. Wenn wir zurück zu unserer Wix Website gehen müssen wir auf unserer neu erstellten Unterseite ein wenig Code hinzufügen.
Dazu aktivierst du den Developer Modus aus der Menüleiste und fügst im "Page" Bereich folgenden Code hinzu:
import wixWindow from 'wix-window';$w.onReady(function () { wixWindow.trackEvent("CustomEvent", { event: "InjectCookieDeclaration" }); });
Geschafft!
Zu guter Letzt vergiss nicht auch die Änderungen auf deiner Wix Website zu speichern und zu veröffentlichen! Gratuliere, deine zukünftigen Website-Besucher haben nun eine übersichtliche Cookie Verwaltung.
Wenn User ihre Cookie Einstellungen sehen möchten, müssen sie nur auf die Unterseite gehen und kurz warten bis die Cookie Einstellungen geladen sind.
So sollte es dann bei dir auch aussehen:
Wie man sehen kann sieht diese Übersicht um einiges besser aus, als die vorherige Ansicht. Des weiteren können Website-Besucher nun ihre Einwilligung erneut ansehen, bzw. widerrufen und die Daten werden automatisch gelöscht.
Fazit
Ich hoffe meine ausführliche Anleitung kann dir dabei helfen deine Website DSGVO fit zu machen.
Gerade als Agentur für Webdesign und Online Marketing in Wien ist es uns wichtig unsere Kunden datenschutzkonform zu begleiten.
Bei Fragen freue ich mich über ein Kommentar oder einer Mail von dir.