Webflow Cookie Banner: DSGVO-konform einrichten, Schritt für Schritt

Was die Cookie-Einwilligung auf Webflow rechtlich verlangt

Die Regeln hängen nicht vom Werkzeug ab, mit dem Ihre Website gebaut wurde. Wird Ihre Webflow-Website aus der Europäischen Union aufgerufen, gelten die ePrivacy-Richtlinie (für Cookies) und die DSGVO (für personenbezogene Daten). In Deutschland setzt § 25 TDDDG die Cookie-Regeln um, und die Datenschutzkonferenz (DSK) hat dazu eine Orientierungshilfe veröffentlicht. Der Kern ist kurz: Jedes Cookie und jede vergleichbare Technik, die für den vom Besucher gewünschten Dienst nicht unbedingt erforderlich ist, braucht eine vorherige, informierte und freiwillige Einwilligung.

In der Praxis muss ein konformes Cookie-Banner auf Webflow fünf Dinge leisten:

• nicht notwendige Skripte vor der Einwilligung blockieren, statt nur eine Meldung darüber anzuzeigen;
• Akzeptieren und Ablehnen gleichwertig auf der ersten Ebene anbieten, wie es die Aufsichtsbehörden und der EDSA fordern;
• eine Auswahl nach Zwecken ermöglichen (Statistik, Marketing, Präferenzen) und den späteren Widerruf erlauben;
• einen Nachweis jeder Entscheidung speichern (was angezeigt wurde, was gewählt wurde, wann);
• Einwilligungssignale über Consent Mode v2 an Google senden, wenn Sie Google Analytics oder Google Ads nutzen.

Die allgemeinen Regeln hinter jedem Punkt erklärt unser Leitfaden zum DSGVO-konformen Cookie-Banner. Dieser Artikel zeigt, wie Sie sie in Webflow umsetzen.

Wer ist auf einer Webflow-Website verantwortlich?

Sie. Als Betreiber entscheiden Sie, welche Werkzeuge auf Ihren Seiten laufen, und sind damit Verantwortlicher für die Daten, die sie erheben. Webflow handelt als Hosting-Anbieter und Auftragsverarbeiter. Google, Meta oder HubSpot sind je nach Werkzeug Auftragsverarbeiter oder eigenständig Verantwortliche. Die Aufsichtsbehörden akzeptieren „das macht der Website-Baukasten“ nicht als Ausrede: Die Pflicht liegt bei dem, der die Website veröffentlicht, ob sie auf Webflow, WordPress oder Shopify läuft.

Welche Cookies setzt eine Webflow-Website?

Bevor Sie ein Banner wählen, müssen Sie wissen, was es kontrollieren soll. Eine Webflow-Website hat drei Ebenen von Cookies und Trackern.

Was Webflow standardmäßig setzt

Eine Webflow-Website ohne Drittanbieter-Werkzeuge setzt sehr wenig: technische Cookies für Sicherheit, Formularversand und, falls genutzt, für Login-Bereiche und den Ecommerce-Warenkorb. Sie gelten in der Regel als unbedingt erforderlich und sind von der Einwilligung ausgenommen, vorbehaltlich einer Prüfung im Einzelfall. Wenn Ihre Website wirklich nichts anderes nutzt, lesen Sie unsere Analyse, ob ein Webflow Cookie Banner ohne Analytics nötig ist: Die Antwort hängt mehr von Einbettungen, Schriften und Formularen ab als von Statistik-Tools.

Was Sie über Custom Code und Integrationen hinzufügen

Hier entstehen fast alle Einwilligungspflichten. Google Analytics 4, Google Ads, das Meta-Pixel, LinkedIn Insight Tag, HubSpot, Intercom, Hotjar, Clarity oder Mixpanel setzen eigene Cookies oder Kennungen, und alle brauchen eine vorherige Einwilligung. Ordnen Sie jedes Werkzeug einer der vier DSGVO-Cookie-Kategorien zu, damit Ihr Banner sie richtig gruppiert.

Webflow-spezifische Quellen, die oft vergessen werden

Manche Tracker gelangen über leicht übersehene Wege in eine Webflow-Website:

