Form Tracking Plugin

Infinity IQ provides an easy and standardized way to implement form tracking using the Form Tracking plugin. The plugin tracks when a form is loaded when users begin to fill out a form, and then abandon it without interacting or submitting the form.

Form behaviors

The Form Tracking plugin captures the following user behavior on forms:

Form Impression or Form Visibility
Form Interaction
Form Impression Abandonment or Form Visibility Abandonment
Form Interaction Abandonment
Form Submission

Form Impression or Form Visibility

A form impression or form visibility event is tracked when a form appears in the viewport of the web page. The visibility event is triggered only once for a form per page load.

Sample Code for Form Impression or Form Visibility

{
   "wt.ev": "$FormViewed",
   "wt.es": "www.oracle.com",
   "wt.nv": "body > div > div > form",
   "wt.form_action": "/form_submit",
   "wt.form_name": "Registration Form",
   "wt.form_enctype": "application/x-www-form-urlencoded",
   "wt.form_target": "_self",
   "wt.form_method": "GET"
 }

Note the following:

wt.form_target specifies an identifier that indicates where to display the response after the form submission. Possible values are _blank, _self, _parent, _top and framename. The default value is _self.
wt.form_method specifies how to send the form data. Possible values are GET and POST. The default value is GET.

Form Interaction

A form interaction event is tracked when a user interacts with a form or changes any of the form fields for the first time. Interaction is defined as one of the following operations:

Click an input field in a form
Enter/modify data in the input text fields
Click a radio button or check the box
Select a drop-down value
Pick a date & time value in the Date/Time picker
Click on the file dialog to select a file for upload

Sample code for Form Interaction

{
   "wt.ev": "$FormInteracted",
   "wt.es": "www.oracle.com",
   "wt.nv": "body > div > div > form",
   "wt.form_action": "/form_submit",
   "wt.form_name": "Registration Form",
   "wt.form_enctype": "application/x-www-form-urlencoded",
   "wt.form_target": "_self",
   "wt.form_method": "GET",
 }

Form Impression Abandonment or Form Visibility Abandonment

A form impression abandonment or form visibility abandonment event is tracked after the form appears in the viewport, and the user navigates away from the viewport without interacting with or submitting the form on any of the following events.

Close browser tab
Close browser
Navigate to a different page (clicking the hyperlink, entering a new URL in the address bar, clicking the forward or back buttons, etc.)

Sample code for Form Impression Abandonment or Form Visibility Abandonment

{
   "wt.ev": "$FormViewedAndAbandoned",
   "wt.es": "www.oracle.com",
   "wt.nv": "body > div > div > form",
   "wt.form_action": "/form_submit",
   "wt.form_name": "Registration Form",
   "wt.form_enctype": "application/x-www-form-urlencoded",
   "wt.form_target": "_self",
   "wt.form_method": "GET"
 }

Form Interaction Abandonment

A form abandonment event is tracked when the user interacts with a form, and navigates away from the form, without submitting the form on any of the following events:

Close browser tab
Close browser
Navigate to a different page (clicking the hyperlink, entering a new URL in the address bar, clicking the forward or back buttons, and so on)

Sample code for Form Interaction Abandonment event

{
   "wt.ev": "$FormChangedAndAbandoned",
   "wt.es": "www.oracle.com",
   "wt.nv": "body > div > div > form",
   "wt.form_action": "/form_submit",
   "wt.form_last_interacted_field_name": "last name",
   "wt.form_name": "Registration Form",
   "wt.form_enctype": "application/x-www-form-urlencoded",
   "wt.form_target": "_self",
   "wt.form_method": "GET"
 }

Form Submission

A form submission event is tracked when a form is submitted when the user clicks the Submit button; or when the form submission is triggered using other means, for example, keyboard interactions, etc.

Sample code for Form Submission event

{
   "wt.ev": "$FormSubmitted",
   "wt.es": "www.oracle.com",
   "wt.nv": "body > div > div > form",
   "wt.form_action": "/form_submit",
   "wt.form_last_interacted_field_name": "comments",
   "wt.form_name": "Registration Form",
   "wt.form_enctype": "application/x-www-form-urlencoded",
   "wt.form_target": "_self",
   "wt.form_method": "GET"
 }

