Wie man benutzerdefinierte GTM-Container mit Growform verwendet
Google Tag Manager (GTM) ist ein äußerst leistungsfähiger „Tag Manager“, mit dem Sie Ihrer Website oder Ihrem Formular ganz einfach Standard- und benutzerdefinierte Tags hinzufügen können.
Um Ihnen einige Beispiele dafür zu geben, was Sie mit benutzerdefinierten GTM-Containern tun können, können Sie:
- Ein Pixel-Ereignis auslösen, wenn Benutzer einen bestimmten Schritt erreichen oder das Formular ausfüllen
- Auslösen einer Google-Anzeigenumsetzung, wenn Nutzer auf eine bestimmte Schaltfläche klicken
- Verwenden Sie einen Screenrecorder wie Fullstory, um zu sehen, wie sich Ihre Benutzer innerhalb Ihres Formulars verhalten
- So ziemlich alles, was Sie sich vorstellen können!
Table of Contents
🎉 This guide is available in video form!
Dieses 13-minütige Video führt Sie durch jeden kleinen Schritt, den Sie benötigen, um Ihre Google Tag Manager Container mit Growform einzurichten:
Sobald Sie das Video beendet haben, gehen Sie zum unten in diesem Beitrag um zu sehen, was Sie als nächstes tun können.
Eine kurze Auffrischung der wichtigsten GTM-Konzepte
Bevor wir loslegen, hier eine kurze Auffrischung der wichtigsten GTM-Konzepte:
- Ein Container ist ein bestimmter „Bereich“ oder ein Repository, der Tags, Trigger und Variablen enthält. Container sind versioniert, und GTM verfügt über ein praktisches Versionskontrollsystem, mit dem Sie „zurückspulen“ können, wenn Sie etwas falsch gemacht haben.
- Ein Tag ist ein Stück Code, das ausgelöst werden soll, wenn etwas passiert. GTM verfügt über eine Bibliothek mit Standard-Tags, die Sie verwenden können (z.B. Google Ads), aber Sie können auch Ihre eigenen HTML-Tags hinzufügen. Die Verwendung von Standard-Tags ist oft ratsam, da sie weniger komplex sind und weniger Raum für Fehler bieten.
- Ein Auslöser ist das „wann“ ein Tag ausgelöst werden soll. Häufige Anwendungsfälle sind „Alle Seitenaufrufe“ oder wenn eine bestimmte Schaltfläche angeklickt wird. Wenn eine bestimmte Bedingung (oder eine Reihe von Bedingungen) erfüllt ist, wird der Auslöser aktiviert und alle Tags unter diesem Auslöser werden ausgelöst.
- Eine Variable ist ein kleiner Speicherbereich in GTM, der die Verwendung und Wiederverwendung von Daten erleichtert. Wir speichern zum Beispiel die Formular-ID in einer GTM-Variable, damit Sie sie leicht wiederverwenden und in Ihre eigenen Tags einfügen können.
Growform verwendet eigentlich zwei Container statt einem, was im folgenden Abschnitt erklärt wird…
Lesen Sie dies zuerst: Die lächerlich komplizierten Probleme, die durch iFrames verursacht werden, und warum Growform zwei Container verwendet
Wie viele eingebettete Codeschnipsel wird Growform in einem iFrame ausgeführt, um sicherzustellen, dass es Ihre Website nicht beeinträchtigt (und umgekehrt).
Diese schöne Illustration fängt es gut ein:
Ein iFrame ist wie ein eigenes Browser-Fenster.
Der iFrame kann nichts auf Ihrer Website sehen, und Ihre Website kann nichts innerhalb des iFrames sehen.
Es handelt sich praktisch um zwei verschiedene Websites.
Dies wirft ernsthafte Probleme für das Tracking auf – insbesondere, da die meisten Werbepartner innerhalb eines iFrames nicht funktionieren.
Um diese Herausforderung zu umgehen, haben wir einige sehr erfahrene GTM-Experten konsultiert und zwei GTM-Container erstellt – die wir für Sie zum Herunterladen und Importieren in Ihr eigenes GTM-Konto bereitgestellt haben:
- Ein Kind-Container. Die Aufgabe des Child-Containers ist es, zu verfolgen, was in Ihrem Formular passiert, und dies an den Parent-Container weiterzuleiten. Er kann auch ein nützlicher Ort sein, um Tags abzufeuern, die innerhalb des iFrames „sehen“ müssen, wie z.B. Anwendungen zur Bildschirmaufnahme.
- Ein übergeordneter Container , der Ereignisse vom untergeordneten Container empfängt und die Tags tatsächlich auslöst.
Wir können also einen untergeordneten und einen übergeordneten Container wie folgt in unser Diagramm einfügen, wobei ein Pfeil die Kommunikation zwischen den beiden Containern darstellt:
Um es kurz zu machen:
- Growform-Formulare werden innerhalb eines iFrames ausgeführt. Der Versuch, Tags in iFrames einzufügen und sie zum Laufen zu bringen, ist zum Scheitern verurteilt.
- Um dieses Problem zu umgehen, haben wir einen übergeordneten und einen untergeordneten Container für Sie erstellt.
- Der untergeordnete Container nimmt die Vorgänge innerhalb des iFrames auf und sendet Informationen an den übergeordneten Container.
- Der übergeordnete Container erhält die Informationen vom untergeordneten Container und feuert das eigentliche Tag ab… und das Tag funktioniert tatsächlich.
- Wir haben diese Container erstellt und zum Download zur Verfügung gestellt, um Ihnen als „Ausgangspunkt“ für Ihre Tagging-Abenteuer zu dienen.
Es hört sich kompliziert an, aber wir führen Sie durch ein paar Beispiele, damit Sie im Handumdrehen mit Tags arbeiten können.
Hier erfahren Sie, wie Sie es einrichten können…
1 – Erstellen Sie Ihr Google Tag Manager-Konto oder melden Sie sich an.
Navigieren Sie zunächst zu Google Tag Manager und erstellen Sie ein neues Konto, falls Sie noch keines haben.
Möglicherweise müssen Sie auch innerhalb von Google Tag Manager ein Konto erstellen, sobald Sie eingerichtet sind. Klicken Sie dann auf das Menü mit den drei Punkten in Ihrem Konto und wählen Sie „Container erstellen“.
Sie sollten nun zwei Container erstellen – einen übergeordneten Container und einen untergeordneten Container, und beide sollten auf „Web“ als Zielcontainer eingestellt sein:
2 – Laden Sie unsere Starter-Eltern- und Kind-Container herunter
You can download our parent and child „starter“ containers here:
💾 Growform parent container
💾 Growform child container
Löschen oder ändern Sie keine Tags, Variablen oder Auslöser, die mit den Starter-Containern geliefert werden (es sei denn, Sie wissen genau, was Sie tun) – Ihre Container sind auf diese angewiesen, um richtig zu funktionieren.
3 – Importieren Sie unsere über- und untergeordneten Container in Ihr GTM-Konto
Jetzt, wo Sie unsere Container heruntergeladen haben, ist es an der Zeit, sie in die brandneuen, leeren Container zu importieren, die Sie in Schritt 1 erstellt haben.
Öffnen Sie Ihren übergeordneten Container und navigieren Sie zu „Admin“, dann klicken Sie auf „Container importieren“. Sie sehen dann einen Bildschirm wie diesen:
Wählen Sie die growform-parent-container.json (heruntergeladen in Schritt 2) und wählen Sie „Vorhandener Arbeitsbereich“ und dann „Standardarbeitsbereich“. Die Option “ Überschreiben“ können Sie getrost verwenden, da Ihr Container ohnehin leer war.
Wiederholen Sie diesen Vorgang nun für den Child-Container, so dass Sie sowohl einen Child-Container als auch einen Parent-Container in Ihrem Konto haben, die mit den Tags und Variablen gefüllt sind, die wir für Sie eingerichtet haben.
4 – Veröffentlichen Sie Ihre Container und fügen Sie sie zu Ihrem Growform-Formular hinzu
Klicken Sie bei beiden Containern auf „Absenden“, damit sie veröffentlicht werden:
Jetzt sind Ihre Container veröffentlicht, sie sind funktionsfähig und können in Ihr Growform-Formular eingefügt werden.
Navigieren Sie zu Ihrem Formular in Growform, klicken Sie auf „Formulareinstellungen“ und dann auf „Tracking & Tagging“. Suchen Sie das Feld „Google Tag Manager“ und kopieren Sie die IDs Ihrer Eltern- und Kind-Container in die jeweiligen Felder. Vergessen Sie nicht, zu speichern!
An diesem Punkt haben Sie eine exakte Kopie der „Standard“-Container, die wir unter der Haube verwenden, um die anderen Tags (wie Facebook und Google Ads) auszulösen.
Das bedeutet, dass alle anderen Einstellungen, die Sie auf der Seite mit den Tracking- und Tagging-Einstellungen vorgenommen haben, weiterhin funktionieren – aber von Ihrem benutzerdefinierten Container und nicht von unserem abgefeuert werden. Cool, nicht wahr!
Das bedeutet aber auch, dass die Auslösefunktion dieses Formulars davon abhängt, dass Ihre GTM-Container intakt bleiben. Seien Sie also vorsichtig mit den Containern und entfernen Sie nichts, was bereits vorhanden ist.
Was nun?
Nachdem Sie nun die Grundeinstellungen vorgenommen haben, können Sie mit dem Auslösen von Tags beginnen.
Lesen Sie unsere Anleitungen, um mit einigen praktischen Anwendungsfällen zu beginnen:
So lösen Sie einen Tag aus, wenn ein Benutzer den Schritt ändert oder das Formular ausfüllt
Wie man ein Tag auslöst, wenn ein Benutzer eine bestimmte Taste drückt
Wie man ein Tag für Bildschirmaufnahmen oder ähnliches auslöst
Häufig gestellte Fragen
Due to the way React works, it can be difficult to use class selectors (.classnames) to target particular elements, so we recommend following this guide if you wish to target a button.
If you want to target some other element, you can always contact support and we’ll be able to target pretty much anything.
Tags should almost always be fired in the parent container: the child container’s job is simply to “tell” the parent container about what’s happening inside Growform’s iFrame, so tags can be fired outside it, in the parent.
For a basic guide to firing your first tag, see here.
Eugh, we know. It’s just part and parcel of working with iFrames.
In theory, you could create your own child container from scratch and add it to your Growform settings.
But this would be next to useless, as tags would only fire inside the iFrame.
By using our “starter” containers, you get access to a bunch of functions and tags that will let you do everything you need to do.
Once you add the our starter containers, Growform will pass the details from your tracking & tagging settings page into your new containers, and everything will function as normal – as long as you keep the containers intact, which are now doing the heavy lifting!
There are 2 approaches when working with multiple forms:
a.) Use the same containers for all forms: This is a perfectly viable option. The form ID and other information is available inside GTM, so you can build logic about what to fire when inside Google Tag Manager. This works particularly well if your forms have similar purposes.
b.) Use different containers for different forms: If you’re managing multiple clients, you can always create a new account for each client. This keeps their tags completely separate and is better for to avoid cross-contamination of tags.
Benötigen Sie Hilfe bei benutzerdefinierten GTM-Containern? Unser Team hat Erfahrung mit fortgeschrittenem Tracking und Tagging und kann Ihnen über den Online-Chat in Ihrem Konto helfen.