How to track form errors as events in GA with GTM

Why would you want to track form errors?

Well – you love to track conversions like form submissions and purchases right – but how about those times when forms fail?

Use GTM to track form field errors as events in GA We don’t want any barriers to having your visitors get in touch. So what if visitors were finding your form hard to use, understand or didn’t want to supply a phone number or email? Could those pesky mandatory fields be annoying your visitors or worse… forcing them to call instead?

Tracking errors on mandatory fields is a good way to gather data to help optimise your forms.

In the form we’re using we’re lucky to have unique CSS IDs for each error message, so we can track which field or fields prevented a successful submission.

***If all you have is a CSS Class then you can still use the ‘element visibility’ – but you’ll only track the overall number of fails – not which fields generated the error message. The more information we have about what’s going wrong on the form the better, so use encourage developers to incorporate unique IDs wherever possible.

Here’s a step-by-step process on how to use GTM to track form field errors as events in GA

We have 4 mandatory fields – First Name, Last Name, Telephone number and Email, so we will need one trigger and tag for every field.

We will be using the ‘Element Visibility‘ trigger type to track when errors appear.

When someone tries to submit this form without entering their first name, they get an error message ‘This field is required.’

Step 1: Create a new trigger in GTM

Use GTM to track form field errors as events in GA - create new element visibility trigger

Step 2: Identify the unique id – in this case generalEnquiryForm-firstName-error

Use GTM to track form field errors as events in GA - create new element visibility trigger - find the unique id

Step 3: Enter the ID, and select ‘every time as element appears on screen’. This is because it’s definitely meaningful if the form fails to submit successfully many times in one session!

Validate the error ID by including the error message text as a visible DOM element. This is just a safety measure as both ID and error message should appear together.

Use GTM to track form field errors as events in GA - validate Dom changes

Step 4: Create a new tag

  1. The event tracking is created from the Universal Analytics tag. this allows you to push the event to GA.
  2. Tracking type is ‘event’
  3. Your naming conventions areyour own, but make sure each event conforms to the same pattern. As we have 4 fields to track on our form, I’ve used the label for teh unique attribute.
  4. Don’t forget to select the GA id.

Use GTM to track form field errors as events in GA - new tag for form errors

Repeat these steps for every field that you want to track.

In GA Behaviour > Events > Top Events  you’ll find numbers telling you which form fields generates the most fail attempts.

Use GTM to track form field errors as events in GA - event labels

Findings

We found that in most cases the biggest obstacle is having to provide a phone number, therefore it makes sense to have it as an optional not mandatory field.

Did you find the same? Let us know in the comments below!

If you would like to know more about User Experience or tracking user jurneys, please get in touch with us at Digital Nation – call 0207 993 5482