• Site settings → Apps & Integrations: Eine dort eingetragene Google-Analytics-Mess-ID wird von Webflow selbst eingefügt, oberhalb Ihres Custom Codes. Mehr zu dieser Falle weiter unten.
• Code-Embed-Elemente in Seiten, CMS-Vorlagen und Komponenten: YouTube, Vimeo, Google Maps, Calendly, Typeform oder Chat-Widgets. Jedes davon kann beim Laden Cookies setzen. Für Videos lesen Sie unseren Leitfaden zu YouTube nocookie und Videos ohne Cookies.
• Custom Code auf Seitenebene, in den Einstellungen einer Seite hinterlegt, den ein globales Audit übersehen kann.
• Google Fonts von Googles Servern. Sie setzen keine Cookies, übermitteln aber bei jedem Seitenaufruf die IP-Adresse an Google, und kein Banner behebt das. Siehe das Google-Fonts-Risiko auf Webflow.
• Interaktionen oder Skripte, die Ereignisse beim Scrollen oder Klicken an Drittanbieter senden.

Am schnellsten sehen Sie, was Ihre veröffentlichte Website wirklich tut, mit einem Scan. Prüfen Sie in 30 Sekunden mit dem kostenlosen Cookie-Scanner, welche Cookies Ihre Webflow-Website setzt, auf Ihrer eigenen Domain statt auf der webflow.io-Subdomain.

Webflow Cookie Banner: die Lösungen im Vergleich

Wer nach „Webflow Cookie Banner“ sucht, findet vier Arten von Lösungen. Sie sind nicht gleichwertig: Entscheidend ist, ob sie Skripte wirklich blockieren und einen Nachweis speichern.

Ein im Designer gestaltetes Banner

Klonbare „DSGVO-Cookie-Banner“ sind im Webflow-Showcase beliebt. Sie sehen gut aus und passen zu Ihrem Design, sind für sich allein aber nur ein visuelles Element: Sie zeigen eine Meldung und verschwinden beim Klick. Google Analytics oder ein Pixel laden trotzdem. Ohne Skriptebene, die Tags zurückhält und freigibt, informieren sie, ohne zu schützen.

Finsweet Cookie Consent

Die attributbasierte Lösung von Finsweet ist in der Webflow-Community weit verbreitet. Sie gestalten das Banner im Designer und kennzeichnen Skripte mit Attributen, damit sie erst nach der Einwilligung laufen. Richtig verdrahtet, leistet sie eine grundlegende Blockierung. Prüfen Sie, was Sie darüber hinaus brauchen: ein zeitgestempeltes Protokoll jeder Einwilligung, Consent Mode v2 für Google Ads, eine automatische Cookie-Liste und eine Überwachung liefert eine reine Frontend-Bibliothek nicht von selbst.

Apps aus dem Webflow Marketplace

Mehrere Consent-Apps lassen sich aus dem Webflow-Apps-Marketplace installieren, etwa Consentbit oder Consent Pro. Sie sind auf Webflow zugeschnitten und schnell eingerichtet. Vergleichen Sie sie nach denselben Kriterien wie jede CMP: wirksame Blockierung, Nachweis, Consent Mode v2, Sprachen und Preis pro Website. Unsere Vergleiche Consentbit vs FlowConsent und Consent Pro vs FlowConsent gehen diese Punkte durch.

Eine allgemeine CMP mit Webflow-Snippet

Falls der Begriff neu für Sie ist, lesen Sie zuerst, was eine Consent-Management-Plattform ist. Plattformen wie Usercentrics, Cookiebot, CookieHub oder FlowConsent funktionieren auf jeder Website und liefern ein Snippet für den Head code von Webflow. Sie erhalten Skriptblockierung, Einwilligungsnachweis, Cookie-Scan und Consent Mode v2 in einem Werkzeug, mit derselben Einrichtung, falls Sie auch Websites auf anderen Plattformen betreiben. Siehe Usercentrics vs FlowConsent, Cookiebot vs FlowConsent oder alle Vergleiche.

So wählen Sie aus

Egal welche Art, stellen Sie fünf Fragen: Blockiert sie Skripte und Einbettungen vor der Einwilligung, speichert sie einen exportierbaren Nachweis, sendet sie Consent-Mode-v2-Signale, unterstützt sie die Sprachen Ihrer Webflow-Localization-Einrichtung, und was kostet sie bei Ihrem Traffic? Unser Leitfaden zur Auswahl einer CMP erklärt jedes Kriterium. Wenn Sie bereits für ein Banner zahlen, vergleichen Sie vor der Verlängerung die Kosten Ihrer aktuellen CMP mit dem CMP-Preisvergleich.

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

