Jede Website, die sich im Besitz einer Einrichtung in der Europäischen Union befindet oder an Bürger der EU vermarktet wird, muss die Datenschutz-Grundverordnung einhalten. Diese Verordnung regelt den Umgang mit personenbezogene Daten.
Aus der Verordnung ergibt sich unter anderem, dass technisch nicht notwendige Cookies nur dann gesetzt werden dürfen, wenn der Kunde zuerst über den Zweck der Nutzung und den Umgang mit den Daten informiert wurde und dann seine Zustimmung erteilt.
Gerne wird zu diesem Zweck ein externer Dienst eingesetzt, eine sogenannte Consent-Management-Platform (CMP).
Es ist natürlich grober Unfug, zur Information der Kunden und zum Einholen von dessen Einwilligung einen externen Dienst zu bemühen, ohne zuvor den Kunden über die Datenweitergabe an diesen externen Dienst informiert und seine Einwilligung hierzu eingeholt zu haben.
Ich habe ein kleines JavaScript erstellt, das ohne externe Dienste den Kunden informiert und eine Zustimmung (oder Ablehnung) einholt und speichert.
Das Skript
Mein Skript euconsent.js enthält weder Texte noch Layout und es interagiert nicht mit anderen Skripten, außerdem belegt es keine globalen Namen. Daher stört das Skript keine anderen Skripte und lässt sich nicht von anderen Skripten stören, auch nicht von Browser-AddOns.
Das Skript lässt den Besucher eine Cookie-Policy aus einer Liste auswählen und speichert die vom Besucher bestätigte Auswahl im Web-Storage, also je nach Konfiguration im LocalStorage oder SessionStorage.
Es interagiert mit den Elementen der Seite, die mit class="euconsent"
markiert sind. Dazu durchsucht es beim Start die Seite nach Elementen dieser Klasse,
merkt sich diese, und installiert Callbacks auf aktiven Elementen wie Radio-Buttons und
Buttons. Die Klasse "euconsent" wird nicht für das Layout benutzt,
sie dient ausschließlich zur Markierung der relevanten Elemente.
Einbindung und Konfiguration
Binden Sie das Skript so ein, dass es erst gestartet wird, wenn die Webseite geladen ist.
Fügen Sie das <script src="euconsent.js">-Element also am Ende der Seite ein oder
markieren Sie es im <head> mit defer
:
<head>
[...]
<script defer="defer" src="euconsent.js"></script>
[...]
</head>
Konfiguriert wird das Skript über "data"-Attribute an einem der mit "class=euconsent" markierten Elemente:
- Cookie-Lebensdauer in Sekunden (default 0):
<element class="euconsent" data-euconsent-cookie-lifetime="0">Der Wert
0
bedeutetbis zum Schließen des Browsers
; das Cookie wird dann im SessionStorage statt des persistenten LocalStorage gespeichert. - Urls der Scripte, die bei Zustimmung geladen werden:
<element class="euconsent" data-euconsent-script-urls-policy-id="path/name.js">Es können mehrere Skripte mit Blankspace getrennt angegeben werden.
-
Policy-Id,
die bei gesetztem
Do-Not-Track-Header
gewählt wird (default:
DNT
nicht beachten):
<element class="euconsent" data-euconsent-dnt-policy="policy-id">Wenn ein DNT-Header gesetzt ist, wird ohne Rückfrage diese Policy ausgewählt.
Achtung: Nach Artikel 21 Absatz 5 der DSGVO (
kann die betroffene Person ungeachtet der Richtlinie 2002/58/EG ihr Widerspruchsrecht mittels automatisierter Verfahren ausüben, bei denen technische Spezifikationen verwendet werden
) ist das Ignorieren vonDo Not Track
möglicherweise rechtswidrig. - Name des Storage-Items (default:
euconsent
):<element class="euconsent" data-euconsent-store-key="euconsent">Nur nötig, wenn innerhalb einer Domain unterschiedliche Bereiche unterschiedliche Cookie-Policies haben.
- Geschwätzigkeit des Skriptes (default:
0
):<element class="euconsent" data-euconsent-verbosity="0">Wenn ungleich 0, schreibt das Skript Einträge in das Browser-Log.
Auswahl der Policy durch den Besucher
Der Besucher wählt die Policy durch Betätigung eines Button oder Radio-Button. Die Id der Policy wird in einem Parameter des HTML-Elementes angegeben:
<button type="button" class="euconsent" data-euconsent-select="policy-id">Policy-Name</button>
<label><input type="radio" class="euconsent" value="policy-id"/> Policy-Name</label>
Der Besucher bestätigt seine Auswahl durch Betätigung eines
-Button:type=submit
<button type="submit" class="euconsent">Auswahl bestätigen</button>
Durch Betätigung eines
-Buttons kann der Besucher eine einmal
erteilte Zustimmung widerrufen. Nach Löschen des type=resetCookies
wird die Seite neu geladen, denn anders kann man die bei der vorherigen Zustimmung gestarten
Skripte nicht stoppen.
<button type="reset" class="euconsent">Zustimmung widerrufen</button>
Alternativ können Sie auf einer Seite, die nicht erst nach Zustimmung angezeigt wird — zum
Beispiel auf der Datenschutz
-Seite — eine
Neuauswahl der Zustimmung
anbieten. Diese wird gespeichert, ist aber auf der ungesicherten
Seite bedeutungslos und wird erst beim Aufruf der nächsten normalen
Seite wirksam.
Anzeige der Auswahl
Das Skript ordnet alle mit class="euconsent"
markierten Elemente dynamisch entweder der Klasse euconsent-selected
oder der Klasse euconsent-unselected
nach diesen Regeln zu:
- Das Element enthält ein Attribut data-euconsent-select="policy-id".
In diesem Fall ist das Element selected, wenn die policy-id mit der ausgewählten Policy übereinstimmt, unselected sonst.
- Das Element enthält kein Attribut data-euconsent-select.
In diesem Fall ist ist das Element selected, wenn irgendeine Policy ausgewählt und bestätigt wurde, unselected sonst.
Zusammen mit CSS-Regeln erlaubt der erste Mechanismus, die Cookie-Consent-Seite ansprechend zu gestalten, und der zweite Mechanismus, die Cookie-Consent-Seite dynamisch ein- und auszublenden.
Nachladen der Cookie-Content-Seite
Man kann den Inhalt der Consent-Box in eine getrennte Datei auslagern und deren URL in das Wurzelelement der Consentpage aufnehmen. Dieser Inhalt wird dann und nur dann in das Wurzelelement nachgeladen, wenn er gebraucht wird, also wenn keine Policy im Storage gefunden wurde.
Der HTML-Code der Cookie-Consent-Funktion reduziert sich so auf das (fast) leere Wurzelelement:
<section class="euconsent"
data-euconsent-consent-form-url="consent-form.htm"
data-euconsent-cookie-lifetime="60"
data-euconsent-script-urls-keiner="payload-no-tracking.js"
data-euconsent-script-urls-einer="payload-bnd.js"
data-euconsent-script-urls-viele="payload-bnd.js payload-cia.js
payload-fsb.js payload-nsa.js payload-mossad.js"
data-euconsent-script-urls-alle="payload-target-marketing.js">
Loading …
</section>
Das reduziert die übertragene Datenmenge, da der Box-Inhalt nur auf der ersten besuchten Seite gebraucht wird.
Resourcen
- Demoseite für das Nachladen der Consent-Form;
- Seite mit minimalem HTML-Code (mit Beachtung des DNT-Headers);
- Skript: euconsent.js, minimisiert: euconsent-min.js;
- Stylesheet: euconsent.css;
- Nachladbare Consent-Form: consent-form.htm;
- Payload-Skripte: payload-no-tracking.js, payload-bnd.js, payload-cia.js, payload-fsb.js, payload-mossad.js, payload-nsa.js, payload-target-marketing.js;
- Rundum-Sorglos-Paket: euconsent.zip (auf eigenem Server auspacken und ausprobieren).
Disclaimer
- Keine Garantie (§ 521 BGB, § 675 (2) BGB).
- Warnung: der Browser des Seitenbesuchers ist nicht unter Ihrer Kontrolle. Obskure oder veraltete Browser, Browser-Plugins und kranke Browser-Einstellungen können Seiten-Inhalte, also auch Information- und Zustimmungs-Formulare, verunstalten oder ganz unterdrücken. Finden Sie einen kompetenten Webdesigner, der mehr kann als bunt, der die Fallstricke kennt und Sie zu diesem Thema beraten kann.
- Ich hoffe, dass Datenschützer mit diesem Skript zufrieden sind, kann das aber natürlich nicht garantieren. Fehler beim Thema Datenschutz können durch das kranke deutsche Wettbewerbsrecht sehr schnell sehr teuer werden. Lassen Sie sich von einem befugten Rechtskundigen beraten. IANAL.