Additional information

The form tracking capability can be enabled on web pages with multiple forms also. You can specify which forms you would like to track on a page.
If the user interacts with one or more forms on a page containing multiple forms and then navigates away from the page without submitting any of the interacted forms, the plugin triggers multiple Form Interaction Abandonment Events.
If the user interacts with multiple forms on a web page and submits only one form, the plugin tracks a submission event only for the submitted form, and abandonment events for other interacted forms on the page.
The Form Tracking plugin also tracks dynamically added forms to the DOM after the webpage has loaded.
The Form Tracking plugin also tracks user behavior on forms in single-page applications.

Plugin configuration

The following code is the JSON for the plugin configuration.

 {
  "enable": false,
  "click_type": "click",
  "options": [
    {
      "url": "myurl.com",
      "forms_to_track": [
        {
          "form_selector": "form",
          "display_name": "my_form",
          "impression": true,
          "impression_abandonment": true,
          "interaction": true,
          "interaction_abandonment": true,
          "form_submit": true,
          "submit_selector": "button.submit",
          "parameters": [
            {
              "name": "some_key",
              "value": "some_value"
            },
            {
              "name": "ora.page_title",
              "dom_selector": "title"
            }
          ]
        }
      ]
    }
  ]
}

The definitions of each parameter from the JSON are as follows:

Parameter	Description	Mandatory / Optional	Default Value	Notes	Sample
`enable`	Used to indicate whether to enable or disable the plugin.	-	false	-	-
`click_type`	Type of the event to bind onto the DOM element	-	mousedown	-	mousedownmouseupclick
`options`	An array for providing options for configuring the Form Tracking plugin.	-	-	Multiple forms can be tracked across different web pages	-
`url`	Used to specify the URL of the page the link goes to	Optional	-	This is the page where the forms_to_track configuration will apply. This is an optional field. If empty, the forms_to_track parameter will be applied across the domain	Refer URL sample table
`forms_to_track`	Used to add configurations for form(s)	-	-	You can add multiple configurations for different forms on the same page. If multiple configurations are added for the same form then the first configuration is only considered	-
`form_selector`	Specifies a query selector that is used to identify the form uniquely	-	-	-	document.querySelector("#my_form_id");document.querySelector(".myclass");document.querySelector("div.user-panel.main input[name='login']")document.querySelector("div.user-panel:not(.main) input[name='login']");
`display_name`	Specifies an alias for the form to be passed to the reporting server	Optional	-	-	-
`impression`	Indicates whether to trigger form visibility event	-	false	Allowed values: true/false	-
`impression_abandonment`	Indicates whether to trigger a form interaction abandonment event	-	-	Allowed values: true/false	-
`interaction`	Indicates whether to trigger a form interaction event	-	-	Allowed values: true/false	-
`interaction_abandonment`	Indicates whether to trigger a form interaction abandonment event	-	-	Allowed values: true/false	-
`form_submit`	Indicates whether to trigger a form submission event	-	-	Allowed values: true/false	-
`parameters`	Additional parameters that needs to be collected when this event occurs	Optional	-	-	-
`name`	key for the additional param	Mandatory	-	-	-
`value`	Static value needs to be sent when event occurs	Optional	-	-	-
`dom_selector`	A dynamic value needs to be captured from current page and sent when event occurs	Optional	-	value/dom_selector should be present in parameters	#my_id, .my-class

URL sample table

Scenario	Sample
Track all forms from all pages of a domain	www.domain.com\/
Track all forms from all pages under a path	www.domain.com\/path\/
Track all forms under the root folder of a domain or folder of a path	All forms on home page of a domain -www.domain.com? All forms on a specific page under a domain or a path -www.domain.com/path?
Track all forms on a page only	www.domain.com/path/page.ext?
Tracks forms under the path for any matching top-level-domain (TLD)domain.com,domain.in, etc.	www.domain.*\/path\/
Track all forms from all paths under multiple domains	Separate the domains with pipe (\|) symbolwww.domain1.com\/path\/\|www.domain2.com\|www.domain3.com\|
Track all forms served by https or http protocol for the same domain	(http(s?))://((www.)?)domain.comEg.http://www.domain.com,https://www.domain.com,http://domain.com,https://domain.com
Skip forms from a particular page under a domain	www.domain.com\/(?!pagename)([a-z0-9]+)This format skips tracking forms from the page with name as pagename

