Teil 1: Google-Tag-Manager-Container erstellen, mit Head-Code und Body-Embed in Webflow installieren und testen. Teil 2 ergänzt Google Analytics 4.
Update, Oktober 2026: Google hat seit unserem Beitrag einiges geändert. Universal Analytics hat im Juli 2023 die Datenverarbeitung eingestellt und Google Optimize wurde im September 2023 abgeschaltet. Wenn Sie beides in den Screenshots unten sehen, brauchen Sie es also nicht. Die Chrome-Erweiterung Tag Assistant, die wir zum Testen verwenden, wurde inzwischen zu einer einzigen Erweiterung zusammengeführt, die schlicht Tag Assistant heißt, unter demselben Link im Chrome Web Store. Die Schritte unten funktionieren weiterhin, aber Webflow hat inzwischen eine native Google-Tag-Einstellung unter Site settings, Apps & Integrations ergänzt und empfiehlt, individuell eingebaute Google-Tags dorthin zu verschieben (hier ist ihr Beitrag dazu). Laut Webflow können Sie dort Ihr Google-Tag oder Google Tag Manager verbinden. Ein Blick lohnt sich also, wenn Sie lieber ohne Code arbeiten möchten. Diesen Weg haben wir selbst nicht getestet, daher ist die Methode mit Head-Code und Body-Embed, die wir unten zeigen, die, von der wir wissen, dass sie funktioniert. Wenn Sie Ihre Tags lieber am Edge ausführen möchten, schauen Sie sich unsere Anleitung zu Cloudflare Zaraz und Google Analytics 4 in Webflow an.
Webflow ist meist die einfache No-Code-Lösung der Wahl für schnelles und unkompliziertes Webdesign und, wenn ich das sagen darf, auch für die Entwicklung. Google Tag Manager sauber zu installieren, kann dagegen ein kleiner Hack sein. Webflow hat uns leider nur einen schnellen, aber nicht robusten Weg gegeben, GA in Ihr Projekt einzubauen. Daran ist nichts auszusetzen, und wenn Sie nur Google Analytics hinzufügen möchten, folgen Sie einfach ihrer Anleitung. Wenn Sie etwas Flexibleres brauchen, um nicht nur Google Analytics, sondern auch Conversion-Tracking, Anzeigen, Social Media und mehr einzubinden, ist Tag Manager der richtige Weg.
Heute zeigen wir Ihnen die einfachste Lösung, um Tag Manager so schnell wie möglich zum Laufen zu bringen und trotzdem zu 100 % funktionsfähig zu halten. Milk Moon Studio ist ein kleines, designorientiertes Webflow-Studio, daher ist für uns eine Low-Code-Lösung der einfachste Weg, das mit möglichst wenig Aufwand zu erledigen. Mit Tag Manager vermeiden Sie, dass sich im <head> Ihres Projekts eine Menge Tracking- und Conversion-Skripte ansammeln, die Sie verwalten und pflegen müssen. Bei diesem Vorgehen fügen Sie das Tag-Manager-Skript einmal ein und verwalten ab dann alles Weitere in Tag Manager. Ordentlich und aufgeräumt, genau so, wie es ein Webflow-Designer mag.
Aber der Reihe nach:
Einen Tag-Manager-Container einrichten
Falls Sie das noch nicht getan haben, führen wir Sie kurz durch die Einrichtung. (Wir haben einen eigenen Beitrag dazu geschrieben, warum Sie Tag Manager verwenden sollten und nicht nur die einfache Google-Analytics-Installation, bei der Sie den GA-UA-Tracking-Code in Webflow einfügen, sowie zu vielen weiteren Vorteilen von Tag Manager: warum Sie Google Tag Manager in Webflow verwenden sollten.)
Schritt 1: Ein Tag-Manager-Konto erstellen
Dieser Teil ist ganz einfach. Registrieren Sie sich bei Tag Manager und klicken Sie auf Create Account.
Geben Sie dem Konto einen Namen, wählen Sie das Land aus, tragen Sie Ihre URL ein und klicken Sie auf Web.
Nachdem Sie die Nutzungsvereinbarung akzeptiert haben, sehen Sie die Installationsanleitung. Der erste Teil ist reines Kopieren und Einfügen, der zweite Teil, der in den <body>-Tag gehört, ist etwas kniffliger.
Schritt 2: Tag Manager in Webflow installieren
Sobald Sie diesen Bildschirm erreicht haben, kopieren Sie den Code, der in den <head> gehört, und wechseln zu den Einstellungen Ihres Webflow-Projekts.
Öffnen Sie in den Einstellungen Custom Code, fügen Sie den Tag-Manager-Container-Code im Bereich Head Code ein und speichern Sie. Das ist so einfach wie 1, 2, 3.
Als Nächstes geht es in den Designer. Fügen Sie ein neues HTML Embed hinzu.
Fügen Sie den zweiten Codeabschnitt aus Tag Manager ein, der in den <body> gehört. Speichern und schließen.
Wir empfehlen, daraus ein Symbol / eine Komponente zu machen, denn Sie werden es auf jeder Seite Ihres Webflow-Projekts wiederverwenden.
Sobald Sie es in ein Symbol umgewandelt haben, ziehen Sie es ganz nach oben, direkt unter Ihr Body-Element. Es soll immer ganz oben in der Elementliste jeder Seite stehen.
Und das war es schon. Tag Manager ist jetzt sicher in Ihr Webflow-Projekt eingebettet. Achten Sie nur darauf, dass es im Navigator in der Elementliste jeder Seite ganz oben steht, und veröffentlichen Sie den Container in Tag Manager, bevor Sie Ihr Webflow-Projekt veröffentlichen. Ihr <head>-Code leistet die Hauptarbeit. Der Code in Ihrem Symbol ist der noscript-Fallback, der nur bei Besuchern greift, die JavaScript deaktiviert haben.
Aber Moment, es gibt noch mehr:
Schritt 3: Testen
Natürlich möchten Sie sicherstellen, dass Tag Manager installiert ist, also testen wir.
Dafür sollten Sie dieses Plugin für Chrome installieren (sorry, Safari-Nutzer).
Stellen Sie sicher, dass Sie zuerst Tag Manager und dann Webflow veröffentlicht haben, und rufen Sie dann Ihre Website auf.
Öffnen Sie das Plugin und klicken Sie auf Enable.
Laden Sie danach die Seite neu (Befehlstaste+R).
Das Plugin sollte jetzt eine kleine Zahl anzeigen (sie hängt davon ab, wie viele Tags geladen werden):
Sie sehen, dass bei mir vier angezeigt werden. Nummer 4 ist mein Tag-Manager-Container. Der verpixelte Teil ist meine Container-ID, die mit dem Container in Tag Manager selbst übereinstimmen sollte.
Nr. 1 ist mein Google-Analytics-4-Tag, Nr. 2 mein altes Google-Analytics-Tag (Universal Analytics) und Nr. 3 Google Optimize. Wir haben Beiträge dazu, wie Sie diese in Tag Manager einrichten, darunter kostenlose Verhaltensanalysen mit Tag Manager und Microsoft Clarity. Keine Sorge, wenn Sie Ihren Container gerade erst erstellt haben, sehen Sie nichts davon.
Aber ja, das war es, gut gemacht, Sie haben Google Tag Manager in Webflow eingerichtet. Noch ein Hinweis am Rande: Machen Sie sich keine Gedanken über das traurige kleine blaue Gesicht neben dem Tag-Manager-Container. Das liegt nur daran, dass es sich um eine nicht standardmäßige Tag-Manager-Implementierung handelt. Leider ist das ungefähr das Beste, was möglich ist. Solange Webflow daran nichts ändert, sehen Sie keinen grünen Smiley, aber alles funktioniert einwandfrei, versprochen.
In Teil 2 dieser Serie behandeln wir das Einrichten von Google Analytics in Tag Manager. Teil 2 finden Sie hier. Außerdem können Sie hier nachlesen, wie Sie Ihr GA4-Konto mit BigQuery verknüpfen und hier eine Anleitung, wie Sie Ihre Website mit verzögerten Tags schneller machen.
Häufig gestellte Fragen
Wie füge ich Google Tag Manager zu Webflow hinzu?
Erstellen Sie einen Tag-Manager-Container, fügen Sie das erste Snippet in Site settings (zur Zeit unseres Beitrags noch Project settings), Custom code, Head code ein und fügen Sie das zweite Snippet in ein HTML Embed ganz oben auf jeder Seite ein, direkt unter dem Body-Element. Veröffentlichen Sie dann den Container in Tag Manager, bevor Sie Ihr Webflow-Projekt veröffentlichen. Schritt 1 und 2 oben führen Sie durch alles.
Wohin gehört der Google-Tag-Manager-Body-Code in Webflow?
In ein HTML Embed, das ganz oben auf jeder Seite unter Ihrem Body-Element im Navigator steht. Wir machen dieses Embed zu einem Symbol / einer Komponente, damit es auf jeder Seite wiederverwendet werden kann. Es enthält die noscript-Version des Containers, die nur bei Besuchern läuft, die JavaScript deaktiviert haben. Der Head-Code erledigt die eigentliche Arbeit.
Wie füge ich Google Analytics 4 mit Tag Manager zu Webflow hinzu?
Installieren Sie zuerst den Container wie oben beschrieben und fügen Sie dann Ihren Google-Analytics-4-Tag in Tag Manager hinzu. Das behandeln wir in Teil 2, Google Analytics mit Tag Manager zu Webflow hinzufügen. Wenn Sie nur Analytics brauchen, ist die eigene Google-Analytics-Einrichtung von Webflow schneller, aber Tag Manager ist flexibler, sobald Conversion-Tracking, Anzeigen oder Social Media dazukommen.
Warum zeigt Tag Assistant ein trauriges blaues Gesicht neben meinem Container?
Weil es sich um eine nicht standardmäßige Tag-Manager-Implementierung handelt und Webflow uns den Standardweg nicht erlaubt. Trotzdem funktioniert alles einwandfrei.
Haben Sie Fragen? Schreiben Sie uns in die Kommentare und schauen Sie sich auch den How-To-Bereich unseres Blogs für weitere Tutorials an.
Update Wir haben oben im Beitrag Videoinhalte ergänzt, damit Sie leichter mitmachen können, und hoffen, dass das hilft. Abonnieren Sie gern den Kanal, um über unsere neuesten How-tos und aktualisierten Inhalte auf dem Laufenden zu bleiben.
