Google Tag Manager in Webflow: GA4 und Webflow Cookie-Banner

Den Google Tag Manager bindest du in Webflow über die Site-Einstellungen ein: Der Hauptteil des Codes kommt in das Feld für Head-Code, der noscript-Teil in das Feld für Footer-Code. Das funktioniert nur mit einem bezahlten Plan. Danach verbindest du ein Webflow Cookie-Banner mit dem Google Consent Mode v2 und misst Formulare über die Erfolgsmeldung von Webflow.

Der große Überblick: Google Tag Manager: Anleitung, Einrichtung und DSGVO

Webflow ist bei Agenturen und Start-ups beliebt, weil sich Seiten ohne Entwickler bauen lassen. Beim Tracking stoßen viele aber auf dieselben Fragen: Wohin gehört der Code, wie kommt die Einwilligung ins Spiel, und warum zählt Google Analytics 4 (GA4) die Formulare nicht? Diese Anleitung geht die Schritte der Reihe nach durch.

Wie bindest du den Google Tag Manager in Webflow ein?

Den Google Tag Manager bindest du in Webflow einmal für die ganze Seite ein. Öffne in Webflow die Site-Einstellungen und den Bereich für eigenen Code. Dort gibt es ein Feld für Code im Head und ein Feld für Code vor dem schließenden Body-Tag. Den ersten Teil des Codes aus deinem Google-Tag-Manager-Container, den Script-Block, fügst du in den Head-Code ein. Den zweiten Teil, den noscript-Block, setzt du in das Footer-Feld, weil Webflow kein eigenes Feld direkt nach dem öffnenden Body-Tag hat. Der noscript-Teil greift nur bei Besuchern ohne JavaScript und spielt für die Messung kaum eine Rolle.

• Site-Einstellungen öffnen, Bereich für eigenen Code wählen
• Script-Block des Google Tag Managers in den Head-Code einfügen
• noscript-Block in den Code vor dem schließenden Body-Tag einfügen
• Änderungen speichern und die Seite veröffentlichen
• auf der veröffentlichten Seite im Vorschaumodus prüfen, ob der Google Tag Manager lädt

Wichtig: Die Felder für eigenen Code stehen laut Webflow-Hilfe nur mit einem bezahlten Site-Plan oder einem bezahlten Workspace-Plan zur Verfügung. Außerdem läuft der Code erst auf der veröffentlichten Seite, nicht im Designer. Wer nach dem Einfügen nichts sieht, hat meist nur vergessen zu veröffentlichen.

Webflow Google Analytics: Integrationsfeld oder Tag Manager?

Webflow bietet in den Site-Einstellungen ein Feld, in das du die Mess-ID von Google Analytics direkt eintragen kannst. Das ist schnell erledigt, hat aber zwei Nachteile. Erstens hast du keine Kontrolle darüber, wann der Tag lädt und wie er auf die Einwilligung reagiert. Zweitens brauchst du für Google Ads, Meta oder LinkedIn ohnehin einen weiteren Weg. Für sauberes Webflow Tracking ist deshalb der Google Tag Manager die bessere Wahl. Dort legst du einen Google-Tag mit deiner GA4-Mess-ID an, der auf allen Seiten auslöst.

Ein häufiger Fehler bei Webflow GA4: Die Mess-ID steht im Integrationsfeld und gleichzeitig im Google Tag Manager. Dann zählt GA4 jeden Seitenaufruf doppelt, und die Absprungrate wirkt unrealistisch niedrig. Entscheide dich für einen Weg und leere das andere Feld.

Passend dazu: Meta Pixel (Facebook Pixel) im Google Tag Manager einrichten

Webflow Cookie-Banner mit Consent Mode v2 verbinden

Ein Webflow Cookie-Banner muss zwei Aufgaben erfüllen. Es fragt die Besucher, ob sie Analyse und Werbung erlauben, und es gibt die Antwort an den Google Consent Mode v2 weiter. Der Consent Mode kennt dafür die Signale analytics_storage, ad_storage, ad_user_data und ad_personalization. Vor jeder Wahl müssen sie auf denied stehen, erst nach der Zustimmung auf granted. Laut Google-Dokumentation muss dieser Standardzustand gesetzt sein, bevor ein Google-Tag Daten sendet.

In Webflow bindest du das Banner meist als Skript im Head-Code ein, vor dem Code des Google Tag Managers. Alternativ setzt du es über eine Vorlage im Google Tag Manager mit dem Trigger für die Einwilligungsinitialisierung. Achte darauf, dass das Banner auf der ersten Ebene einen gleichwertigen Knopf zum Ablehnen hat und dass Tags von Meta, LinkedIn oder TikTok, die den Consent Mode nicht kennen, nur nach Zustimmung auslösen. Dieser Artikel ist keine Rechtsberatung. In Deutschland regelt § 25 TDDDG den Zugriff auf Endgeräte, also auch das Setzen von Cookies.

Wie misst du Webflow-Formulare in GA4?

Webflow-Formulare schicken die Daten im Hintergrund ab, die Seite lädt dabei nicht neu. Nach dem Absenden blendet Webflow eine Erfolgsmeldung ein, im Code ein Element mit der Klasse w-form-done. Der eingebaute Trigger für Formularübermittlungen im Google Tag Manager erkennt solche Formulare nicht immer zuverlässig. Besser sind zwei andere Wege.

In beiden Fällen sendest du an GA4 ein Ereignis mit dem empfohlenen Namen generate_lead. Bei mehreren Formularen hilft ein zusätzlicher Parameter mit dem Namen des Formulars, etwa Kontakt oder Rückruf. Markiere generate_lead danach in GA4 als Schlüsselereignis. Ein Beispiel aus der Praxis: Ein B2B-Dienstleister hat ein Kontaktformular auf jeder Leistungsseite. Über die Elementsichtbarkeit und einen Parameter mit dem Seitenpfad sieht er in GA4, welche Leistung die meisten Anfragen bringt.

Passend dazu: Borlabs Cookie mit Consent Mode v2 und Tag Manager verbinden

Wie testest du das Webflow Tracking?

Getestet wird immer auf der veröffentlichten Seite. Starte den Vorschaumodus im Google Tag Manager und gib die Adresse deiner Webflow-Seite ein. Prüfe zuerst ohne Wahl im Banner: Es dürfen keine Cookies für Analyse oder Werbung gesetzt werden. Lehne dann ab und prüfe dasselbe. Stimme danach zu, rufe zwei Unterseiten auf und sende ein Testformular ab. Der GA4-Tag und das Ereignis generate_lead müssen genau einmal auslösen. In GA4 siehst du das Ereignis kurz darauf in der Debug-Ansicht.

Prüfe außerdem die webflow.io-Adresse deiner Seite. Wenn sie veröffentlicht ist, läuft dort derselbe Code, und Testbesuche landen in deinen Berichten. Lass die Tags im Google Tag Manager nur auf deiner eigenen Domain auslösen.

Typische Fehler beim Tracking in Webflow

Die meisten Probleme mit dem Google Tag Manager in Webflow haben wenige, immer gleiche Ursachen. Viele davon entstehen nicht beim ersten Einrichten, sondern später, wenn jemand die Seite umbaut, ein Formular kopiert oder ein zweites Skript für ein Werkzeug einfügt. Prüfe die folgenden Punkte nach jeder größeren Änderung an der Seite.

• Code des Google Tag Managers zusätzlich in den Seiten-Einstellungen einzelner Seiten: Tags laden doppelt
• Banner-Skript steht nach dem Google Tag Manager: Tags senden kurz vor der Wahl
• Formular hat eine Weiterleitung, Trigger wartet aber auf die Erfolgsmeldung: keine Leads in GA4
• kopiertes Formular ohne eigenen Namen: Anfragen lassen sich nicht unterscheiden
• Meta Pixel direkt im Head-Code statt im Google Tag Manager: lädt ohne Einwilligung

Ein Beispiel: Eine Agentur übernimmt eine Webflow-Seite und findet den Meta Pixel sowohl im Head-Code als auch im Google Tag Manager. Nach dem Entfernen aus dem Head-Code lädt der Pixel nur noch nach Zustimmung, und die Zahl der gemeldeten Seitenaufrufe sinkt auf einen realistischen Wert.

Was Trackum bei Webflow übernimmt

Wenn du das nicht selbst machen willst: Trackum richtet Google Tag Manager, GA4 und Consent Mode v2 mit bis zu 15 Ereignissen für 150 Euro ein, getestet und live innerhalb eines Werktags, nachdem du den Zugriff im Google Tag Manager freigegeben hast. Ein eigenes, schlankes Cookie-Banner mit Consent Mode v2 in Deutsch und Englisch gibt es als Extra für 50 Euro plus 4,90 Euro im Monat, im Abo enthalten. Alle Preise zzgl. MwSt. Ob deine Webflow-Seite schon vor der Einwilligung sendet, zeigt dir der kostenlose Trackum Gratis-Check in zwei Minuten.