Tracking Form Field Abandonment via jQuery for Web Analytics

Form field abandonment tracking and understanding the exit points that users leave your specific form field is something that is invaluable to web analytsts.  This blog posting will show you how to do leveraging jQuery for both Adobe Analytics and Google Analytics. To start, you will need to insert the below code into your TMS (Tag Management System) or on your page itself where the form resides.

$(document).ready(function() {
var currentPage = window.location.pathname;$(‘:input’).blur(function () {
if($(this).val().length > 0){

//Google Analytics Tracking
ga(‘send’, ‘event’, ‘Form:’+currentPage, ‘Exit Field’, ‘$(this).attr(‘name’)’);

//Adobe Analytics Tracking

s.linkTrackVars=”propXX,events”;

s.linkTrackEvents=”eventXX”;

s.propXX= “Form | currentPage | $(this).attr(‘name’)”;

s.events = “eventXX’;

s.tl(‘this’,’o’,’Form Abandonment’);
}
});
});

The code above uses a jquery selector to select all input elements (input, text area, select & buttons) which the code binds a function to when the blur element is triggered. This function then checks that there has been something typed (or selected).  If this is true, it fires off the appropriate tracking to either Google Analytics or Adobe Analytics.  You can easily add logic to pass this to an eVar as well for Adobe (I used a prop just simply because you can enable pathing on it and see how users went through. For Google Analytics I am just sending this to an event but this can be adjusted to also pass to a custom dimension.

That’s it! Now you should be on your way to tracking form field abandonment within your current analytics solution of choice.