Das automatische Formular-Tracking kann problemlos mit Single Page Applications (SPA) verwendet werden, die auf Frameworks wie Angular, React oder VueJS basieren. Da es in SPAs kein Seiten-Reload gibt, sondern Formulare über AJAX-Requests gesendet werden, müssen Sie das Senden der Formular-Track-Requests manuell konfigurieren.

Drei Schritte sind notwendig, um das automatische Formular-Tracking in drei Schritten zu implementieren:

  • Vorbereitung: Wählen Sie das Attribut von Eingabeelementen mit eindeutigen Werten aus.
  • Formular initialisieren: Markieren und übergeben Sie das Formular an das Pixel.
  • Formular-Request senden: Senden Sie das Formular an den Mapp Server entweder als "ausgefüllt" oder als "abgebrochen".

Vorbereitung

Grundsätzlich benötigen Sie für jedes Formularelement ein eindeutiges Attribut. Standardmäßig ist es das Attribut name. Jedoch können Sie es mit dem wt.formFieldAttribute nach Bedarf anpassen.

Empfehlung

Wählen Sie ein Attribut, das in jedem Eingabeelement einen eindeutigen Wert hat. Elemente mit mehreren Werten oder Elemente ohne dieses Attribut werden beim Formular-Tracking ignoriert (was auch gewünscht sein kann).

Über Tag Integration können Sie zu diesem Zweck das Attribut "Alternatives Formulardatenattribut" definieren.

var webtrekkConfig {
 trackId: "111111111111111",
 trackDomain: "track.wt-eu02.net",
 domain: "www.website.com",
 form: "1",
 contentId: "",
 formPathAnalysis: true
};
 
var wt = new webtrekkV3(webtrekk);
wt.formfieldAttribute = "rel";
JS 
var pageConfig {
var wt = new webtrekkV3(webtrekk);
wt.formfieldAttribute = "rel";
JS

Formular initialisieren

Nun müssen Sie dem Pixel mitteilen, welches Element auf Ihrer Seite das Formular ist, das Sie tracken möchten - in der Regel ist es ein Formularelement, das Sie entweder generell mit document.forms[#] oder natürlich mit document.getElementById ("id") ansprechen können, wenn das Formularelement ein ID-Attribut hat. Dies sind die Optionen, um diese Informationen an den Pixel zu senden:

  1. Legen Sie einen Parameter an, der das Formular markiert.
  2. Erstellen Sie eine Regel, die bestimmt, auf welcher Seite sich das Formular befindet.
  3. Öffnen Sie Ihren Container und klicken Sie auf das "Mapp Intelligence Plugin", um es zu öffnen.
  4. Unter dem Tab "Formular" können Sie ein neues Formular-Tracking hinzufügen, indem Sie sowohl den Formularparameter als auch eine Regel angeben.
  5. Speichern Sie Ihre Änderungen und veröffentlichen Sie den Container erneut, damit die Änderungen wirksam werden.

Gerade in SPAs kann es einfacher sein, ein Formular direkt im Code zu markieren. Wenn Sie Tag Integration verwenden, können Sie dies anhand der Methode wts.push tun. Das Übergeben des ersten Formulars auf einer Seite würde so aussehen:

// form tracking
wts.push(['formTrackInstall', document.forms[0]]);
JS

Beispiel

wt.formTrackInstall(document.forms[0])
JS

Formular-Request senden

Wenn Sie die Tag Integration verwenden, können Sie ein Formular mit der folgenden wts.push-Methoden versenden:

wts.push(["send", "form"]);
wts.push(['formTrackSubmit']);
JS
ParameterBeschreibung

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

Methode zum Senden des Formular-Requests von der Pixelinstanz. Das Formular wird als "abgebrochen" gesendet.
wts.push(['formTrackSubmit'])Methode, um das Formular als "ausgefüllt" zu erfassen.

Wenn Sie die Tag Integration verwenden, können Sie ein Formular mit der folgenden wts.push-Methoden versenden:

wt.sendFormRequest(document.forms[0]);
wt.formSubmit = true;
JS
ParameterBeschreibung

wt.sendFormRequest(document.forms[0]);

Methode zum Senden des Formular-Requests von der Pixelinstanz. Das Formular wird als "abgebrochen" gesendet.
wt.formSubmitMethode, um das Formular als "ausgefüllt" zu erfassen.

Einbinden in Single Page Application

Wenn Sie eine Komponente mit einem Formular haben, können Sie das send form in den Destroy-Hook der Komponente aufnehmen und das formTrackSubmit an die Methode anhängen, die die Formulardaten sendet.

Weitere Informationen

Technische Dokumentation: Formulare
Single Page Solutions
Implementation Guidelines for Single Page Application with Pixel v4