Cookie-Banner Generator — DSGVO-Banner mit Google Consent Mode v2

Füge jeder Website – Webflow, WordPress, Shopify oder reinem HTML – ein Cookie-Banner hinzu, ganz ohne kostenpflichtiges Plugin. Wähle Layout, Texte, Farben und Cookie-Kategorien und erhalte einen schlanken Snippet mit den Buttons Alle akzeptieren, Alle ablehnen und Einstellungen. Er merkt sich die Auswahl, Besucher können sie später ändern, und er sendet die passenden Signale an Google Consent Mode v2 für Analytics und Ads.

Aktualisiert am

Vorschau

1. Im <head>, vor deinem Google-Tag

2. Vor </body> — der Banner

3. Deine übrigen Tags bis zur Einwilligung blockieren

Füge die Tracking-Tags ein, die du bereits nutzt – Google Analytics, Meta Pixel, Hotjar, LinkedIn, TikTok, Chat-Widgets, YouTube-Einbettungen … Jeder wird einer Kategorie zugeordnet, die du ändern kannst. Notwendige Tags laufen wie gewohnt (deine Allow-Liste); alle anderen werden blockiert, bis der Besucher ihre Kategorie akzeptiert.

Konvertierte Tags — verwende diese anstelle deiner Originale

In Webflow füge ein Embed-Element hinzu (oder nutze Site-Einstellungen → Custom Code) und füge den Code ein; in WordPress verwende einen Benutzerdefiniertes HTML-Block. Verlinke im Footer einen Punkt „Cookie-Einstellungen“ auf #cookie-settings, damit Besucher ihre Auswahl ändern können.

Deine Daten verlassen nie deinen Computer. Die Verarbeitung erfolgt zu 100 % lokal im Browser.

So nutzt du: Cookie-Banner Generator

  1. Wähle das Layout – eine Leiste, eine Box in der Ecke oder einen zentrierten Dialog – und passe Titel, Nachricht und Button-Beschriftungen an.
  2. Lass Einstellungen aktiviert, damit Besucher Kategorien (Analytics, Marketing, Präferenzen) wählen können, und verlinke deine Datenschutzerklärung.
  3. Lass Google Consent Mode v2 aktiviert, wenn du Google Analytics oder Ads nutzt: Füge Snippet 1 im <head> vor deinem Google-Tag ein.
  4. Füge Snippet 2 vor </body> ein und ergänze im Footer einen Link „Cookie-Einstellungen“ auf #cookie-settings.

Was der Banner macht

  • Er erscheint beim ersten Besuch und speichert die Entscheidung des Besuchers im localStorage (kein Cookie) für die von dir festgelegte Anzahl an Tagen.
  • Alle akzeptieren, Alle ablehnen und Einstellungen – Ablehnen geht mit einem Klick und ist genauso sichtbar wie Akzeptieren, was die DSGVO von dir erwartet.
  • Jeder Link auf #cookie-settings öffnet die Einstellungen erneut, damit Besucher ihre Meinung jederzeit ändern können.
  • Blockiert deine übrigen Tags bis zur Einwilligung: Skripte mit type="text/plain" data-cookie-category="analytics" (oder marketing, preferences) und iframes mit data-src laufen erst, nachdem der Besucher die jeweilige Kategorie akzeptiert hat. Wird die Einwilligung widerrufen, lädt die Seite neu, damit die Tags stoppen.
  • Er löst ein cookie-consent-Event auf document mit den Entscheidungen aus, sodass du weitere Skripte erst nach der Einwilligung laden kannst.

Google Consent Mode v2

Snippet 1 setzt alle Google-Consent-Signale – ad_storage, ad_user_data, ad_personalization und analytics_storage – auf verweigert, bevor dein Google-Tag lädt. Entscheidet sich der Besucher, aktualisiert der Banner die Signale: Analytics setzt analytics_storage, Marketing setzt die drei Ads-Signale. Google Analytics erfasst dann vollständige Daten nur bei Besuchern, die zugestimmt haben, und für alle anderen nur cookielose Pings. Seit März 2024 verlangt Google Consent Mode v2 für die Ads-Messung von Besuchern im Europäischen Wirtschaftsraum.

Dies ist ein technisches Werkzeug und keine Rechtsberatung: Liste in deiner Datenschutzerklärung die Cookies auf, die du tatsächlich verwendest, und prüfe, was in deinem Land vorgeschrieben ist. Verwandt: Tracking-Tag-Checker, Meta-Tag-Generator.

