DigitalWatchBlog

Analytics / Tag Manager

Formular-Tracking mit dem Google Tag Manager

In diesem Tutorial zeige ich, wie ihr in Google Analytics das Absenden von Formularen messen könnt. Dabei nutzen wir natürlich den Google Tag Manager, um die Informationen später an Google Analytics zu übergeben. Mit dem Formular-Tracking seht ihr, wie viele der Nutzer Formulare wie beispielsweise Kontaktformulare, Newsletter-Anmeldungen etc. absenden.

Voraussetzung für das folgende Tutorial ist, dass ihr auf der Website den Google Tag Manager korrekt integriert habt. Im Tutorial „Google Tag Manager einrichten“ zeige ich Schritt für Schritt, wie der Google Tag Manager auf der Website integriert und mit Google Analytics verbunden werden kann.

1. Form-Tracking Variablen aktivieren

Damit der Formularversand getrackt werden kann, muss als erstes unter „Variablen“ die integrierten Variablen geprüft werden. Klicke dazu auf „Konfigurieren“ und scrolle zu den Variablen unter „Formulare“. Sind die einzelnen Variablen noch nicht aktiviert, so musst du diese nun einzeln aktivieren, damit du später auf deren Informationen zugreifen kann.

Google Tag Manager - Form Variablen hinzufügen

2. Trigger einrichten

Damit wir nun prüfen können, welche Informationen im Data Layer für die spätere Konfiguration des Triggers und Tags zur Verfügung stehen, erstellen wir einen neuen Trigger. Ich nenne den Trigger „alle Formulare“. Als Triggertyp wähle ich „Formular senden“. Die Checkboxen „Auf Tags warten“ und „Bestätigung überprüfen“ lasse ich deaktiviert. Der Trigger soll zudem auf allen Formularen ausgelöst werden.

Das Einrichten des Triggers wird nun mittels Speichern abgeschlossen.

Google Tag Manager - allgemeiner Form-Trigger erstellen

3. Formularversand prüfen um die Data Layer Daten zu sehen

Nun gehst du zurück in den Workspace und aktivierst den Vorschaumodus. Nun kannst du dein Formular in einem neuen Tab öffnen. Fülle das Kontaktformular und sende es anschliessend ab. Damit du den Data Layer prüfen kannst, empfehle ich beim Klick auf „Senden“ zudem die CMD-Taste zu drücken, damit sich nach dem Versand ein neues Tab öffnet. Wechsle zurück auf den Tab mit dem Formular und auch im Vorschaumodus unter Variablen, welche Daten im Data Layer zur Verfügung stehe.

Bei mir seht ihr, dass in der Variable „Form ID“ der Wert „gform_1“ steht. Dies ist der einzigartige Key, welchen ich für die weitere Bearbeitung des Formluar-Trackings brauchen.

Google Tag Manager - Form Trigger in der Vorschau prüfen

4. Trigger mit der Form ID definieren

Nun können wir im Tag Manager den soeben erstellten Trigger „alle Formulare“ erneut öffnen und bearbeiten. Damit ich den Trigger später wieder finde, habe ich diesen umbenannt in „Kontaktformular“.

Zudem aktiviere ich „Bestätigung überprüfen“. Diese Funktion stellt sicher, dass das Ereignis nur dann gezählt wird, wenn das Formular korrekt abgesendet wurde. Also falsch beispielsweise ein Feld im Formular fehlt und das Formular dadurch noch nicht erfolgreich versendet wurde, wird auch kein Ereignis erstellt.

Da ich den Trigger nur im Kontaktformular anwenden möchte, habe ich als Variable „Page Path“ enthält „/kontaktformular“ eingetragen. Du kannst den Trigger natürlich auch auf allen Seiten ausführen lassen. Dies macht Sinn, wenn du auf der Website im Footer die Möglichkeit für die Newsletteranmeldung anbietest. Dann müsste der Trigger bei folgender Bedingung ausgelöst werden: „Page Path“ enthält „/“. So wird der Trigger auf allen Seiten ausgelöst.

Nun muss ich noch bestimmen, wann der Trigger ausgelöst werden soll. Dazu aktiviere ich den Radio-Button „einige Formulare“. Nun öffnet sich eine weitere Bedingung. Hier nehme ich nun den Wert aus dem Data Layer, welcher wir im Schritt 3 eruiert haben. In meinem Fall ist das die Form ID „gform_1“. Dazu wähle ich im Dropdown die Variable „Form ID“ und trage im Textfeld die ID „gform_1“ ein.