Sample configurations

Sample 1

 {
  "enable": false,
  "click_type": "click",
  "options": [
    {
      "url": "https://www.xyz.com/reservation.html",
      "forms_to_track": [
        {
          "form_selector": "#reservation",
          "display_name": "Air Reservation Form",
          "impression": true,
          "impression_abandonment": true,
          "interaction": true,
          "interaction_abandonment": true,
          "form_submit": true
        },
        {
          "form_selector": "#contact",
          "display_name": "Reservation Help Form",
          "impression": true,
          "impression_abandonment": true,
          "interaction": true,
          "interaction_abandonment": true,
          "form_submit": true
        }
      ]
    }
  ]
}

Sample 2

 {
  "enable": true,
  "click_type": "click",
  "options": [
    {
      "url": "https://www.xyz.com/reservation.html",
      "forms_to_track": [
        {
          "form_selector": "#reservation",
          "display_name": "Air Reservation Form",
          "impression": true,
          "impression_abandonment": true,
          "interaction": true,
          "interaction_abandonment": true,
          "form_submit": true
        },
        {
          "form_selector": "#contact",
          "display_name": "Reservation Help Form",
          "impression": true,
          "impression_abandonment": true,
          "interaction": true,
          "interaction_abandonment": true,
          "form_submit": true
        }
      ]
    },
    {
      "url": "https://www.abc.com/registration.html",
      "forms_to_track": [
        {
          "form_selector": "#registration",
          "display_name": "Account Registration Form",
          "impression": true,
          "impression_abandonment": true,
          "interaction": true,
          "interaction_abandonment": true,
          "form_submit": true
        }
      ]
    }
  ]
}

Adding a form for tracking during runtime

ORA.analytics.trackForm(config)

This function is useful to add a new form for tracking during runtime to the existing formTracking configuration. This is applicable only when the plugin is enabled.

Sample

The following code returns false if the plugin is disabled, or if an invalid configuration is passed. Otherwise, it proceeds to add the new configuration to the existing configuration.

 varconfig={
   'forms_to_track': [
     {
       'form_selector': '#signup',
       'display_name': 'Account Signup Form',
       'impression': true,
       'impression_abandonment': true,
       'interaction': true,
       'interaction_abandonment': true,
       'form_submit': true
     },
     {
       'form_selector': '#query',
       'display_name': 'Help Form',
       'impression': true,
       'impression_abandonment': true,
       'interaction': true,
       'interaction_abandonment': true,
       'form_submit': true
     }
   ]
 }ORA.analytics.trackForm(config);

Parameter reference

Parameter	Description	Default Value
wt.ev	wt.ev specifies the type of event activity on a mobile device, such as clicks, swipes, and content views.	-
wt.es	wt.es identifies the page a user was on when an event occurred.	-
wt.nv	wt.nv DOM Selector for the form element that was viewed, interacted, or submitted, so that you can track the corresponding page areas.	-
wt.form_action	wt.form_action identifies the action on the form. This will be empty if the form is loaded in browsers IE9, IE10 and IE11.	-
wt.form_last_interacted_field_name	wt.form_last_interacted_field_name identifies the field last interacted by the user before abandoning the form.	-
wt.form_name	wt.form_name identifies the form with the display name provided in the configuration.	-
wt.form_enctype	wt.form_enctype captures the form encoding type used for the form.	-
wt.form_target	wt.form_target specifies an identifier that indicates where to display the response after the form submission. Possible values are_blank,_self,_parent,_topandframename.	self
wt.form_method	wt.form_method specifies the form protocols for submitting form data. Possible values are GET & POST.	GET

Protocols used

The Form Tracking plugin uses the below protocols to send form-tracking data to the server.

gif Protocol: Used in case of form visibility & interaction event tracking. gif Protocol is a GET.
beacon Protocol: Beacon uses POST internally for data transfer. This protocol is used in case of form abandonment & submit event tracking. Since beacon protocol is not supported in browsers Internet Explorer 11 and below, the plugin uses synchronous POST calls which may lead to navigation delays.

Learn more

Infinity Module Plugins