Advanced Form Tracking

Multiple Forms on a single Page

Since only one form can be measured per page and pixel instance, you need to initialize an own pixel instance to measure the second form if you want to track two forms on the same page.

This second instance serves exclusively to capture this second form and will not collect any further data, as they are already measured by the first instance and would count twice in Intelligence.

If you want to measure two or more forms on a single page, proceed as follows:

1. In Tag Integration, navigate to Parameters and click New parameter.
   
    
   
   

2. Now configure the parameter as follows:
   

   Parameter	Description	Example
   Name	Enter a name for the parameter	Form 2
   Description	Optionally, add a description to the field provided.
   Type	Select from the dropdown list the required type, from which the value should be read out: JavaScript variable	JavaScript variable
   Definition	Add the required variable.	document.forms[0]

3. Click Create.

4. Now, open the Mapp Intelligence plugin of the container you want to configure and open the tab Form.
   
   
   

5. Click + Add form tracking.

6. Select from the dropdown list the parameter that you have created in step 3 (for example, "Form 2") and select the page area where the form is included.

Manual Update of Form Fields

If you modify the content of form fields by means of JavaScript or simulate a form focus, then call the following method and submit the changed form field:

Example

wts.push(['updateFormFieldStatus', document.getElementById('firstname')]);

If you measure multiple forms on your page use the following call instead:

Example

wts.push(['multipleUpdateFormFieldStatus', document.forms[0], document.getElementById('firstname')]);

Tracking Forms without the <form> Tag

Using forms on your web page that do not have the <form>-tag requires that you create a custom form for tracking.

1. First, create an instance of the class "CustomForm".

2. Submit the form name and the corresponding form fields, which you want to measure to this instance.

3. Then pass the custom form to the tracking pixel to measure this form.

Example

<div id="formular-name">
     <input id="textfield" name="textfield" type="text" size="30"></br>
     <input id="password" name="password" type="password" size="30"></br>
     <textarea id="textarea" name="textarea" cols="50" rows="10"></textarea></br>
     <select id="select" name="select" size="5" multiple>
         <option rel="select1" value="1">Select 1</option>
         <option rel="select2" value="2">Select 2</option>
     </select></br>
     <input id="submit" type="submit" value="submit">
</div>

wts.push(['customForm', function(CustomForm) {
     var customForm = new CustomForm('form name' , [
         document.getElementById('textfield'),
         document.getElementById('password'),
         document.getElementById('textarea'),
         document.getElementById('select'),
         document.getElementById('submit' )
     ]);
     wts.push(['formTrackInstall', customForm]);
}]);

If you send your form via AJAX and therefore no page exit takes place, then send the form request manually with the following function:

Example AJAX

function myCustomFormSubmit(formObject) {
     /* Your code */
     wts.push(['formTrackSubmit']);
     wts.push(['send', 'form']);
     /* Your code */
}