3Jan

Form Abandonment Tracking with Google Analytics

Forms are always the pain points in the conversion path, and form abandonment analysis is the key to find out which field causes the most pain and stops people going down the conversion path.

To be able to do form analysis, first thing you will need is to track which fields are touched by the visitors, and by aggregating the data you can find out the field causing most people to abandon the form. The usual way is to put a piece of Javascript code on the form field HTML element to trigger a tracking request when the mouse is pointed in the field. By tracking each field the visitor touched, you can see which is the last field the visitor stopped at.

The company website I work for has countless fields, that makes putting code on the form fields a mission impossible. Well, it could be done, but it might take a year considering our deployment cycles and tasks in the back log. But, I have tag management system, which I can insert Javascript bypass the deployment cycles. So I wrote this piece of Javascript which can find all the forms on the web pages, and inject the tracking Javascript on all the form fields. The following code is an example, which will trigger a Google Analytics event when someone clicks on a form field. It uses the Universal Analytics code syntax so if you are still running the older version of GA code, you will have to update the event tracking code in the example to make it work for you.

Once the code is implemented, you will find a event called “form-abandonment” in your Google Analytics event reports, and drill down by form ID then form field ID. So the forms and fields must have HTML element IDs. If you want to build a funnel with the form fields, you can change the code to trigger virtual pageview tracking requests.

Let me know what you think about it, or if you have any question feel free to contact me.

_fieldTracking = {};
_fieldTracking.ie = /*@cc_on!@*/false;
_fieldTracking.focusedFormFields = new Array();
_fieldTracking.formFieldTriggersActivated = false;
_fieldTracking.setFormFieldTriggers = function(){
	var forms = document.getElementsByTagName('form');
	for(i=0;i<forms.length;i++){
		var form = forms[i];
		var inputFields = document.getElementsByTagName('input');
		for(j=0;j<inputFields.length;j++){
			var field = inputFields[j];
			if(field.type != 'hidden') _fieldTracking.addListener(field, _fieldTracking.trackFieldFocus);
		}
		var selectFields = document.getElementsByTagName('select');
		for(j=0;j<selectFields.length;j++){
			var field = selectFields[j];
			if(field.type != 'hidden') _fieldTracking.addListener(field, _fieldTracking.trackFieldFocus);
		}
		var textFields = document.getElementsByTagName('textarea');
		for(j=0;j<textFields.length;j++){
			var field = textFields[j];
			if(field.type != 'hidden') _fieldTracking.addListener(field, _fieldTracking.trackFieldFocus);
		}
	}
};
_fieldTracking.addListener = function(element, func) {
	if(_fieldTracking.ie){
		element.attachEvent('onfocus', func);
	}else{
		element.addEventListener('focus', func, false);
	}
};
_fieldTracking.trackFieldFocus = function(e){
	try{
		var currentElement = (_fieldTracking.ie) ? e.srcElement : e.target;
		if(currentElement){
			var p = _fieldTracking.focusedFormFields.indexOf(e.target.form.id+'#'+e.target.id);
			console.log(p);
			if(p == -1){
				_fieldTracking.focusedFormFields[_fieldTracking.focusedFormFields.length] = e.target.form.id+'#'+e.target.id;
				ga('send', 'event', 'form-abandonment', e.target.form.id, e.target.id);
			}
		}
	}catch(e){
		;
	}
}
if(typeof _pageId != 'undefined' && _pageId.indexOf('quote')>=0){
	if(!_fieldTracking.formFieldTriggersActivated) _fieldTracking.setFormFieldTriggers();
	_fieldTracking.formFieldTriggersActivated = true;
}
Share this Story

About chaoming.li

Technology entrepreneur, web analytics specialist, Internet enthusiasts. I also like movies, computer games, history and other interesting stuff. I was born in Guangzhou China and I live in Sydney Australia now.

3 comments

  1. I’ve tried implementing the above code placing it between a tags in my site’s header, AFTER the Google analytics tracking plugin.

    It doesn’t do anything , do I have to do something else in order for the event to trigger within analytics ?

    Thank you for sharing this solution to tracking form abandonment.

    • Replace the last four lines with:

      if(!_fieldTracking.formFieldTriggersActivated) _fieldTracking.setFormFieldTriggers();
      _fieldTracking.formFieldTriggersActivated = true;

  2. Still doesn’t appear to be working, pasted the code below

    _fieldTracking = {};
    _fieldTracking.ie = /*@cc_on!@*/false;
    _fieldTracking.focusedFormFields = new Array();
    _fieldTracking.formFieldTriggersActivated = false;
    _fieldTracking.setFormFieldTriggers = function(){
    var forms = document.getElementsByTagName(‘form’);
    for(i=0;i<forms.length;i++){
    var form = forms[i];
    var inputFields = document.getElementsByTagName('input');
    for(j=0;j<inputFields.length;j++){
    var field = inputFields[j];
    if(field.type != 'hidden') _fieldTracking.addListener(field, _fieldTracking.trackFieldFocus);
    }
    var selectFields = document.getElementsByTagName('select');
    for(j=0;j<selectFields.length;j++){
    var field = selectFields[j];
    if(field.type != 'hidden') _fieldTracking.addListener(field, _fieldTracking.trackFieldFocus);
    }
    var textFields = document.getElementsByTagName('textarea');
    for(j=0;j<textFields.length;j++){
    var field = textFields[j];
    if(field.type != 'hidden') _fieldTracking.addListener(field, _fieldTracking.trackFieldFocus);
    }
    }
    };
    _fieldTracking.addListener = function(element, func) {
    if(_fieldTracking.ie){
    element.attachEvent('onfocus', func);
    }else{
    element.addEventListener('focus', func, false);
    }
    };
    _fieldTracking.trackFieldFocus = function(e){
    try{
    var currentElement = (_fieldTracking.ie) ? e.srcElement : e.target;
    if(currentElement){
    var p = _fieldTracking.focusedFormFields.indexOf(e.target.form.id+'#'+e.target.id);
    console.log(p);
    if(p == -1){
    _fieldTracking.focusedFormFields[_fieldTracking.focusedFormFields.length] = e.target.form.id+'#'+e.target.id;
    ga('send', 'event', 'form-abandonment', e.target.form.id, e.target.id);
    }
    }
    }catch(e){
    ;
    }
    }
    if(!_fieldTracking.formFieldTriggersActivated) _fieldTracking.setFormFieldTriggers();
    _fieldTracking.formFieldTriggersActivated = true;

Leave a Reply

Your email address will not be published. Required fields are marked *

*

© Copyright 2014, All Rights Reserved