• Max Runge

In 5 Schritten Website DSGVO konform machen! 100% Anleitung

Aktualisiert: Feb 2

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 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!

Veralteter Cookie Banner

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 der 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 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.



Cookiebot Dasboard

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 https://tagmanager.google.com/ einen kostenloses 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.


Google Tag Manager Container ID

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.

Google Tag Manager Integration bei Wix

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.

Cookiebot Consent

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:

Cookiebot unterteilt Cookies in 3 Kategorien

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.

Wenn fertig, die Änderungen über Senden live schalten

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.


<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! Leider gibt es ein kleines Problem! Die Ansicht der Cookie Erklärung ist nicht sehr schön.


Cookie Einstellungen - nicht 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:


  1. Variabel Name: Cookiebot Domain Group Id Im Wert wird die CookieBot Domain ID angegeben

  2. Variabel Name: Cookiebot Placeholder Text Im Wert schreibst du den Text "Cookie Einstellungen laden..." hinein.


Wenn die beiden Variabeln 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 Even 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" }); });
Code auf Wix Website einbauen

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:


Schöne Cookie Einstellung im eigenem Design

Wie man sehen kann sieht diese Übersicht um einiges besser schöner 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 über ein Kommentar oder einer Mail von dir.


355 Ansichten

Wir, die RocketWM gestalten den Online Auftritt, der Ihr Unternehmen zum abheben bringt. 
 

Mit abgestimmten Webdesign und Online- Social Media Konzepten bringen wir unseren Kunden die Sichtbarkeit die Sie verdienen.

Webdesign Agentur mit Liebe zu Social Media Marketing aus Wien.

RocketWM - Webdesign & Online Marketing

Reindorfgasse 26/2, 1150 Wien

+43 650 56 27 898

office@rocketwm.com

+ Folge uns