Die folgenden Schritte gelten für jede CMP. Wo ein Detail FlowConsent betrifft, steht es dabei.

Schritt 1: alle Tracker der Website erfassen

Öffnen Sie Site settings → Custom code und kopieren Sie den Inhalt von Head code und Footer code. Öffnen Sie dann Apps & Integrations und notieren Sie jede Tracking-ID. Gehen Sie die Seiteneinstellungen nach seitenbezogenem Code durch und suchen Sie im Designer nach Code-Embed-Elementen in Seiten, CMS-Vorlagen und Komponenten. Gleichen Sie diese Liste mit einem Scan der veröffentlichten Website ab: Der Scan zeigt, was tatsächlich lädt, auch was ein Werkzeug seinerseits nachlädt. Unsere Methode für das Cookie-Audit erklärt das Vorgehen.

Schritt 2: prüfen, ob Ihr Webflow-Plan Custom Code erlaubt

Websiteweiter Custom Code ist in den kostenpflichtigen Site-Plänen verfügbar. Läuft Ihre Website noch im kostenlosen Plan, können Sie kein CMP-Snippet in den Head code einfügen und müssen zuerst upgraden.

Schritt 3: das CMP-Snippet als Erstes in den Head code einfügen

Fügen Sie in Site settings → Custom code → Head code das CMP-Snippet ganz oben ein, vor Google Tag Manager, GA4 oder jedem Pixel. Die Reihenfolge zählt: Die CMP und ihre Standardwerte für die Einwilligung müssen vor den Skripten stehen, die sie steuern. Code auf Websiteebene läuft auf allen Seiten, auch auf CMS-Vorlagen und Ecommerce-Seiten; Code nur auf Seitenebene würde Lücken lassen.

Bei FlowConsent erzeugt der Webflow-Tab unter Builder → Deployment → Integration das Snippet. Es besteht aus zwei Teilen: einem Inline-Stub für Consent Mode, der die vier Google-Signale schon beim Parsen der Seite auf „denied“ setzt, und danach dem Loader des Banners. Behalten Sie diese Reihenfolge bei.

Schritt 4: die Google-Analytics-ID aus Apps & Integrations entfernen

Das ist die häufigste Webflow-Falle. Ist in Site settings → Apps & Integrations eine Google-Analytics-Mess-ID eingetragen, fügt Webflow seinen eigenen GA-Loader oberhalb Ihres Custom Codes ein. Die GA-Konfiguration erreicht Google dann vor Ihren Standardwerten, und Statistik-Cookies werden unabhängig von der Entscheidung des Besuchers gesetzt. Keine CMP kann dieses Rennen aus dem Custom Code heraus gewinnen. Die Lösung: die ID aus diesem Bereich löschen und Google Analytics stattdessen in Ihrer CMP hinterlegen, damit es erst nach der Einwilligung geladen wird. Für die übrigen GA4-Einstellungen lesen Sie, ob Google Analytics DSGVO-konform ist.

Schritt 5: jedes nicht notwendige Skript hinter die Einwilligung stellen

Nehmen Sie jeden Tracker aus dem reinen Custom Code und lassen Sie die CMP ihn freigeben. Je nach Werkzeug gibt es drei Muster:

• die CMP fügt das Skript nach der Einwilligung selbst ein (bei FlowConsent aktivieren Sie den Dienst unter Builder → Services und fügen sein Skript dort ein);
• das Skript bleibt im Custom Code von Webflow, aber sein Typ wird geändert, sodass der Browser es ignoriert, bis die CMP es aktiviert;
• das Skript ist ein Tag in Google Tag Manager, das nur feuert, wenn die passende Einwilligung erteilt ist. Unser Leitfaden zu Google Tag Manager und Consent Mode v2 erklärt die Trigger.

Schritt 6: Einbettungen sperren

YouTube, Vimeo, Karten und Buchungs-Widgets aus Code-Embed-Elementen dürfen vor der Einwilligung nicht laden. Ersetzen Sie sie durch einen Platzhalter, der den iframe nach der Zustimmung lädt (die bekannte Zwei-Klick-Lösung), oder überlassen Sie das Ihrer CMP. Bei FlowConsent ergänzen Sie die Einbettung um ein data-service-Attribut, damit das Banner sie bis zur Zustimmung zurückhält.

