Tracking of Pages with Forms

Visit Form Analytics on our website for a general product overview.

Pages to Add the Tracking Code

If you want to effectively analyse forms on your website, make sure you add the tracking code on:

  • all the pages with the forms in the process (i.e. “registration”, “shipping”, “payment”),
  • intermediary pages without forms (“order review”),
  • error pages with both handled (“payment failed”, “session expired”) and unhandled system errors (4xx, 5xx),
  • and most importantly the success page displayed to users who successfully complete the entire process (“thank you”).

If you are only interested in analysing your forms and not the entire site, don’t add the tracking code to all the pages of your website, as you will capture many visits in which users never went to pages that contain your forms and you will be unnecessarily charged for those visits.

Below are examples explaining where to add the tracking code on different kind of websites.

Forms in an Online Shop

page tracking code
Home NO
Product NO
Basket NO/YES*
Registration / log in YES
Shipping YES
Payment YES
Order Review YES
Purchase Completed YES
Purchase Failed YES

Forms in Insurance Quotes

page tracking code
Home NO
Car Insurance Description NO
Step 1 – Car YES
Step 2 – Driver YES
Step 3 – Your Quote YES
Step 4 – Payment YES
Purchase completed YES 

The Same Form Displayed in Modal Window on Different Pages

If you want to track a form that can be dynamically displayed anywhere on your website (i.e. a survey, newsletter sign up, content access gate) and you don’t want to track all sessions but only sessions in which users have seen the form, then  you can inject the tracking code dynamically just in the place where you display the form.

page tracking code
Home NO
Home with Newsletter Displayed YES
Product NO
Product with Survey Displayed YES

What if there is no success page?

Without tracking of the success page it will be impossible to reliably measure if a form was completed correctly and that can lead to incorrect insights.

If your form doesn’t have a separate success page to which users are redirected after completing the form and, instead, the success message is displayed on the same page, you will need to implement a small change on your website in order to correctly track form completion.

Add a Hash Parameter to URL

Hash parameter is a part of URL after # character (hash). It can be easily added or changed using JavaScript:

window.location.hash="thank-you"

The above command, executed upon successful form submission, would change the hash in the URL from:

mywebsite.com/contact

to:

mywebsite.com/contact#thank-you

without reloading the page. Upon detecting that the hash is changed, the tracking code would save a (M) Section=contact#thank-you meta event that could be used to measure successful submits.

Use JavaScript API

If, for some reason, you don’t want to change the hash in the URL, you can use JavaScript API to manually track a (M) Section meta event informing that a user is seeing a page with success message displayed:

uDash.saveMeta("Section","contact/thank-you");

What if the URL is the same for all steps of a multi-step forms?

Some forms consist of multiple steps that are displayed to user one after another on the same page, without reloading and/or changing the URL of that page to indicate in which step user currently is.

While tracking of the steps is not required for the Form Analytics to work correctly, it makes analysis and reporting easier.

To track the steps as (M) Section meta events you can either use JavaScript API:

uDash.saveMeta("Section","Checkout/Step1/Registration");
uDash.saveMeta("Section","Checkout/Step2/Shipping");
uDash.saveMeta("Section","Checkout/Step3/Payment");
uDash.saveMeta("Section","Checkout/Step4/Thank-You");

or just make sure that hash parameter (the part of URL after # character) is updated on each of the steps:

https://mywebsite.com/checkout#Step1/Registration");
https://mywebsite.com/checkout#Step2/Shipping");
https://mywebsite.com/checkout#Step3/Payment");
https://mywebsite.com/checkout#Step4/Thank-You");