Zum Inhalt springen

Wie man Google Tag Manager und Google Analytics in Webflow einbaut

    Als Web-Analyst möchtest du sicherstellen, dass du die volle Kontrolle über die Daten deiner Webflow-Website hast. Google Tag Manager (GTM) und Google Analytics (GA) sind zwei unverzichtbare Tools, um Besucherverhalten zu analysieren, Conversion-Tracking einzurichten und datenbasierte Entscheidungen zu treffen. In diesem Artikel zeige ich dir Schritt für Schritt, wie du beide Tools in Webflow integrierst, damit du direkt loslegen kannst.

    Warum Google Tag Manager und Google Analytics kombinieren?

    Bevor wir loslegen, ein kurzer Überblick: Google Analytics ist das mächtigste Tool zur Analyse von Website-Traffic und Nutzerverhalten. Google Tag Manager hingegen erleichtert die Verwaltung von Tracking-Codes (Tags), indem es dir erlaubt, sie zentral an einem Ort zu organisieren, ohne den Quellcode deiner Website ständig anzupassen. Die Kombination beider Tools bietet dir Flexibilität und Effizienz – perfekt für Webflow-Projekte, bei denen du ohnehin wenig direkten Zugriff auf den Backend-Code hast.

    Voraussetzungen

    • Ein Google-Konto (für GTM und GA).
    • Eine Webflow-Website (mindestens mit einem kostenpflichtigen Plan, da benutzerdefinierter Code eingefügt werden muss).
    • Zugriff auf die Webflow-Projekteinstellungen als Admin.

    Schritt-für-Schritt-Anleitung

    Google Tag Manager einrichten

    GTM-Konto erstellen

      • Gehe zu tagmanager.google.com und melde dich mit deinem Google-Konto an.
      • Klicke auf „Konto erstellen“. Gib einen Kontonamen ein (z. B. dein Firmenname) und wähle dein Land aus.
      • Erstelle einen Container: Wähle „Web“ als Zielplattform und gib die URL deiner Webflow-Website ein (z. B. deinewebsite.webflow.io oder deine eigene Domain). Klicke auf „Erstellen“.
      • Akzeptiere die Nutzungsbedingungen. Du erhältst nun zwei Code-Snippets: einen für den <head>-Bereich und einen für den <body>-Bereich.

    GTM-Code in Webflow einfügen

        • Öffne dein Webflow-Projekt im Dashboard.
        • Gehe zu „Project Settings“ (Projekteinstellungen) > „Custom Code“ (Benutzerdefinierter Code).
        • Füge das erste Snippet (das mit <script>) in den Bereich „Inside <head> tag“ ein.
        • Das zweite Snippet (das mit <noscript>) wird normalerweise direkt nach dem öffnenden <body>-Tag eingefügt. Da Webflow das nicht direkt erlaubt, gehe in den Designer:
          • Ziehe ein „Embed“-Element (unter „Add Elements“ > „Components“ > „Embed“) auf die Seite.
          • Platziere es als erstes Element im Body (z. B. auf jeder Seite oder in einem globalen Symbol wie dem Footer).
          • Füge das <noscript>-Snippet in das Embed-Feld ein.
        • Speichere die Änderungen und veröffentliche deine Website.

    GTM-Installation überprüfen

          • Lade die Chrome-Erweiterung „Google Tag Assistant“ herunter.
          • Öffne deine veröffentlichte Website, aktiviere den Tag Assistant und überprüfe, ob der GTM-Container erkannt wird (du siehst eine Container-ID wie GTM-XXXXXX).

    Google Analytics einrichten

    GA4-Property erstellen

      • Gehe zu analytics.google.com und melde dich an.
      • Klicke auf „Admin“ > „Property erstellen“.
      • Gib einen Namen ein (z. B. „Meine Webflow-Website“), wähle Zeitzone und Währung aus und klicke auf „Weiter“.
      • Wähle „Web“ als Plattform, gib deine Website-URL ein und erstelle einen Datenstream. Du erhältst eine Mess-ID (z. B. G-XXXXXXXXXX).

    GA4 in GTM integrieren

        • Gehe zurück zu Google Tag Manager.
        • Klicke auf „Tags“ > „Neu“ > „Tag-Konfiguration“ > „Google Analytics: GA4-Konfiguration“.
        • Gib deine Mess-ID (z. B. G-XXXXXXXXXX) ein.
        • Wähle als Auslöser „All Pages“ (Alle Seiten), damit GA auf jeder Seite deiner Website ausgeführt wird.
        • Speichere den Tag mit einem Namen wie „GA4 – Seitenaufrufe“.

    Veröffentlichen und testen

          • In GTM: Klicke auf „Senden“ > „Veröffentlichen“, um deine Änderungen live zu schalten.
          • Öffne deine Website und nutze den „Echtzeit“-Bericht in Google Analytics, um zu prüfen, ob Daten eingehen (das kann ein paar Minuten dauern).

    Erweitertes Tracking (optional)

    • Event-Tracking: Erstelle in GTM neue Tags für spezifische Aktionen (z. B. Button-Klicks). Wähle „Google Analytics: GA4-Ereignis“, gib einen Ereignisnamen ein (z. B. button_click) und definiere Auslöser (z. B. „Klick auf Element mit ID xyz“).
    • E-Commerce-Tracking: Wenn du einen Webflow-Shop hast, aktiviere E-Commerce in GA4 und richte Tags für Events wie „Produkt angesehen“ oder „Kauf abgeschlossen“ ein.

    Tipps für Web-Analysten

    • Daten sauber halten: Filtere deinen eigenen Traffic in GA4 aus, indem du eine IP-Ausschlussregel erstellst.
    • Konsistenz prüfen: Nutze GTM’s „Vorschau“-Modus, um sicherzustellen, dass Tags korrekt ausgelöst werden, bevor du sie veröffentlichst.
    • Datenschutz beachten: Stelle sicher, dass du eine Einwilligungslösung (z. B. Cookie-Banner) integrierst, um DSGVO-konform zu sein.

    Fazit

    Die Integration von Google Tag Manager und Google Analytics in Webflow ist unkompliziert, sobald du den Dreh raus hast. Mit GTM behältst du die Kontrolle über dein Tracking, während GA dir tiefgehende Einblicke in deine Besucher liefert. Folge diesen Schritten, und du bist in weniger als 30 Minuten startklar. Wenn du Fragen hast oder Unterstützung bei spezifischen Events brauchst, lass es mich wissen – ich helfe dir gerne weiter!