Cookie-Banner DSGVO-konform bauen

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

// 01 / 08Was 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.

Consent Flow, Interaktives Diagramm Nutzer öffnet Website → Banner erscheint (vor jedem Cookie) ↓

Alle akzeptieren

Consent Mode: granted ✓
GTM/GA4 laden ✓
localStorage speichert Auswahl

Auswahl speichern

Granular: Statistik/Marketing
Nur ausgewählte Scripts laden
Widerruf jederzeit möglich

Nur Notwendige

Consent Mode: denied
Kein Tracking, keine Cookies
Website weiter nutzbar ✓

Alle drei Optionen müssen gleich sichtbar und gleich einfach erreichbar sein, das ist TDDDG §25.

Flow aufklappen ↓

// 02 / 08Dark 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.

// 03 / 08Google 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.

JavaScript// 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.

// 04 / 08Architektur: Unser Banner im Detail

Der while.chat Cookie-Banner ist eine einzelne JavaScript-Datei ohne externe Abhängigkeiten. Hier die Kernlogik:

Architektur// 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
}

// 05 / 08Checkliste: 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

Echtes Opt-in, Nichts vorausgewählt, aktive Handlung erforderlich Gleichwertige Buttons, Ablehnen genau so sichtbar wie Akzeptieren Banner VOR erstem Cookie, Kein Tracking-Request vor Consent-Klick Granulare Kategorien, Statistik und Marketing einzeln wählbar Transparente Info, Anbieter, Zweck, Laufzeit im Banner oder Detail-Layer Widerruf möglich, Footer-Link oder Icon, so einfach wie Einwilligung Consent dokumentiert, Zeitpunkt, Version, Auswahl nachweisbar Impressum + DSE erreichbar, Banner darf Zugang nicht blockieren

Technisch

Google Consent Mode v2, Default denied vor Script-Laden Consent-Versionierung, Version bumpen bei neuen Tracking-Tools Accessibility, role=dialog, aria-label, Keyboard-Navigation Mobile-responsive, Buttons untereinander auf kleinen Screens

0 / 12 erledigt

◆ Kostenlos testen

Cookie-Banner fertig? threefor.one prüft ob der Rest deiner Seite auch stimmt, 19 SEO-Dimensionen, kostenlos.

Jetzt scannen →

// 06 / 08Quellen

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

TDDDG 2024 PIMS Überblick, e-rechtsanwälte.de

Cookie-Ratgeber, Dr. Thomas Schwenke

// 07 / 08Frequently 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

Prüfe die Website [URL] auf DSGVO-Konformität. Checke: SSL, Impressum, Datenschutzerklärung, Cookie-Banner (Opt-in, gleichwertige Buttons, granulare Auswahl), Tracking vor Consent, Google Fonts extern, Embeds ohne Consent. Für jeden Punkt: Status (OK/PROBLEM/KRITISCH) + konkreter Fix. Priorisierte To-Do-Liste am Ende. Deutsch, kein Juristendeutsch. Kopieren

Datenschutzerklärung generieren

Erstelle eine vollständige Datenschutzerklärung nach Art. 13 DSGVO für folgende Website: - URL: [URL] - Betreiber: [Name, Adresse, E-Mail] - Hosting: [Anbieter, Land] - Analytics: [z.B. Google Analytics 4, Measurement-ID] - Cookie-Tools: [z.B. eigener Banner, Cookiebot] - Formulare: [Kontaktformular, Newsletter mit Double-Opt-in] - Fonts: [lokal gehostet / Google Fonts CDN] - Embeds: [YouTube, Google Maps, Social Buttons] - Payment: [Stripe, PayPal, keins] Für jeden Dienst: Anbieter + Adresse, erfasste Daten, Zweck, Rechtsgrundlage (Art. 6 DSGVO), Speicherdauer, Drittlandtransfer mit Garantien. Betroffenenrechte einzeln mit Artikel-Nummern. Aufsichtsbehörde mit Kontaktdaten. Sprache: verständliches Deutsch. Aktueller Rechtsstand 2026 (TDDDG statt TTDSG). Kopieren

Cookie-Banner Code generieren

Erstelle einen DSGVO- und TDDDG-konformen Cookie-Consent-Banner als Vanilla JavaScript (kein Framework, keine externe Abhängigkeit). Anforderungen: - Granulare Kategorien: Notwendig (immer aktiv), Statistik, Marketing - Keine vorausgewählten Checkboxen - 3 gleichwertige Buttons: "Nur Notwendige", "Auswahl speichern", "Alle akzeptieren" - Detail-Layer mit Cookie-Tabelle (Name, Anbieter, Zweck, Laufzeit) - Google Consent Mode v2 (default denied, update auf granted) - Consent in localStorage speichern (Zeitpunkt, Version, Auswahl) - Footer-Link "Cookie-Einstellungen" für Widerruf - Scripts erst NACH Consent laden (kein Tracking vor Klick) - Tracking-IDs: GTM [GTM-ID], GA4 [GA4-ID] - Design: [Dark/Light], passend zu [Farbschema] - Mobile-responsive, accessible (role=dialog, aria-label) Kopieren

Cookie-Audit einer Website

Führe einen Cookie-Audit für [URL] durch. Ich will wissen: 1. Welche Cookies werden gesetzt BEVOR ich auf "Akzeptieren" klicke? (→ Verstoß) 2. Welche Cookies nach Consent? (→ müssen in Datenschutzerklärung stehen) 3. Welche Drittanbieter-Requests gehen raus? (→ Drittlandtransfer?) 4. Ist der Cookie-Banner konform? (gleichwertige Buttons, granular, kein Dark Pattern) 5. Stimmt die Datenschutzerklärung mit den tatsächlichen Cookies überein? Erstelle eine Tabelle: Cookie-Name | Anbieter | Kategorie | Vor/Nach Consent | In DSE dokumentiert? Kopieren

Impressum prüfen

Prüfe dieses Impressum auf Vollständigkeit nach TMG/DDG: [IMPRESSUM-TEXT HIER EINFUEGEN] Check: Name/Firma, Adresse, E-Mail, Telefon, Handelsregister (falls Firma), USt-IdNr (falls vorhanden), Vertretungsberechtigte, Berufsrechtliche Angaben (falls regulierter Beruf). Was fehlt? Was ist falsch? Korrigierte Version ausgeben. Kopieren

AVV-Check Dienstleister

Ich nutze folgende Dienste auf meiner Website: [Liste: z.B. Vercel Hosting, Google Analytics 4, Mailchimp Newsletter, Stripe Payment]. Für welche brauche ich einen Auftragsverarbeitungsvertrag (AVV) nach Art. 28 DSGVO? Wo finde ich den AVV bei jedem Anbieter (direkter Link wenn möglich)? Welche sind Auftragsverarbeiter, welche eigenständige Verantwortliche? Kopieren

// 08 / 08Häufige Fragen

// micro-journal

Würde dein eigener Cookie-Banner einen ehrlichen Konformitäts-Check bestehen?

Ein Satz reicht. Das Journal bleibt lokal in deinem Browser — kein Konto, kein Server.

notierenMG

Max Götte

SEO Strategist · Founder · while.chat

SEO-Berater aus Bochum. Spezialisiert auf technisches SEO, Local SEO und Generative Engine Optimization für KMU im DACH-Raum. Von Audit über Content-Strategie bis Local SEO, evidenzbasiert, ohne Hype-Versprechen.

projekt anfragen → WhatsApp mehr Artikel