Das Wichtigste in Kürze
Ein DSGVO-konformer Cookie-Banner braucht echte Wahlfreiheit — kein vorangekreuztes Häkchen, einen Ablehnen-Button, der genauso sichtbar ist wie Akzeptieren, und kein Tracking-Script, das vor dem Klick lädt. Alles andere ist ein Verstoß, den Behörden und Abmahner aktiv suchen.
Drei Zeilen JavaScript. Mehr braucht es nicht, um eine Website in einen DSGVO-Verstoß 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 prüfen: 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 Änderungen
"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
Nutze diese interaktive Checkliste um sicherzustellen, dass dein Banner konform ist. Noch schneller und vollständiger: threefor.one scanneaut deine ganze Seite in unter 60 Sekunden und findet auch technische Compliance-Probleme, die Checklisten übersehen.
Pflicht
Technisch
0 / 12 erledigt
Cookie-Banner fertig? threefor.one prüft ob der Rest deiner Seite auch stimmt — 19 SEO-Dimensionen, kostenlos.
Jetzt scannen →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 ausschließlich 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
Haeufige Fragen
Brauche ich ueberhaupt einen Cookie-Banner?
Nur wenn deine Seite Cookies oder vergleichbare Speicher-Technologien setzt, die nicht technisch zwingend noetig sind. Reine Funktions-Cookies (Login, Warenkorb) sind erlaubt. Sobald Tracking, Analytics oder Marketing-Cookies dazukommen, brauchst du nach TDDDG eine Einwilligung.
Was ist der Unterschied zwischen DSGVO und TDDDG?
Die DSGVO regelt die Verarbeitung personenbezogener Daten. Das TDDDG (vorher TTDSG) regelt speziell den Zugriff auf Endgeraete des Nutzers, also auch das Setzen von Cookies. Fuer Cookie-Banner gilt zuerst TDDDG, danach greift die DSGVO fuer die Datenverarbeitung.
Darf der Ablehnen-Button schwerer zu finden sein als Akzeptieren?
Nein. Aufsichtsbehoerden und Gerichte werten das als Dark Pattern und damit als ungueltige Einwilligung. Akzeptieren und Ablehnen muessen auf der ersten Ebene gleich sichtbar und gleich einfach erreichbar sein.
Reicht ein reiner Cookie-Hinweis ohne Auswahl?
Nein. Ein reiner Hinweis-Banner ohne aktive Zustimmung ist seit dem EuGH-Urteil 2019 (Planet49) unzulaessig fuer einwilligungspflichtige Cookies. Du brauchst eine aktive Handlung des Nutzers.
Selber bauen oder Tool wie Cookiebot nutzen?
Selber bauen lohnt sich bei einfachen Setups (eine Sprache, drei Cookie-Kategorien) und spart laufende Kosten. Tools lohnen sich bei mehreren Sprachen, vielen Drittanbietern und automatischer Cookie-Erkennung. Fuer KMU mit ueberschaubarem Tracking ist eine eigene Loesung oft sauberer.