TYPO3 Google Tag Manager einbinden: Consent und Formulare

Wie bindest du den TYPO3 Google Tag Manager ein?

Den Google Tag Manager bindest du in TYPO3 am saubersten per TypoScript im Site-Paket ein, alternativ über eine Erweiterung aus dem TYPO3 Extension Repository. In beiden Fällen muss der Code des Google-Tag-Manager-Containers genau einmal auf jeder Seite stehen, möglichst weit oben im Kopfbereich.

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

Google stellt für jeden Container zwei Code-Teile bereit: ein Skript für den Kopfbereich der Seite und einen noscript-Teil direkt nach dem öffnenden body-Tag. Der erste Teil ist der wichtige, der zweite greift nur bei Browsern ohne JavaScript. Über den Google Tag Manager laufen danach Google Analytics 4 (GA4), Google Ads, Meta und alle weiteren Dienste. TYPO3 selbst muss nur den Container laden. Alles andere pflegst du im Google Tag Manager, ohne bei jeder Änderung eine neue TYPO3-Version auszurollen.

Natürlich kannst du TYPO3 Google Analytics auch direkt mit dem Google-Tag einbinden, ganz ohne Google Tag Manager. Für eine reine Besucherstatistik reicht das. Sobald aber Google Ads, ein Meta Pixel oder Formular-Conversions dazukommen, wird jeder neue Dienst zu einer Änderung im TYPO3-Code. Mit dem Google Tag Manager bleibt TYPO3 unverändert, und jede Änderung lässt sich vor dem Veröffentlichen in der Vorschau testen und bei Bedarf auf eine frühere Version zurücksetzen.

Variante 1: Google Tag Manager per TypoScript

Per TypoScript fügst du das Skript über die Eigenschaft page.headerData ein. Dort legst du einen Eintrag mit einer freien Nummer an, vom Typ TEXT, und setzt als Wert den Code aus dem Google Tag Manager. Die Container-ID hinterlegst du am besten als TypoScript-Konstante. So kannst du für eine Testumgebung eine andere ID verwenden als für die Live-Seite, ohne den Code doppelt zu pflegen. Den noscript-Teil setzt du in das Fluid-Layout deines Site-Pakets direkt nach dem body-Tag.

• Code nur im Site-Paket ablegen, nicht in einem einzelnen Seiten-Template, damit er auf allen Seiten steht
• bei mehreren Websites in einer TYPO3-Installation über Bedingungen je Site die passende Container-ID setzen
• prüfen, ob eine ältere Erweiterung oder ein Template bereits einen Google-Analytics-Code einbaut
• nach jeder Änderung den Frontend-Cache leeren

Der Vorteil dieser Variante: Sie hängt an keiner fremden Erweiterung und überlebt TYPO3-Updates ohne Anpassung. Der Nachteil: Wer die Container-ID ändern will, braucht Zugriff auf das Site-Paket. Für die meisten Firmen ist das kein Problem, weil die ID nach der Einrichtung gleich bleibt.

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

Variante 2: Erweiterung aus dem TYPO3 Extension Repository

Im TYPO3 Extension Repository gibt es mehrere Erweiterungen, die den Google Tag Manager einbinden. Sie bieten meist ein Feld im Backend für die Container-ID und erledigen den noscript-Teil gleich mit. Bevor du eine installierst, prüfe drei Dinge: ob sie deine TYPO3-Version unterstützt, wann sie zuletzt aktualisiert wurde und ob sie nebenbei weitere Skripte lädt. Eine Erweiterung, die bei der nächsten LTS-Version nicht mitzieht, blockiert sonst dein Update. Ganz gleich, welche Variante du wählst: Ein zweiter Weg, etwa ein alter Analytics-Code im Template, muss danach entfernt werden, sonst zählt GA4 doppelt.

Content Security Policy in TYPO3 beachten

Seit Version 12 kann TYPO3 eine Content Security Policy (CSP) ausliefern, eine Liste erlaubter Quellen für Skripte und andere Inhalte. Im Frontend ist sie nicht von selbst aktiv, sondern wird laut TYPO3-Dokumentation über Feature-Schalter oder eine Datei csp.yaml je Site eingeschaltet. Ist sie aktiv, blockiert der Browser Skripte von Domains, die nicht ausdrücklich erlaubt sind. Dann lädt der Google Tag Manager entweder gar nicht oder nur ein Teil der Tags funktioniert.