Auch gesucht als: cookie banner erstellen, dsgvo cookie banner, cookie consent code, google consent mode v2, cookie popup html, cookie banner kostenlos, cookie hinweis generator.

Passende Tools zu: Cookie-Banner Generator

  • CSP-Generator — Wähle aus, was deine Seite lädt – Scripts, Styles, Bilder, Fonts, Analytics, Embeds – und erhalte eine Content-Security-Policy, die genau das erlaubt, mit Warnungen bei riskanten Einstellungen.
  • SEO-Check & Website-Audit — Füge eine URL ein, um bis zu 70 On-Page-SEO-Prüfungen sowie ein vollständiges Website-Audit durchzuführen: Lighthouse-Geschwindigkeit, Sicherheits-Header & SSL, strukturierte Daten, defekte Links, robots.txt & KI-Crawler, Grundlagen der Barrierefreiheit, Tracking & Einwilligung, SPF/DKIM/DMARC und Ablauf der Domain – zusammengefasst in einem Website-Score mit priorisierten Korrekturvorschlägen.
  • HTML & CSS zu Webflow — Füge HTML und das passende CSS ein, klicke auf Copy to Webflow und füge im Designer ein.
  • Email-Header-Analyzer — Füge die rohen Header einer E-Mail ein, um ihren gesamten Weg zu sehen: jeden Server-Hop mit der benötigten Zeit, die SPF-, DKIM- und DMARC-Ergebnisse, die ursprüngliche IP und Warnzeichen wie ein abweichendes Reply-To oder Return-Path.

Häufige Fragen

Wie füge ich einen Cookie-Banner in Webflow hinzu?
Füge Snippet 1 unter Site-Einstellungen → Custom Code → Head (vor deinem Google-Tag) ein und Snippet 2 im Feld Footer-Code, dann veröffentliche die Seite. Ergänze einen Footer-Link auf #cookie-settings, damit Besucher den Banner erneut öffnen können.
Blockiert er Google Analytics bis zur Einwilligung?
Mit Consent Mode v2 lädt Google Analytics, speichert aber keine Cookies, bis der Besucher Analytics akzeptiert – es sendet nur cookielose Signale. Damit andere Skripte komplett außen vor bleiben, lade sie in einem Listener für das Event cookie-consent.
Ist ein Ablehnen-Button Pflicht?
Nach der DSGVO muss das Ablehnen genauso einfach sein wie das Akzeptieren, und mehrere EU-Aufsichtsbehörden haben Seiten bestraft, die die Ablehnen-Option versteckt haben. Der Generator platziert Ablehnen standardmäßig neben Akzeptieren mit gleichem Gewicht.
Kann er Skripte bis zur Einwilligung blockieren?
Ja. Füge deine Tags in Schritt 3 ein: Jeder bekommt type="text/plain" und ein data-cookie-category, sodass der Browser sie nicht ausführt. Der Banner aktiviert sie, sobald der Besucher die jeweilige Kategorie akzeptiert, während notwendige Tags wie eine Allow-Liste weiterlaufen. iframes wie YouTube-Einbettungen warten auf die gleiche Weise mit data-src.
Wo wird die Auswahl gespeichert?
Im Browser des Besuchers (localStorage), zusammen mit einer Version und einem Datum. So erscheint der Banner nach dem von dir festgelegten Zeitraum erneut oder wenn du die Version änderst.
Kann ich Cookie-Banner Generator als Web-App installieren und offline nutzen?
Ja. Cookie-Banner Generator ist eine installierbare Web-App (PWA) – sie wird über Ihren Browser installiert und nicht aus einem App-Store heruntergeladen. Klicken Sie oben auf dieser Seite in Chrome oder Edge (Windows, macOS, Linux, ChromeOS) auf „App installieren“ oder verwenden Sie auf Android-Geräten „Teilen“ → „Zum Startbildschirm hinzufügen“ auf dem iPhone und iPad bzw. „Datei“ → „Zum Dock hinzufügen“ in Safari 17+ auf einem Mac. Die App öffnet sich dann in einem eigenen Fenster mit einem eigenen Symbol, und da sie vollständig in Ihrem Browser ausgeführt wird, funktioniert sie auch offline. Firefox auf dem Desktop kann keine Web-Apps installieren. So funktioniert die Installation.

Ähnliche Tools