Google Tag Manager | Web Analytics

Tag Manager Tutorial Teil 4: Formulare tracken – Fortgeschritten

Im dritten Teil unseres Tutorials zum Google Tag Manager wurde das Tracken von Formularen mit dem Formular Senden Trigger thematisiert. Diese einfache Mess-Methode für Formulare funktioniert jedoch nicht immer, da sie auf dem individuellen Formular-Code aufbaut.

JavaScript-Probleme oder Formulare-Absendungen, die vom Tag Manager nicht erkannt werden, können Gründe dafür sein, warum das Tracking mit dieser Methode nicht funktioniert.

In diesem letzten Teil unserer Serie sehen wir uns deshalb das Tracken von abgesendeten Formularen mit Hilfe des Elementsichtbarkeitstriggers an. Diese Art von Trigger ist nicht nur für Formulare, sondern für alle Arten von Pop-up-Fenstern und Bannern nützlich.

Google Analytics misst das Absenden von Formularen nicht automatisch, aber Google Tag Manager (GTM) bietet eine einfache, automatisierte Lösung zur Messung der Formulare an.

In diesem Tutorial gehen wir davon aus, dass Sie bereits über ein Google Tag Manager-Konto verfügen, einen Container erstellt und diesen auf Ihrer Webseite installiert haben. Sie sollten auch ein Google Analytics-Konto für Ihre Webseite eingerichtet und mit dem GTM verknüpft haben.

Was sind die häufigsten Probleme beim Tracken von Formularen?

Formulare können sehr unterschiedlich aufgesetzt sein, deswegen gibt es auch kein Standard-Vorgehen, was das Tracking betriftt. Hier ist ein Überblick über die häufigsten Szenarien, die auf Ihrer Website auftreten können, nachdem ein Formular abgesendet wurde:

  • Das Formular leitet den Nutzer auf eine Danke-Seite weiter: Dies kann automatisch über Pageviews getrackt werden.
  • Das Formular zeigt eine Danke-Benachrichtigung an, nachdem der Button zum Abschicken des Formulars angeklickt wurde: Hier kann das Tracking über ein Formular Senden an GTM erfolgen. Lesen Sie mehr darüber in unserem Tutorial.
  • Das Formular wird aktualisiert und zeigt einen Danke-Text an: In diesem Fall ist das Tracking anspruchsvoll, aber machbar mit dem Elementsichtbarkeitstrigger.
  • Ein Pop-up-Fenster informiert den Nutzer über das erfolgreiche Absenden: Hier ist das Tracking herausfordernd, aber nicht unmöglich mit dem Elementsichtbarkeitstrigger.

So starten Sie mit dem Formular-Tracking

Zu Beginn empfehlen wir, die in GTM eingebauten Formular-Variablen zu aktivieren und einen Formular Senden Trigger zu erstellen, der alle Formular-Absendungen abhört. (Lesen Sie dazu mehr in unserem letzten Tutorial.) Ein sogenannter Listener “lauscht” dann nach abgeschickten Formularen auf der Webseite. Führen Sie dann unbedingt ein paar Tests mit Ihrem Formular durch.

Wenn GTM eine Formulareingabe im Vorschau- und Debug-Modus nicht aufzeichnet, funktioniert die Standardverfolgungsmethode nicht und Sie müssen stattdessen eine alternative Methode verwenden. Dies ist recht häufig der Fall, weshalb wir eine grossartige Alternative vorschlagen: Den Elementsichtbarkeitstrigger.

Was genau ist der Elementsichtbarkeitstrigger?

Der Elementsichtbarkeitstrigger erkennt, wenn ein bestimmtes Element auf dem Bildschirm erscheint (aufgrund von Klicken, Scrollen oder anderen Interaktionen) und hat daher eine Vielzahl von Anwendungsfällen. Diese Technik kann bei Formularen angewendet werden, wenn eine bestimmte Nachricht erscheint, nachdem das Formular erfolgreich abgeschickt wurde. Dies kann eine Danke-Meldung auf derselben Formularseite sein, ein Danke-Banner, wenn die Formularseite neu geladen wird oder ein Pop-up-Fenster. Weitere praktische Beispiele finden Sie hier.

