Cookie-Banner in Webflow DSGVO-konform einbinden: Der komplette Guide für 2026

Kurz gesagt: Ein Cookie-Banner in Webflow ist erst dann DSGVO-konform, wenn er drei Dinge tut. Er blockiert alle nicht notwendigen Skripte, bis jemand zustimmt. Er bietet „Ablehnen“ genauso einfach an wie „Akzeptieren“. Und er gibt die Entscheidung per Google Consent Mode v2 an Google Analytics und Google Ads weiter. Ein Banner, der nur einen Hinweis anzeigt, während im Hintergrund schon getrackt wird, ist Deko. Und genau das ist der häufigste Fehler.

Hinweis: Dieser Artikel erklärt die technische Umsetzung und ersetzt keine Rechtsberatung. Für die Datenschutzerklärung und Grenzfälle lohnt sich ein Gespräch mit einer Juristin oder einem Juristen.

Braucht meine Webflow-Website überhaupt einen Cookie-Banner?

In den allermeisten Fällen: ja. Sobald du Google Analytics, Google Ads, den Meta Pixel, Hotjar, eingebettete YouTube-Videos oder Google Maps verwendest, kommen Cookies oder ähnliche Technologien zum Einsatz, die nicht technisch notwendig sind. Dafür brauchst du eine aktive Einwilligung, bevor sie geladen werden.

In Österreich ist das in § 165 Abs. 3 TKG 2021 geregelt, der die EU-ePrivacy-Richtlinie umsetzt. Dazu kommt die DSGVO, sobald personenbezogene Daten verarbeitet werden. Die Datenschutzbehörde stellt in ihren FAQ klar: Für alle technisch nicht notwendigen Cookies muss vorher eine Einwilligung eingeholt werden, und Nutzer dürfen dabei nicht in Richtung Zustimmung gedrängt werden.

Keinen Banner brauchst du nur, wenn deine Seite ausschließlich technisch notwendige Cookies setzt, etwa für Formulare oder den Warenkorb, und du keinerlei Tracking, Marketing-Tags oder externe Einbettungen nutzt. Das ist selten.

Hat Webflow keinen eingebauten Cookie-Banner?

Webflow bringt Grundfunktionen mit: In den Site Settings kannst du festlegen, dass Webflows eigenes Tracking erst nach Zustimmung startet, und es gibt JavaScript-Funktionen, um die Einwilligung abzufragen und zu setzen. Ein vollständiges Consent-Management ist das aber nicht.

Was fehlt:

• Automatisches Blockieren von Skripten, die du über Custom Code, Embeds oder den Google Tag Manager einbindest
• Kategorien wie Statistik, Marketing oder externe Medien, die Besucher einzeln wählen können
• Nachweis der Einwilligungen (Consent-Log)
• Google Consent Mode v2 ohne zusätzlichen Code

Für eine saubere Lösung brauchst du deshalb ein Consent-Tool.

Die drei Wege zum Cookie-Banner in Webflow

1. Consent-Management-Plattform (CMP) per Skript

Tools wie Cookiebot, Usercentrics oder CookieHub werden mit einem Skript im Head Code der Seite eingebunden. Sie scannen deine Website automatisch nach Cookies, führen ein Consent-Log, unterstützen Google Consent Mode v2 und bringen Übersetzungen mit.

• Gut für: Websites mit viel Tracking, Google Ads oder mehreren Sprachen.
• Achte auf: Ladezeit und Design. Viele Banner wirken wie ein Fremdkörper, wenn man sie nicht anpasst.

2. Webflow-Marketplace-App

Es gibt Consent-Apps, die direkt im Webflow Designer laufen, zum Beispiel Consent Pro von Finsweet. Der Banner wird im Designer gestaltet und fühlt sich dadurch wie ein Teil der Seite an.

• Gut für: Websites, bei denen das Design im Vordergrund steht und das Tracking überschaubar ist.
• Achte auf: ob die App Consent Mode v2 und Script-Blocking wirklich abdeckt.