Schritt 7: Google Consent Mode v2 konfigurieren

Wenn Sie Google Analytics oder Google Ads nutzen, erwartet Google für Traffic aus dem Europäischen Wirtschaftsraum Einwilligungssignale. Prüfen Sie, dass vor jedem Google-Tag denied-Standardwerte gesendet werden und dass nach der Entscheidung ein Update folgt. Unser Leitfaden zu Google Consent Mode v2 erklärt Basic- und Advanced-Modus.

Schritt 8: Banner an Website und Sprachen anpassen

Übernehmen Sie Schriften und Farben der Website, geben Sie Akzeptieren und Ablehnen das gleiche visuelle Gewicht und vermeiden Sie die Dark Patterns, die Behörden sanktionieren. Nutzen Sie Webflow Localization mit Sprachordnern wie /de oder /fr, stellen Sie das Banner so ein, dass es die Sprache aus der URL erkennt und jede Version den richtigen Text zeigt. Verlinken Sie Ihre Cookie-Richtlinie im Banner und im Footer.

Schritt 9: veröffentlichen

Custom Code geht erst mit dem Veröffentlichen live. Die Vorschau im Designer führt ihn nicht aus: Nichts, was Sie dort sehen, beweist, dass das Banner funktioniert.

So testen Sie Ihren Webflow Cookie Banner

Testen Sie auf der eigenen Domain, nicht auf der Staging-Subdomain webflow.io: Domains, Cookies und manche Integrationen verhalten sich dort anders.

1. Öffnen Sie ein privates Fenster mit den Entwicklertools auf den Tabs Network und Application.
2. Laden Sie die Startseite, ohne das Banner zu berühren. Keine Anfrage darf an google-analytics.com, facebook.net, hotjar.com oder Ähnliches gehen, und kein nicht notwendiges Cookie darf erscheinen.
3. Klicken Sie auf Ablehnen. Rufen Sie einige Seiten auf, darunter eine CMS-Vorlage und eine Seite mit Video. Nichts Nicht-Notwendiges darf laden.
4. Löschen Sie die Website-Daten, akzeptieren Sie nur Statistik und prüfen Sie, dass nur diese Werkzeuge laden.
5. Akzeptieren Sie alles und prüfen Sie, dass jedes Werkzeug funktioniert.
6. Öffnen Sie das Banner über den Link im Footer erneut und widerrufen Sie die Einwilligung.
7. Wiederholen Sie den Test auf dem Smartphone.

Manuelle Tests finden die Probleme von heute, nicht die von morgen. Wer das Google-Analytics-Feld wieder aktiviert oder ein neues Pixel in den Footer code einfügt, öffnet das Leck erneut. Die Compliance-Prüfung von FlowConsent lädt Ihre veröffentlichten Seiten in einem echten Browser, lehnt die Einwilligung ab und listet alles auf, was trotzdem feuert, einschließlich eines Tags aus den Webflow-Einstellungen. Die regelmäßige Compliance-Überwachung wiederholt diese Prüfung und warnt Sie, sobald eine Seite zurückfällt.

Formulare in Webflow und DSGVO

Formulare sind die andere Hälfte von „DSGVO auf Webflow“, und das Cookie-Banner deckt sie nicht ab. Ein Webflow-Formular, das Namen oder E-Mail-Adressen erhebt, verarbeitet personenbezogene Daten. Deshalb sollten Sie:

• direkt am Formular informieren, wer die Daten erhält, wozu und wie lange sie gespeichert werden, mit einem Link zur Datenschutzerklärung;
• eine Einwilligungs-Checkbox nur einsetzen, wenn die Verarbeitung tatsächlich auf Einwilligung beruht (etwa ein Newsletter), und sie nie vorab anhaken;
• nur die Felder abfragen, die Sie brauchen;
• bedenken, dass Einsendungen in Webflow gespeichert und oft an andere Werkzeuge weitergegeben werden (HubSpot, Zapier, ein CRM): Nennen Sie diese Empfänger in Ihrer Datenschutzerklärung und im Verzeichnis der Verarbeitungstätigkeiten.

