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");