3. Eigener Banner mit Custom Code

Du baust den Banner selbst in Webflow und steuerst die Skripte per JavaScript.

• Gut für: sehr spezielle Anforderungen.
• Achte auf: den Aufwand. Consent-Log, Kategorien und Consent Mode musst du selbst umsetzen und warten. Für die meisten Websites lohnt sich das nicht.

Meine Faustregel: Wer Google Ads schaltet oder mehrsprachig ist, fährt mit einer CMP am sichersten. Wer eine schlanke Seite mit wenig Tracking hat, ist mit einer guten Marketplace-App gut bedient.

Schritt für Schritt: Cookie-Banner in Webflow einbinden

Schritt 1: Bestandsaufnahme. Was lädt deine Seite eigentlich?

Öffne deine veröffentlichte Website im Inkognito-Fenster, dann die Entwicklertools (Tab „Anwendung“, Bereich Cookies) und den Netzwerk-Tab. Notiere alles, was beim ersten Laden passiert: Analytics, Ads, Pixel, Fonts, Videos, Karten. Prüfe auch den Custom Code in den Site Settings, in den Page Settings und in Embed-Elementen. Dort verstecken sich die meisten vergessenen Skripte.

Schritt 2: Tool wählen und Kategorien festlegen

Lege fest, welche Kategorien du brauchst. Für die meisten Websites reichen vier: Notwendig (immer aktiv), Statistik, Marketing und Externe Medien.

Schritt 3: Consent-Skript an die richtige Stelle setzen

Das Skript des Consent-Tools gehört in Webflow unter Site Settings → Custom Code → Head Code, und zwar ganz oben, vor allen anderen Tracking-Skripten. Nur so kann es diese rechtzeitig blockieren.

Schritt 4: Skripte blockieren, bis zugestimmt wurde

Das ist der wichtigste Schritt. Es gibt zwei saubere Wege:

• Über den Google Tag Manager: Alle Tags (GA4, Google Ads, Meta Pixel) laufen über GTM und feuern nur, wenn die passende Einwilligung vorliegt. Der Banner ist dann die einzige Instanz, die entscheidet.
• Direkt im Code: Skripte werden so markiert, dass das Consent-Tool sie erst nach Zustimmung ausführt, je nach Tool zum Beispiel über ein eigenes type-Attribut oder eine Kategorie-Zuordnung.

Wichtig: Wenn du GA4 über die native Webflow-Integration und zusätzlich per GTM einbindest, lädst du es doppelt. Entscheide dich für einen Weg.

Schritt 5: Google Consent Mode v2 aktivieren

Wenn du Google Ads oder Google Analytics nutzt, ist das Pflicht. Seit März 2024 verlangt Google den Consent Mode v2 für Nutzer im Europäischen Wirtschaftsraum. Ohne ihn fallen Remarketing-Listen und Teile der Conversion-Messung weg.

Der Consent Mode übermittelt vier Signale an Google: analytics_storage, ad_storage, ad_user_data und ad_personalization. Für Besucher aus der EU stehen alle vier standardmäßig auf „abgelehnt“, bis jemand zustimmt.

Es gibt zwei Varianten:

• Basic: Google-Tags laden erst nach der Zustimmung. Ohne Einwilligung kommt nichts bei Google an.
• Advanced: Google-Tags laden sofort, senden ohne Einwilligung aber nur cookielose Signale. Google nutzt diese, um fehlende Conversions zu modellieren.

Advanced liefert mehr Daten für Google Ads, ist datenschutzrechtlich aber umstrittener, weil schon vor der Zustimmung Daten an Google gehen. Welche Variante passt, solltest du bewusst entscheiden und nicht einfach die Standardeinstellung übernehmen.

Schritt 6: Banner gestalten

• „Ablehnen“ und „Akzeptieren“ gleich groß und gleich auffällig, kein versteckter Ablehnen-Link
• Keine vorausgewählten Häkchen
• Verständliche Sprache statt Juristendeutsch
• Farben, Schrift und Rundungen aus deinem Design übernehmen, damit der Banner nicht wie ein Fremdkörper wirkt
• Per Tastatur bedienbar und mit ausreichend Kontrast. Das ist auch eine Frage der Barrierefreiheit.