Wenn Sie reCAPTCHA in Webflow-Formularen aktivieren, lädt Googles Skript auf der Seite. Seine Einordnung nach den Cookie-Regeln ist umstritten: Nennen Sie es mindestens in Ihrer Cookie-Richtlinie und in der Cookie-Liste des Banners.

Häufige Fehler bei der Cookie-Einwilligung auf Webflow

Die GA-Mess-ID in Apps & Integrations belassen. Webflow lädt Google Analytics vor jedem Einwilligungs-Standardwert. Entfernen Sie sie und überlassen Sie GA der CMP.

Tracking-Skripte oberhalb des CMP-Snippets einfügen. Alles, was weiter oben im Head code steht, läuft, bevor das Banner eingreifen kann.

Ein rein visuelles Banner nutzen. Ein geklontes Banner, das beim Klick verschwindet, stoppt keinen Tracker.

Nur auf webflow.io oder in der Designer-Vorschau testen. Die Vorschau führt keinen Custom Code aus, und Staging ist nicht Ihre Produktivdomain.

Einbettungen in CMS-Vorlagen vergessen. Eine einzige Artikelvorlage mit YouTube-iframe kann auf Hunderten Seiten Cookies setzen.

Google Fonts von Google laden. Hosten Sie die Schriften in Webflow, um die IP-Übermittlung zu beenden.

Code auf Seitenebene übersehen. Eine Landingpage mit eigenem Pixel entgeht einem globalen Audit.

Nie erneut prüfen. Websites ändern sich jede Woche. Planen Sie Scans oder eine Überwachung, damit ein neues Skript nicht monatelang unbemerkt bleibt.

Cookie-Einwilligung auf anderen Plattformen

Dieser Leitfaden ist der Einstieg in unsere Plattform-Reihe. Jeder Leitfaden unten erklärt, woher die Skripte auf der jeweiligen Plattform kommen, welche Fallen es gibt und wie Sie ein Banner einrichten, das sie blockiert:

• WordPress: Cookie-Einwilligung auf WordPress, Plugins, Themes und Caching (Installationsanleitung).
• WooCommerce: WooCommerce und DSGVO, Checkout, Zahlungsskripte und Bestelldaten (Installationsanleitung).
• Shopify: Shopify und DSGVO-Cookies, Customer Privacy API und App-Skripte (Installationsanleitung).
• Wix: Wix Cookies und DSGVO, das native Banner und seine Grenzen (Installationsanleitung).
• Squarespace: Squarespace und DSGVO-Cookies, dann Consent Mode v2 auf Squarespace (Installationsanleitung).
• HubSpot: HubSpot und DSGVO-Cookies, Tracking-Code und Formulare (Installationsanleitung).
• PrestaShop: PrestaShop Cookies und DSGVO, Module und Themes (Installationsanleitung).
• Next.js: Next.js und DSGVO-Cookies, clientseitige Navigation und Skript-Laden (Integrationsanleitung).
• Framer: Die Installationsanleitung für Framer behandelt Snippet, SPA-Modus und das eigene Banner von Framer.
• Webflow, Sonderfälle: eine Webflow-Website ohne Analytics und Google Fonts auf Webflow.

Laufen Ihre Tags unabhängig von der Plattform über Google Tag Manager, gilt zusätzlich die Installationsanleitung für GTM.

Wie FlowConsent die Cookie-Einwilligung auf Webflow umsetzt

FlowConsent wird auf Webflow mit einem einzigen Snippet im Head code installiert, erzeugt im Webflow-Tab des Builders, in etwa zehn Minuten. Der Inline-Stub für Consent Mode v2 setzt Googles Signale vor jedem Tag auf „denied“, danach blockiert das Banner Skripte und Einbettungen bis zur Zustimmung. Wird ein Google-Tag oberhalb des Snippets eingefügt, meist über den Bereich Apps & Integrations von Webflow, meldet das Banner einen eindeutigen Fehler in der Konsole, und die Installationsprüfung nennt die Ursache. Der automatische Cookie-Scan hält die Cookie-Liste aktuell, jede Entscheidung wird als exportierbarer Nachweis gespeichert, und die Daten werden in Europa gehostet. FlowConsent ist bis 25.000 Sitzungen pro Monat kostenlos, danach kostet Pro 14,99 € pro Monat bis 100.000 Sitzungen. Folgen Sie der Webflow-Integrationsanleitung.