Kurz gesagt, der Elementsichtbarkeitstrigger wird immer dann ausgelöst, wenn ein oder mehrere Elemente, die Sie vorher definiert haben, im Ansichtsfenster des Browsers erscheinen. Das Ansichtsfenster ist der sichtbare Bereich des Browser-Fensters. Wenn ein Element dort sichtbar ist, ist es für den Benutzer sichtbar.

Für das Aufsetzen des Triggers haben Sie zwei Möglichkeiten zur Auswahl, wie Sie bestimmen können, auf welches Element Sie zielen möchten:

  • Element-ID: Damit wird das erste Element auf der Seite mit der angegebenen ID zugeordnet. Dies funktioniert gut, wenn Sie nur ein Element tracken möchten.
  • CSS-Selektor: Dies zielt auf ein Element oder eine Gruppe von Elementen auf der Seite, die zu Ihrem Selektor passt und eignet sich für die Verfolgung mehrerer Elemente, die auf einer Seite erscheinen können.

Schritt 1: Finden Sie ein eindeutiges Merkmal für Ihr Formular

Beginnen Sie damit, die angezeigte Erfolgsmeldung des Formulars zu überprüfen. Der erste Schritt besteht darin, ein Merkmal zu finden, das bei der Identifizierung des Formulars hilft. Wir tun dies, indem wir uns das HTML-Element des Formulars ansehen und entscheiden, was zur eindeutigen Identifizierung des Formulars beiträgt.

Thank you message displayed on website

Um das Formular auf Ihrer Webseite einzusehen, klicken Sie auf die rechte Maustaste, um so auf die Entwicklerwerkzeuge Ihres Browsers zuzugreifen. (In Chrome beispielsweise klicken Sie mit der rechten Maustaste auf das Element, das Sie inspizieren möchten und wählen Inspect.) Dadurch werden Ihnen verschiedene Attribute angezeigt, die für das Formular einzigartig sind, wie der Inhalt, die ID, die CSS-Klasse und andere Elemente. In unserem Beispiel unten können Sie sehen, dass das Formular die ID submitted-message aufweist. Eine ID ist ein geeignetes Merkmal, das typischerweise eindeutig für das Element ist und nirgendwo sonst auf der Webseite verwendet wird und sich somit hervorragend für den Elementsichtbarkeitstrigger eignet.

Code example of a successful form submission

Schritt 2: Erstellen Sie den Elementsichtbarkeitstrigger

Der Trigger definiert, was genau im Ansichtsfenster des Benutzers verfolgt werden soll. In diesem Fall handelt es sich um einen Check, um zu sehen, ob die Danke-Meldung im Sichtfenster des Browsers erscheint.

Führen Sie die folgenden Schritte aus, um den Trigger für das Absenden Ihres Formulars einzurichten:

  • Navigieren Sie zu Trigger auf der linken Seite und erstellen Sie einen neuen.
  • Geben Sie einen beschreibenden Namen ein wie beispielsweise Formular senden – Kontaktformular.
  • Wählen Sie den Trigger-Typ: Elementsichtbarkeit

Für die Trigger-Konfiguration stellen Sie folgendes ein:

  • Auswahlmethode: Wählen Sie ID aus der Dropdown-Liste.
  • Element-ID: submitted-message
    • Dies verwendet die eindeutige ID, die Sie in Schritt 1 identifiziert haben, um genau anzugeben, welche Danke-Nachricht Sie verfolgen möchten.
  • Wann dieser Trigger ausgelöst wird: Einmal pro Seite
    • Dies bedeutet, dass dieser nur einmal auf der aktuellen Seite ausgelöst wird, wenn das Element, das mit der ID übereinstimmt, für den Betrachter sichtbar ist.
    • Die beiden anderen Optionen können nützlich sein, wenn mehr als ein Element auf einer Seite mit der CSS-Selektor-Methode getrackt wird.
  • Mindestsichtbarkeit in Prozent: 50
    • Hier können Sie einen Wert in Prozent angeben, der angibt, wie viel des Elements im Ansichtsfenster sichtbar sein muss, damit der Trigger ausgelöst werden kann. Wenn Sie also den Wert auf «50» setzen, müssen mindestens 50% des übereinstimmenden Elements sichtbar sein.
    • Standardmässig müssen Elemente zu mindestens 50% auf dem Bildschirm sichtbar sein, um ein Ereignis auszulösen. Dies ist in unserem Fall ausreichend.
  • DOM-Änderungen beobachten: Aktivieren Sie dieses Kästchen, um den Trigger in die Lage zu versetzen, übereinstimmende Elemente zu verfolgen, die bei DOM-Änderungen erscheinen.
    • Mit dieser Einstellung können Sie die Sichtbarkeit von Elementen verfolgen, die beim ersten Laden des Kontaktformulars möglicherweise nicht im DOM (Document Object Model) vorhanden sind. Mit anderen Worten: Es wird gewartet, bis ein HTML-Element mit der Danke-Nachricht erscheint.
  • Weitere Bedingungen zum Auslösen des Triggers:
    • Da wir eine ID verwenden, die für dieses Formular eindeutig sein sollte, brauchen wir hier keine weiteren Bedingungen festzulegen.
    • Wenn diese ID auch für andere Formulare verwendet wird, wäre es ratsam, den Seitenpfad so einzustellen, dass er die Seite enthält, auf der das jeweilige Formular eingebunden ist.