Schritt 7: Einstellungen jederzeit änderbar machen

Besucher müssen ihre Entscheidung später widerrufen können. Setze dafür einen Link „Cookie-Einstellungen“ in den Footer, der den Banner wieder öffnet.

Schritt 8: Testen

Öffne die Seite erneut im Inkognito-Fenster und prüfe:

• Vor jeder Auswahl dürfen nur notwendige Cookies gesetzt sein.
• Nach „Ablehnen“ darf kein Tracking laden.
• Nach „Akzeptieren“ müssen GA4 und Ads-Tags feuern. Kontrollieren kannst du das mit dem Vorschaumodus im Tag Manager oder dem Tag Assistant.
• Die Entscheidung bleibt beim Seitenwechsel gespeichert.

Mehrsprachige Websites: Darauf musst du achten

Wenn deine Webflow-Seite mit Localization in mehreren Sprachen läuft, muss auch der Banner mitwechseln. Ein deutscher Banner auf der englischen Seite wirkt nicht nur unprofessionell. Eine Einwilligung, die jemand nicht versteht, ist auch rechtlich wackelig.

• Sprache automatisch erkennen: Die meisten Consent-Tools lesen das lang-Attribut der Seite aus. Prüfe, ob Webflow es pro Sprachversion richtig setzt.
• Alle Texte übersetzen: Banner, Kategorie-Beschreibungen, Einstellungsdialog und den Link zur Datenschutzerklärung der jeweiligen Sprache.
• Eine Einwilligung für alle Sprachen: Wer auf Deutsch zustimmt und auf die englische Seite wechselt, soll nicht noch einmal gefragt werden.

Die 6 häufigsten Fehler

• Tracking lädt vor der Zustimmung. Der Banner erscheint, aber GA4 oder der Meta Pixel feuern trotzdem schon.
• Vergessene Skripte in Embeds. YouTube-Videos, Google Maps oder Buchungs-Widgets laden ungefragt Inhalte von Dritten.
• „Ablehnen“ versteckt. Ein winziger Textlink neben einem großen grünen Button gilt als Nudging.
• Consent Mode fehlt. Der Banner blockiert korrekt, aber Google Ads bekommt keine Signale. Conversions und Remarketing-Listen brechen ein.
• GA4 doppelt eingebunden. Einmal nativ in Webflow, einmal über GTM. Das Ergebnis sind doppelte Daten und eine unklare Blockierung.
• Datenschutzerklärung passt nicht zum Banner. Die Tools im Banner und die Tools in der Datenschutzerklärung müssen übereinstimmen.

Fazit

Ein Cookie-Banner ist schnell eingebaut. Ein funktionierender braucht etwas mehr Sorgfalt. Entscheidend ist nicht, wie der Banner aussieht, sondern was im Hintergrund passiert: Skripte müssen blockiert werden, Google braucht die richtigen Consent-Signale, und mehrsprachige Seiten brauchen einen Banner, der mitwechselt. Wer das einmal sauber aufsetzt, ist rechtlich besser abgesichert und behält gleichzeitig verlässliche Daten für Analytics und Google Ads.

Du nutzt neben dem Banner noch weitere Tools? Im Guide Webflow mit deinen Tools verbinden zeige ich, wie du Make, Zapier, CRM und Newsletter anbindest. Und wenn du gerade von WordPress kommst: Im Migrations-Guide steht, wie du Tracking und Rankings beim Umzug mitnimmst.

Selbst machen oder machen lassen?

Keine Lust, dich selbst durch Tags und Consent-Kategorien zu kämpfen? Ich richte Cookie-Banner, Consent Mode und Tracking für Webflow-Websites ein, auch mehrsprachig. Schreib mir kurz, und wir schauen uns deine Seite gemeinsam an.