Drei Zeilen JavaScript. Mehr braucht es nicht, um eine Website in einen DSGVO-Verstoss zu verwandeln. Ein Google Analytics Script im Head, ein Meta Pixel im Body, ein YouTube-Embed im Content — und schon werden personenbezogene Daten an Server in den USA übertragen. Ohne Einwilligung. Ohne Rechtsgrundlage.
Die Lösung heißt Cookie-Consent-Banner. Aber nicht irgendeiner. Die meisten Banner, die auf deutschen Websites im Einsatz sind, sind selbst nicht rechtskonform — weil sie ein riesiges "Alles akzeptieren" neben einem winzigen "Einstellungen"-Link zeigen. Oder weil sie Tracking-Scripts schon laden, bevor der Nutzer überhaupt geklickt hat.
Dieser Artikel zeigt, wie ein wirklich DSGVO- und TDDDG-konformer Cookie-Banner funktioniert — anhand des Banners, den wir für while.chat gebaut haben. Mit vollständigem Code, Erklärung jeder Entscheidung und einem Prompt, mit dem du deinen eigenen Banner generieren lassen kannst.
Was das Gesetz verlangt
§ 25 Abs. 1 TDDDG ist eindeutig: Die Speicherung von Informationen auf dem Endgerät oder der Zugriff darauf ist nur zulässig, wenn der Nutzer auf Grundlage klarer und umfassender Informationen eingewilligt hat. Die einzige Ausnahme (§ 25 Abs. 2): technisch unbedingt erforderliche Cookies — Warenkorb, Session, Consent-Speicherung selbst.
Die 7 Pflichten eines Cookie-Banners
1. Echtes Opt-in — keine vorausgewählten Boxen, keine Pauschal-Einwilligung
2. Gleichwertige Buttons — "Akzeptieren" und "Ablehnen" gleich sichtbar und gross
3. Granulare Auswahl — Kategorien einzeln wählbar, nicht alles-oder-nichts
4. Vor dem ersten Cookie — Banner muss vor jedem nicht-notwendigen Cookie erscheinen
5. Transparente Information — Welche Cookies, von wem, wozu, wie lange
6. Einfacher Widerruf — So einfach wie die Einwilligung selbst
7. Dokumentation — Zeitpunkt und Umfang der Einwilligung nachweisbar
Dark Patterns: Was nicht geht
Die Datenschutzkonferenz der Länder, Verbraucherzentralen und Gerichte haben wiederholt klargestellt, welche Banner-Designs gegen die DSGVO verstossen.
Dark Pattern 1: Farbmanipulation
"Alle akzeptieren" als großer, grüner Button. "Nur notwendige" als grauer, kleiner Text darunter. Die visuelle Hierarchie lenkt den Nutzer zur Einwilligung — das ist keine freie Entscheidung.
Dark Pattern 2: Versteckte Ablehnung
"Akzeptieren" auf der ersten Ebene, "Ablehnen" erst nach Klick auf "Einstellungen" → scrollen → "Auswahl speichern". Zwei Klicks vs. einen = nicht gleichwertig.
Dark Pattern 3: Nudging durch Wortwahl
"Erleben Sie unsere Website in vollem Umfang" neben "Eingeschränkte Version nutzen". Die Formulierung suggeriert einen Nachteil bei Ablehnung — das ist Manipulation.
Dark Pattern 4: Cookie-Wall
"Akzeptieren Sie Cookies oder verlassen Sie die Seite." Cookies dürfen keine Voraussetzung für die Website-Nutzung sein — der Zugang muss auch ohne Consent möglich sein.
So geht's richtig
Drei Buttons gleicher Grösse auf einer Ebene: "Nur Notwendige" | "Auswahl speichern" | "Alle akzeptieren". Keine Farbmanipulation, keine versteckten Optionen. Der Nutzer entscheidet frei.
Detail-Layer
Button "Details anzeigen" führt zu einer Tabelle mit Cookie-Name, Anbieter, Zweck, Laufzeit, Kategorie. Plus Rechtsgrundlage und Datenempfänger. Transparenz ohne Überforderung.
Google Consent Mode v2
Seit März 2024 verlangt Google den Consent Mode v2 für alle Websites, die Google Ads oder GA4 nutzen. Der Consent Mode teilt Google mit, ob der Nutzer eingewilligt hat — und Google passt die Datenerhebung entsprechend an.
Ohne Consent: Google sammelt keine personenbezogenen Daten, setzt keine Cookies, führt aber cookielose Pings durch (sogenannte "Modeling"). Mit Consent: volle Datenerhebung inklusive Cookies.
// Default: alles denied BEVOR irgendein Google-Script laedt
gtag('consent', 'default', {
analytics_storage: 'denied',
ad_storage: 'denied',
ad_user_data: 'denied',
ad_personalization: 'denied',
wait_for_update: 500
});
// Nach Consent-Klick: granular pro Kategorie updaten
gtag('consent', 'update', {
analytics_storage: consent.statistik ? 'granted' : 'denied',
ad_storage: consent.marketing ? 'granted' : 'denied',
ad_user_data: consent.marketing ? 'granted' : 'denied',
ad_personalization: consent.marketing ? 'granted' : 'denied'
});
Der entscheidende Punkt: Die Default-Einstellung muss vor dem Laden von GTM oder GA4 gesetzt werden. Unser Banner setzt den Default als Erstes, ladt die Google-Scripts erst nach dem Consent-Update.
Architektur: Unser Banner im Detail
Der while.chat Cookie-Banner ist eine einzelne JavaScript-Datei ohne externe Abhängigkeiten. Hier die Kernlogik:
// 1. Google Consent Mode Default setzen (denied)
// 2. localStorage pruefen: Hat der User schon entschieden?
// → Ja + gleiche Version: Consent anwenden, kein Banner
// → Nein oder andere Version: Banner zeigen
// 3. Banner rendern: 3 Buttons + Kategorie-Checkboxen
// 4. Bei Klick: Consent in localStorage speichern
// → Consent Mode updaten
// → GTM/GA4 Scripts dynamisch in DOM injizieren
// 5. Footer-Link "Cookie-Einstellungen" injizieren
Consent-Daten in localStorage:
{
"v": "3", // Version — bumpen bei Aenderungen
"ts": "2026-03-22...", // Zeitstempel
"statistik": true, // GA4 erlaubt
"marketing": false // Ads/GTM nicht erlaubt
}
Warum Consent-Versionierung wichtig ist
Wenn du ein neues Tracking-Tool hinzufügst (z.B. Meta Pixel), musst du die Version hochzählen. Alle Besucher sehen dann den Banner erneut, weil die alte Consent-Version nicht mehr gültig ist. So stellst du sicher, dass die Einwilligung immer zum aktuellen Stand passt.
Checkliste: Cookie-Banner
Pflicht
Technisch
0 / 12 erledigt
Quellen
Rechtsgrundlagen
§ 25 TDDDG — Cookie-Einwilligung
IHK Köln — Regeln für Cookies nach TDDDG
Dark Patterns & Urteile
Aufsichtsbehörde erklärt viele Cookie-Banner für rechtswidrig
TDDDG Cookie-Einwilligung — Cortina Consult
Technisch
Google Consent Mode v2 — Offizielle Docs
Wichtiger Hinweis
Dieser Artikel dient ausschliesslich der allgemeinen Information und ersetzt keine Rechtsberatung. Die Inhalte wurden sorgfältig recherchiert, erheben aber keinen Anspruch auf Vollständigkeit oder Aktualität. Führe immer eine eigene Recherche durch und ziehe bei Unsicherheiten einen auf Datenschutzrecht spezialisierten Rechtsanwalt hinzu. Für die Richtigkeit der Angaben wird keine Haftung übernommen.
Frequently Asked Prompts
Kopiere diese Prompts direkt in Claude, ChatGPT oder ein anderes LLM. Ersetze die Platzhalter in eckigen Klammern mit deinen eigenen Daten.
DSGVO Quick-Check
Datenschutzerklärung generieren
Cookie-Banner Code generieren
Cookie-Audit einer Website
Impressum prüfen
AVV-Check Dienstleister