Error Tracking Tutorial

This tutorial will help you set up tracking of form validation errors displayed to users.

1. Create a new report

reports

Sign in to the panel, select a project and click [create report]. Call it “Error Tracking”.

2. Create a segment that will trigger error tracking

A definition of a segment triggering error tracking will depend on how your forms are validated. Usually, forms are validated after:

  • every completed field by a user
  • a form submission with a page reloaded
  • a form submission without reloading a page

If you are unsure which validation scenario or scenarios apply in your case, simply go to your website and try completing it.

You will now need to find a common denominator or denominators that you could use to define a triggering segment.

Triggering error tracking after every completed field by a user

Every time a user completes a form field a change event (E) is tracked, for example:

select[2]#accountTitle.change
input[2]#accountFirstName.change

and a common denominator for them is:

*.change

Triggering error tracking after a form submission with a page reloaded

Every time a page is reloaded, a Section event is tracked based on URL of the page. For example:

Section=account/registration
Section=account/login
Section=checkout/payment

If all pages with forms have the same URL prefix (“account/”) your segment definition can be set to:

Section=account/*

Otherwise, use:

Section=*

to trigger the tracking on all the pages or define multiple rules using [OR] condition:

Section=account/* OR Section=checkout/*

Triggering error tracking after a form submission without reloading a page

In this case you will need to use either an Action event (M) corresponding to a form submission or an interactive event (E) corresponding to a click on a submit button.

To find out which option will work for you, open your site in Preview Mode and go to a page with forms.

Click [show log] in the console and select “click” and “Action” to filter the log. Then try submitting the form. The events in the console will look similar to the screenshot below:

error-tracking-console

Depending on how your form is built, an Action event may not be fired and in that case there will only be a click event in the log.

Copy those events from the log to a notepad for now and try submitting a form on another page as different forms will produce different events:

error-tracking-console-1

In our case, the events fired after submitting the registration form (clicking “Continue” button) were:

form[1]#register/div[9].centered/input[1].btn.primary.register.click
Action=Submitted form: form[1]#register

and after submitting the login form (clicking “Sign in Now” button):

form[2]#signin/div[4].centered/input[1].btn.primary.signin.click
Action=Submitted form: form[2]#signin

We need to find common denominators for those events and replace the rest of the events with wildcards (*):

*.btn*.click
Action=Submitted form: *

If both click and Action events are fired, always use an Action event as it would cover situations in which the user would submit the form using the keyboard or soft keyboard on mobile.

Defining a Segment

Once you know for which events you want to trigger the tracking, click [+] to create a new segment:

error-tracking-add-segment

A Segment Definition Editor will show up:

error-tracking-add-segment

Paste the event (for example *.change or *.btn.click or Action=Submitted Form* or Section=*) into (3) the KEY/VALUE field and click (5) the [Apply] button to confirm.

A new branch with the segment will appear. (1) Select it then and choose (2) the Triggers tab. Switch to (4) “Data Collection” and click (5) “Save Page Content As Errors”.

selecting-error-tracking-response

Configuring the Response

error-response

(1) Delay

Start by setting a delay in milliseconds to make sure that the validation script has enough time to process the form. Usually 1000 (1 sec) or 2000 (2 sec) should be enough.

(2) Selectors

Add a selector of page elements containing errors. You can use standard CSS selectors. If your error messages are displayed in different ways you may need to add multiple selectors. Just make sure that no two selectors match the same elements, otherwise one error message will be tracked multiple times.

(3) Split on Line Break

If all error messages are displayed within a single element:

<p class="errors">
Phone number is required.<br>
Invalid email address.
</p>

you can set “SPLIT ON LINE BREAK:” to “on”, to track each of those errors as a separate event.

(4) Testing

To quickly test if the response is correctly configured:

  • copy the code snippet,
  • open your website in Preview Mode,
  • go to a page with a form and submit it to see displayed errors,
  • open the browser console, paste the code snippet and hit the enter key to run the code,
  • click “Show Log” – it should now contain “Error” events.

(5) Error Event Syntax

Errors will be saved using the following syntax:

Error={{content of element}}

For example:

Error=Invalid phone number

Tip: to see what errors are being tracked, go to Stats and enter “Error=*” in the Meta Events field and click [Load Stats].

(6), (7) Publishing a Response

If everything is working correctly, select (5) “Live Mode” (otherwise the response will be triggered only in the Preview Mode) and click (6) “Save”.

The tracking should start working in under 2 minutes. If you want to test if the response is triggered correctly, make sure you open your site in a new tab.