Automatisches Formular Tracking in Single Page Applications

Die Nutzung des automatischen Formular Trackings ist bei Single Page Applications, die auf Frameworks wie Angular, React oder VueJS beruhen, problemlos möglich. Da in SPAs kein Neuladen der Seite stattfindet, sondern Formulare per AJAX Request verschickt werden, müssen Sie das Versenden der Formular Trackrequests manuell konfigurieren.

Dies erfolgt in 3 Schritten:

1. Vorbereitung – Auswahl eines Attributs der Input Elemente mit eindeutigen Werten
2. Initialisierung – Das Formular muss markiert und ans Pixel übergeben werden
3. Versand – das Formular muss an den Webtrekk Server versendet werden – entweder als „ausgefüllt“ oder „abgebrochen“

Vorbereitung

Grundsätzlich benötigen wir für jedes Form Element ein eindeutiges Attribut. Standardmäßig ist das das name-Attribut und kann mit dem wt.formFieldAttribute angepasst werden, was auch direkt in der Tag Integration Oberfläche möglich ist:

Anmerkung: die Benennung des Pixelinstanzobjektes in Form von „wt“ ist nicht vorgegeben, ggf. heißt das Objekt bei Ihnen also anders.

Diese Konfiguration des .formFieldAttribute Properties kann auch problemlos mit der globalen Konfiguration (i.d.R. webtrekkConfig) oder Seitenkonfiguration (i.d.R. pageConfig) ans Pixel übergeben werden.

Entscheiden Sie sich für ein Attribut, das in jedem einzelnen Inputelement einen eindeutigen Wert hat! Elemente mit mehrfach vorkommenden Werten oder Elemente ohne dieses Attribut werden beim Formtracking ignoriert (was ggf. auch gewünscht sein kann).

Initialisierung des Formulars

Jetzt müssen Sie dem Pixel mitteilen, welches Element auf Ihrer Seite das Formular ist, das sie tracken wollen – i.d.R. wird es sich dabei um ein Form Element handeln, dass Sie entweder allgemein mit „document.forms[#]“ ansprechen können, oder natürlich mit document.getElementById(„id“) wenn das Formelement ein id-Attribut besitzt.

Dann gibt es 3 Möglichkeiten, diese Information dem Pixel zukommen zu lassen:

1. Im Tag Integration Frontend
2. Per wts.push() -> Implementierungen mit Tag Integration
3. Direkt in der Pixelinstanz -> Implementierungen ohne Tag Integration

Initialisierung im Tag Integration Frontend

Im Webtrekk Tag Integration Frontend legen Sie einen Parameter an, der das Formular markiert:

Unter Rules erstellen Sie eine Regel, die konfiguriert auf welcher Seite das Formular zu finden ist:

Jetzt gehen wir in unseren Container, und dort ins Webtrekk Plugin. Dort legen wir unter Form ein neues Form Tracking an (1), hinterlegen den Form Parameter (2) und die URL Regel (3):

Nach den Änderungen nicht vergessen die Änderungen zu speichern und den Container neu zu publishen, damit die Änderungen wirksam werden.

Initialisierung im Code

Gerade in SPAs kann es einfacher sein, ein Formular direkt im Code zu markieren.

Wenn Sie Tag Integration nutzen steht Ihnen dafür die wts.push Methode zur Verfügung, und die Übergabe des ersten Formulars auf einer Seite würde so aussehen:

wts.push(['formTrackInstall', document.forms[0]]);

Wenn Sie keine Tag Integration laden, dann können Sie die Markierung direkt in der Pixelinstanz vornehmen:

wt.formTrackInstall(document.forms[0])

Senden des Form Requests

Wenn Sie Tag Integration nutzen, dann können Sie ein Formular mit wts.push so versenden:

wts.push(["send","form"])

Standardmäßig wird ein Formular jetzt als „abgebrochen“ übermittelt. Wenn es als „abgesendet“ in die Webtrekk Trackingdaten eingehen soll, dann muss vor dem send form folgendes ausgeführt werden:

wts.push(['formTrackSubmit']);

Damit gilt das Formular dann als submitted. Ob submittet oder nicht hat keinen Einfluss darauf, wie die einzelnen Elemente übertragen werden – hier wird unabhängig davon übermittelt ob ein Feld ausgefüllt war oder nicht.

Senden des Form Requests ohne Tag Integration

Hier wird der Form Request mit folgender Methode aus der Pixelinstanz (hier wieder „wt“ genannt) versendet:

wt.sendFormRequest(document.forms[0])

Damit wird ein Formular als „abgebrochen“ versendet. Soll ein Formular als „abgeschickt“ getrackt werden, dann müssen Sie zuvor das .formSubmit Property in der Pixelinstanz auf true setzen:

wt.formSubmit = true;

Beispielhafter Einbau in Ihre SPA

Haben Sie eine Komponente mit einem Formular, dann würden Sie das send form im Destroy-Hook der Komponente einbauen, und das formTrackSubmit an die Methode hängen, die die Formular Daten abschickt.

Überprüfung der Requests

Auf folgender Seite finden Sie ein Formular, das mit der V4 Methode ohne Tag Integration implementiert wurde:

http://167.114.255.50/examples/v4-form.html

Hier können Sie sich die Formularrequests in den Entwicklertools Ihres Browsers ansehen.

Achten Sie auf die 0 die unter (1) auf dem folgenden Screenshot markiert ist:

Sie bedeutet, dass das Formular als „abgebrochen“ verschickt wurde.

Wenn das Formular als „abgeschickt versendet wird, dann würde dort eine 1 stehen, wie in folgendem Screen zu sehen: