Automatic Form Tracking in Single Page Applications

The use of automatic form tracking is easily feasible with single page applications based on frameworks such as Angular, React or VueJS. Since the page is not reloaded in SPAs, but forms are sent using an AJAX request, you must manually configure the dispatch of the form tracking requests.

This is done in 3 steps:

1. Preparation - selection of an attribute of the input elements with unique values
2. Initialization - the form must be selected and passed to the pixel
3. Dispatch - the form must be sent to the Webtrekk server - either as "completed" or "aborted”

Preparation

Basically, we need a unique attribute for each form element. By default, this is the name-attribute and can be customized with the wt.formFieldAttribute, which can be done directly in the tag integration interface:

Note: the name of the pixel instance object in the form of "wt" is not predefined, so the object may have a different name.

This configuration of the .formFieldAttribute property can also be passed to the pixel using the global configuration (usually webtrekkConfig) or page configuration (usually pageConfig).

Decide on an attribute that has a unique value in each individual input element! Elements with multiple values or elements without this attribute are ignored during form tracking (which perhaps is even desired).

Initialization of the form

Now you have to tell the pixel which element on your website is the form you want to track - usually it will be a form element that you can address either with "document.forms[#]" or document.getElementById("id") if the form element has an id attribute.

There are 3 ways to send this information to the pixel:

1. In the Integration Frontend tag
2. Per wts.push() -> implementations with tag integration
3. Directly in the pixel instance -> implementations without tag integration

Initialization in the Tag Integration Frontend

Create a parameter that selects the form in the Webtrekk Tag Integration Frontend:

In the menu item Rules, you create a rule that configures on which page the form can be found:

Now you must go into the container and then into the Webtrekk plugin. There we create a new form tracking under Form (1), store the form parameter (2) and the URL rule (3):

After making these changes do not forget to save and re-publish the container, so the changes take effect.

Initialization in the code

Especially for SPAs, it can be easier to select a form directly in the code.

If you use Tag Integration, you can use the wts.push method. Thus, the transfer of the first form on a page would be:

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

If you do not load a tag integration, you can mark it directly in the pixel instance:

wt.formTrackInstall(document.forms[0])

Sending the form request

If you use tag integration, you can send a form with wts.push like this:

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

By default, a form is now transmitted as "aborted". If it is to be included as "sent" in the Webtrekk tracking data, the following must be executed before the send form:

wts.push(['formTrackSubmit']);

The form is then considered submitted. The submission status has no influence on how the individual elements are transferred - here it is transmitted regardless of whether a field was filled out.

Sending the form request without Tag Integration

Here the form request is sent with the following method from the pixel instance (here again called "wt"):

wt.sendFormRequest(document.forms[0])

This will send a form as "aborted". If a form is to be tracked as "sent", you must first set the.formSubmit property in the pixel instance to true:

wt.formSubmit = true;

Exemplary installation in your SPA

If you had a component including a form, you would install the send form in the destroy hook of the component and append the formTrackSubmit to the method sending the form data.

Checking the request

On the following page you will find a form implemented with the V4 method without tag integration:

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

Here you can check the form requests in the developer tools of your browser.

Note the 0 marked under (1) on the following screenshot:

It means that the form was sent as "aborted".

If the form is sent as "sent", there would be a 1, as shown in the following screenshot: