01 — Kunde
Über das Projekt
Der Consent-Banner ist das Einzige, was ein Besucher vor dem Inhalt sieht. Wiegt er mehr als die Seite selbst und setzt Cookies vor dem Klick, bricht er Geschwindigkeit und Gesetz zugleich.
02 — Kontext
Aufgabe
Die Website braucht den Meta-Pixel für Werbung für die Bücher. Nach deutscher Praxis darf der Pixel erst nach ausdrücklicher Einwilligung laden. Fertige Banner-Plugins machen es oft umgekehrt: Sie setzen das Skript in den Head und „blockieren“ es danach, während die Cookies trotzdem erscheinen.
Die zweite Anforderung ist das Gewicht. Fertige Lösungen ziehen Dutzende Kilobyte Styles und Skripte, separate Anfragen und Telemetrie nach sich. Auf einer Website, deren gesamtes Theme sieben Kilobyte wiegt, darf der Banner nicht das schwerste Element der Seite sein.
Drittens: Die Autorin pflegt die Website selbst. Einstellungen sind nötig, ein visueller Baukasten nicht.
03 — Lösung
So funktioniert es
3.1
Nichts vor der Wahl
Skripte der Dienste werden als text/plain mit Kategorie-Kennzeichnung in die Seite geschrieben und erwachen erst nach Einwilligung in diese Kategorie. Iframes erhalten ihre Adresse nach demselben Prinzip. Selbst das Cookie mit der Entscheidung erscheint erst nach dem Klick. Das Cookie des Sprachumschalters ist auf Plugin-Ebene abgeschaltet: Die Sprache lebt in der Seitenadresse.
3.2
Drei Kilobyte, null Anfragen
Ein Inline-Style und ein Inline-Skript im Footer, ohne separate Dateien, Abhängigkeiten und jQuery. Styles und Skript zusammen: 3,2 KB gzip. Der Banner ist unten am Bildschirm fixiert und verschiebt keinen Inhalt, das CLS bleibt unberührt.
3.3
Nach DSK-Praxis
Erste Ebene: „Ablehnen“ und „Akzeptieren“ in gleicher Größe, darunter „Anpassen“ und ein Link zur Datenschutzerklärung. Kein Schließen-Kreuz: den Banner schließen heißt, eine Wahl treffen. In den Einstellungen ist nichts vorausgewählt. Die Entscheidung wird 182 Tage gespeichert, für Einwilligung und Ablehnung gleichermaßen; ändert sich der Satz an Diensten, wird erneut gefragt.
3.4
Widerruf und Nachweis
Ein Link „Cookie-Einstellungen“ im Footer öffnet die Einstellungen jederzeit. Beim Abschalten von Marketing werden die Pixel-Cookies gelöscht und die Seite neu geladen. Das Entscheidungs-Cookie speichert Konfigurationsversion, Zeitpunkt, eine zufällige Einwilligungs-ID und die gewählten Kategorien.
3.5
Barrierefreiheit
Der Dialog wird Screenreadern angekündigt, der Fokus springt beim Erscheinen auf den Banner, Tab erreicht jeden Button, Esc schließt nicht. Buttons sind auf dem Smartphone mindestens 44 Pixel groß, die Animation ist bei prefers-reduced-motion aus.
3.6
Für die nächsten Websites
Kategorien und Dienste sind Konfiguration mit Filtern, nicht hart codiert. Eine öffentliche JS-API und ein Ereignis am Dokument lassen Theme oder andere Plugins abfragen, wofür Einwilligung vorliegt. Die Texte sind in vier Sprachen übersetzt. Das Plugin hängt nicht am Theme und zieht auf die nächsten Websites des Studios weiter.
04 — Fazit
Ergebnis
Im sauberen Browserprofil vor dem Klick: null Cookies der Website, null externe Anfragen. Nach „Nur notwendige“ lädt der Pixel nicht, auch nach dem Neuladen nicht. Nach „Akzeptieren“ lädt der Pixel, und der Widerruf über den Footer schaltet ihn wieder ab.
LCP und CLS haben sich nach der Installation nicht verändert. Die Datenschutzerklärung beschreibt genau das, was der Banner tatsächlich tut.