Nun haben wir den Trigger wie folgt konfiguriert:

Der Trigger wird auf der Seite /kontaktformular ausgelöst, wenn das Formular mit der ID „gform_1“ erfolgreich  abgesendet wurde.

Die Bearbeitung der Trigger schliesst du mit „speichern“ ab.

Google Tag Manager - Formular-Trigger einrichten

5. Tag für das übermitteln des Ereignisses einrichten

In Schritt 5 haben wir den Trigger eingerichtet. Jetzt müssen wir noch einen Tag einrichten, der das Formular-Tracking an Google Analytics sendet. Dazu wechseln wir im Tag Manager zu Tag und erstellen einen neuen Tag.

Als Tag-Typ wählst du „Universal Analytics“. Nun musst du bei Tracking-ID die UA-ID von Google Analytics eintragen. Im Tutorial „Tag Manager einrichten“ haben wir dazu eine konstante Variable mit der UA-ID erstellt. Diese wähle ich mit Klick auf den Button neben dem Textfeld aus.

Als Tracking-Typ wählst du im Dropdown „Ereignis“. Nun öffnen sich vier Textfelder, wo du die Werte der Ereignis eintragen kannst. Als Kategorie habe ich „Formularversand“, als Aktion „Formular gesendet“ und als Label habe ich die Variable {{Page Path}} ausgewählt.

Nun musst du noch den in Schritt 4 erstellten Trigger, in meinem Fall der Trigger mit dem Namen „Kontaktformular“, auswählen.

Wie du siehst, habe ich auch hier wieder einen sprechenden Namen für den Tag gewählt. So sehe ich jeweils, welches Tool wann angesteuert wird. Natürlich bist du frei in der Namensgebung. Die Erstellung des Triggers schliesse ich mit „speichern“ ab.

Google Tag Manager - Tag für Formular-Tracking einrichten

6. Tag und Trigger in der Vorschau prüfen

Bevor wir den erstellten Tag und Trigger veröffentlichen, prüfen wir, ob der Tag erfolgreich beim Formularversand abgefeuert wird.

Dazu aktivieren wir den Vorschaumodus, bzw. aktualisieren den Vorschaumodus, falls dieser unter Schritt 3 nicht deaktiviert wurde. Öffne in einem neuen Tab dein Kontaktformular und fülle die Formularfelder aus. Mit Klick auf senden und gleichzeitig gedrückter CMD-Taste öffnet sich ein neues Tab nach dem Versand. Gehe zurück auf den Tab mit dem Kontaktformular und schaue, ob beim Event gtm.formSubmit das erstellte Tag abgefeuert wird. Falls es nicht klappen sollte, dann aktualisiere im Browser die Seite und versuch erneut, ein Formular zu senden.

Google Tag Manager - Formular-Tracking im Vorschaumodus prüfen

7. Tag und Trigger veröffentlichen und formular-Tracking in Google Analytics prüfen

Funktioniert der Tag unter Schritt 6, dann gehe zurück in den Tag Manager und veröffentliche die Änderungen. Dabei wird dir vor der Veröffentlichung angezeigt, welche Änderungen du veröffentlichen wirst. Wie bereits in den anderen Tutorials gezeigt, gebe ich jeweils jeder Version einen Namen, damit ich später sehe, was ich in den jeweiligen Versionen geändert habe. Natürlich kannst du auch noch eine Beschreibung eintragen. In einem Unternehmen oder Agentur könnte hier noch den Namen des Entwicklers, welcher die Änderungen ausgeführt hat, eingetragen werden. Wenn du dann erneut auf Veröffentlichen klickst, sind die Änderungen live.

Google Tag Manager - Formular-Tracking veröffentlichen

Nun wechsle zu Google Analytics und schau unter „Echtzeit“ und „Ereignisse“, wie die Nutzer auf deiner Seite interagieren und Formulare versenden. Dabei siehst du die Kategorie, die Aktion und mit Klick auf die Kategorie siehst du auch noch die Labels aus den Ereignissen.

Google Tag Manager - Formular-Tracking in Google Analytics prüfen

Ich hoffe, das Tutorial Formular-Tracking war verständlich und es hat bei dir alles funktioniert. Hast du Fragen zum tag Manager oder diesem Tutorial, so schreib es in die Kommentare.

 

 

Share me....Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInPin on PinterestBuffer this pageShare on TumblrEmail this to someone

Kommentiere den Beitrag