Google beschreibt in der Dokumentation zur Tag-Plattform, welche Domains und Einstellungen der Google Tag Manager und die Google-Tags in einer CSP brauchen. Für das eingebettete Skript des Containers ist eine Nonce der sauberste Weg, die TYPO3 bereitstellen kann. Typische Fehler erkennst du in der Entwicklerkonsole des Browsers: Meldungen zu einer verletzten Content Security Policy zeigen genau, welche Adresse blockiert wurde. Plane neben Google auch die Domains der übrigen Dienste ein, also etwa Meta oder LinkedIn, falls du deren Tags über den Google Tag Manager lädst.

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

TYPO3 Cookie-Banner und Consent Mode verbinden

Ein TYPO3 Cookie-Banner ist nicht im Kern enthalten. Du nutzt eine Erweiterung oder einen externen Banner. Entscheidend ist, dass der Banner mit dem Google Consent Mode v2 arbeitet: Er setzt beim ersten Laden für ad_storage, analytics_storage, ad_user_data und ad_personalization den Standard verweigert und meldet nach der Auswahl die Entscheidung an den Google Tag Manager. Erst dann dürfen Tags wie der Meta Pixel feuern.

Achte bei TYPO3 auf den Seiten-Cache. Der Banner muss vollständig im Browser arbeiten und darf nicht davon abhängen, dass TYPO3 die Seite für jeden Besucher neu erzeugt. Sonst sieht ein Besucher womöglich eine Seite, die für einen anderen erzeugt wurde. Für den Zugriff auf Cookies und andere Informationen im Endgerät gilt in Deutschland § 25 TDDDG. Dieser Artikel ist keine Rechtsberatung.

Formulare aus EXT:form messen

Formulare aus EXT:form misst du am zuverlässigsten über eine Danke-Seite. Das Formular-Framework von TYPO3 arbeitet mit Finishern, also Schritten, die nach dem Absenden ausgeführt werden. Der Finisher Confirmation zeigt nach dem Absenden auf derselben Seite eine Bestätigung an der Stelle des Formulars. Der Finisher Redirect leitet auf eine eigene Seite weiter. Laut TYPO3-Dokumentation beendet er die Kette, deshalb muss er der letzte Finisher sein, also etwa nach dem Finisher für die E-Mail. Für die Messung ist der zweite Weg einfacher: Ein Trigger auf den Seitenaufruf der Danke-Seite löst im Google Tag Manager das GA4-Ereignis generate_lead und die Conversion für Google Ads aus.

Ein Beispiel aus der Praxis: Ein B2B-Dienstleister mit TYPO3-Website bekommt Anfragen über ein Formular aus EXT:form, das nur eine Bestätigung anzeigt. In GA4 tauchen deshalb keine Anfragen auf, und Google Ads optimiert auf Seitenaufrufe der Kontaktseite. Nach der Umstellung auf den Finisher Redirect mit einer Danke-Seite, die nicht in der Navigation steht und nicht von Suchmaschinen erfasst wird, zählt jede abgeschickte Anfrage genau einmal. Die Conversion-Aktion in Google Ads wird danach auf generate_lead umgestellt, damit die Gebotsstrategie auf echte Anfragen lernt und nicht mehr auf bloße Besuche der Kontaktseite. Auch die E-Mail-Benachrichtigung aus dem Finisher bleibt dabei unverändert.

So testest du TYPO3 Tracking vor dem Livegang

• Frontend-Cache leeren und im Quelltext prüfen, dass der Container-Code genau einmal vorkommt
• Vorschau des Google Tag Managers starten und im Banner zuerst ablehnen, dann in einem neuen Fenster zustimmen
• eine Testanfrage über das Formular abschicken und das Ereignis generate_lead in der DebugView von GA4 suchen
• in der Entwicklerkonsole nach Meldungen zur Content Security Policy schauen

Wenn du das nicht selbst testen willst: Der Gratis-Check von Trackum öffnet deine TYPO3-Seite dreimal in einem echten Browser, ohne Auswahl, mit Ablehnung und mit Zustimmung, und zeigt, welche Dienste dabei senden. Die Einrichtung für 150 € umfasst Google Tag Manager, GA4, Consent Mode v2 und bis zu 15 Ereignisse, getestet mit einer echten Testanfrage. Alle Preise zzgl. MwSt.