Klicken Sie auf Speichern, um die Trigger-Konfiguration abzuschliessen.

Element Visibility Trigger in Google Tag Manager

Schritt 4: Erstellen Sie den Event Tag: Formular Senden

Der letzte Schritt des Formular-Trackings umfasst die Erstellung eines Tags, der den Event in Google Analytics mit den gewünschten Informationen aufzeichnet. Der Event wird ausgelöst, wenn die Bedingungen des zuvor eingerichteten Elementsichtbarkeitstriggers erfüllt sind. Erstellen Sie nun den Tag wie im folgenden Screenshot gezeigt:

Contact Form Submission Event Tag in Google Tag Manager

Schritt 5: Version speichern, testen und publizieren

Der erstellte Tag wird erst dann Daten tracken, wenn Sie ihn publizieren. Zuerst sollten Sie aber gründlich testen, ob er auch wie erwartet funktioniert. Nachdem Sie den Tag gespeichert haben, aktivieren Sie den Vorschaumodus (klicken Sie auf In Vorschau ansehen in der oberen rechten Ecke), gehen Sie zu Ihrer Webseite und aktualisieren Sie die Seite.

  • Klicken Sie auf Senden, ohne das Formular ausgefüllt zu haben. Der Tag sollte in diesem Fall nicht ausgelöst werden.
  • Füllen Sie das Formular mit korrekten Angaben aus und klicken Sie dann auf Senden. Der Tag sollte ausgelöst werden, sobald die Danke-Nachricht auf Ihrem Bildschirm erscheint.

Der Echtzeit-Report in Google Analytics sollte Ihre Events anzeigen, wenn alles ordnungsgemäss funktioniert. Falls Sie auf Probleme stossen,  lesen Sie unseren Blog-Beitrag zu häufigen Testproblemen im Google Tag Manager und wie Sie diese beheben können.

Wenn Ihre Tests erfolgreich waren, können Sie im GTM auf Senden klicken. Geben Sie dieser veröffentlichten Version einen Namen, wie beispielsweise Kontaktformular-Event hinzugefügt und klicken Sie auf Veröffentlichen.

Fazit

Obwohl das Standardtracking für Formulare am einfachsten einzurichten ist, funktioniert es aufgrund von JavaScript Problemen oft nicht. Der Elementsichtbarkeitstrigger bietet Ihnen eine Alternative, um diese Grenzfälle zu umgehen. Ausserdem macht dieses Tracking Ihre Daten viel zuverlässiger und genauer. Auf diese Weise stellen Sie sicher, dass keine ungültigen oder unerwünschten Klicks auf den Senden-Button verfolgt werden, sondern nur diejenigen Formulareingaben, die tatsächlich erfolgreich ausgefüllt und abgeschickt wurden.

In unserem Google Tag Manager Tutorial haben wir das Tracken externer (ausgehender) Links, das Tracken von Download-Links und grundlegendes Formular-Tracking behandelt. Gibt es weitere Ereignisse, die Sie gerne erfassen möchten?  Benötigen Sie Unterstützung bei einem komplizierteren Fall? Zögern Sie nicht, uns zu kontaktieren – wir helfen Ihnen gerne! Und für spannende Neuigkeiten abonnieren Sie unseren Newsletter.

Wir decken ein breites Spektrum an GTM-Themen ab, lesen Sie mehr.

Benötigen Sie Hilfe bei Ihrem Tag Manager Tracking?