Track Form Abandonment Using Google Analytics Funnel Visualization

My previous post was about CRO, in that post I included form optimization as an important step for a better CRO. Form optimization can not be done without collecting data about users interaction with the form, and form abandonment is probably the most important metric that can do that.

What is form abandonment:

Form abandonment is the event where people start filling a form (at least filling one field) but did not click the submit button, so they have the intent to fill the form but due to possibly some hurdles the did not complete it, possible hurdles:

• Long form (too many fields)
• Technical issues (the form is not working on some devices or browsers)
• The form has personal questions that users are not willing to fill
• The form is broken or the Captcha is so difficult.

There are some online service like Hotjar that can track form abandonment, but unfortunately Hotjar does not work with every form easily, not mention that the data lives outside Google Analytics which means you have another platform to work on and monitor. You can see the form tracking chart offered by Hotjar below, it gives you the time spent by users field each field and the abandonment rate for each field.

In this post I will provide a step by step tutorial how to do form abandonment tracking using Google analytics. I will assume you a simple form on your website like the one belwo:

The source code of the form will like like this:

I will assume that the submission will lead to a thank you page like www.yourwebsite.com/thank-you, please be aware that this tutorial will require a good knowledge of Google Analytics and Google Tag Manager (GTM).

The method I will be explaining will be utilizing the funnel visualisation feature in Google Analytics, which is not designed initially for that, it is designed more to track multiple pages funnel. Considering that a high level of accuracy is not required here the method below should provide a good insight on where and why people abandoning your form.

Step #1:

First step will be pushing an event to the data layer when a user try to fill in a field along with the field name, you can do that by adding the JavaScript code below as a custom HTML tag to your Google Tag Manger:

(function($) {
$(document).ready(function() {
$('form :input').blur(function () {
if($(this).val().length > 0 && !($(this).hasClass('completed'))) {
switch($(this).attr('name')) {
case "first_name":
virtualp = "first-name";
break;
case "last_name":
virtualp = "last-name";
break;
case "phone_number":
virtualp = "phone";
break;
case "email_address":
virtualp = "email";
break;
case "comments":
virtualp = "comments";
break;
default:
virtualp = "unknown";
}

dataLayer.push({'eventCategory': 'Form - ' + $(this).closest('form').attr('name'),
'eventAction': 'completed',
'feildLabel': virtualp,
'event': 'gaEvent'});
$(this).addClass('completed');
}
else if(!($(this).hasClass('completed')) && !($(this).hasClass('skipped'))) {
$(this).addClass('skipped');
}
});
});
})(jQuery);

Please note that:

• The code above assume that jQuery is installed already on the website.
• You need to change the case to match your field names.
• You can change virtualp (which is going to be the virtual page URL) to anything also just make sure the page is not already existing on your website.

Step #2:

Add a datalayer variable to track the field name:

Step #3:

Create a virtual page view to track every form field filling as a pageview:

The firing rule for the tag above will be as below:

After that publish your GTM container.

Step #4:

In Google analytics create a goal that tracks the thank your page with funnel steps that reflect the virtual page names you have set in step #1:

When you have enough data you should be able to see a funnel visualisation as below:

The funnel above should tell which field is causing that highest abandonment rate so you can either remove or change it.

Step #5 - Bonus - Track scrolling down as a page view:

Some forms are placed below the fold, or they are multiple step forms where people need to scroll down to see the other parts of the form. For those forms you can add the scrolling down to the form location as a virtual page view (see the tag and the trigger below and use them in GTM):

Summary:

Form tracking abandonment is an important part of conversion rate optimization, always do it with any tool you feel comfortable with, there are other things you can do from a CRO prospective when it comes to form:

• Exit intent pop-up window trying to give users unrefusable offer to stay on the page and fill the form.
• Tracking filled fields even if people did not click submit and use it to better understand user behaviour.