Menu icon Foundation
Abide Error Tracking with Google Analytics

Form error logging is incredibly important when trying to improve or simply diagnose the health of a form. So I created some Google analytics event tracking to help diagnose user errors on forms leveraging Abide.

Over the past year we completely rebuilt a registration process and needed to see how our registration was performing. I designed a few error tracking pieces which really helped reveal hangups for users trying to register. I thought I'd retrofit that code to work with abide.

https://github.com/Ethanhackett/Foundation-Abide-Error-Tracking

There are two types of events recorded upon form submissions using abide.

Foundation Abide Error Details:
- Error Input Label
- Error Response
- Error Time (HH:MM AM/PM)
- Error Input Value

It also tracks Foundation Abide Error Count which counts the total number of inputs with errors.

A combination of the two should allow you to draw some conclusions about user activity like:
- How clear are required fields
- Are there any unclear input requirements
- Are there commonly skipped or ignored inputs
- Are users getting errors on hidden inputs that are supposed to be revealed

I'd love to improve this so if you have any feedback, thoughts, ideas or comments ad them here or add them on github.

Screen shot 2014 03 26 at 2.48.54 pm

Screen shot 2014 03 26 at 2.49.06 pm

(function( $ ) {
 
    $.fn.abideevents = function() {
    	
		// Get date and convert to HH:MM AM/PM
		var date = new Date();
		var hours = date.getHours();
		var minutes = date.getMinutes();
		var ampm = hours >= 12 ? 'pm' : 'am';
		var hours = hours % 12;
		var hours = hours ? hours : 12; // the hour '0' should be '12'
		var minutes = minutes < 10 ? '0'+minutes : minutes;
		var errorTime = ' (' + hours + ':' + minutes + ' ' + ampm + ')';
	
 		// For each error do the following
		$('div.error').each(function() {
		
			// Retrieve the error message
			var errorText = $(this).find('small.error').text();
			// Retrieve the label for the input
			var labelText = $(this).find('label').text();
			// Strip out the Required text that appears
			var labelText = labelText.replace(' required','');
			// Retrieve the input value
			var inputValue = $(this).find('input').val();
			// Combine the values into the error submitted to Google Analytics
			var error = errorText + errorTime + ' : ' + inputValue;
			// Submit the google event
			_gaq.push(['_trackEvent', 'Foundation Abide Error Details', labelText, error]);
			
		});
		
		// Total Number of Errors present on the page
		var errorCount = $('div.error').length + ' Errors'
		// Count the number of error messages
		_gaq.push(['_trackEvent', 'Foundation Abide Error Count', 'Errors On Submit', errorCount]);
 
    };

}( jQuery ));



// Then include this after you call the foundation function.
$( document ).ready(function() {
  $('#myForm').on('invalid', function () {
    $(this).abideevents();
  });
});

abideformFoundationgoogle analytics

Form error logging is incredibly important when trying to improve or simply diagnose the health of a form. So I created some Google analytics event tracking to help diagnose user errors on forms leveraging Abide.

Over the past year we completely rebuilt a registration process and needed to see how our registration was performing. I designed a few error tracking pieces which really helped reveal hangups for users trying to register. I thought I'd retrofit that code to work with abide.

https://github.com/Ethanhackett/Foundation-Abide-Error-Tracking

There are two types of events recorded upon form submissions using abide.

Foundation Abide Error Details:
- Error Input Label
- Error Response
- Error Time (HH:MM AM/PM)
- Error Input Value

It also tracks Foundation Abide Error Count which counts the total number of inputs with errors.

A combination of the two should allow you to draw some conclusions about user activity like:
- How clear are required fields
- Are there any unclear input requirements
- Are there commonly skipped or ignored inputs
- Are users getting errors on hidden inputs that are supposed to be revealed

I'd love to improve this so if you have any feedback, thoughts, ideas or comments ad them here or add them on github.

Screen shot 2014 03 26 at 2.48.54 pm

Screen shot 2014 03 26 at 2.49.06 pm

(function( $ ) {
 
    $.fn.abideevents = function() {
    	
		// Get date and convert to HH:MM AM/PM
		var date = new Date();
		var hours = date.getHours();
		var minutes = date.getMinutes();
		var ampm = hours >= 12 ? 'pm' : 'am';
		var hours = hours % 12;
		var hours = hours ? hours : 12; // the hour '0' should be '12'
		var minutes = minutes < 10 ? '0'+minutes : minutes;
		var errorTime = ' (' + hours + ':' + minutes + ' ' + ampm + ')';
	
 		// For each error do the following
		$('div.error').each(function() {
		
			// Retrieve the error message
			var errorText = $(this).find('small.error').text();
			// Retrieve the label for the input
			var labelText = $(this).find('label').text();
			// Strip out the Required text that appears
			var labelText = labelText.replace(' required','');
			// Retrieve the input value
			var inputValue = $(this).find('input').val();
			// Combine the values into the error submitted to Google Analytics
			var error = errorText + errorTime + ' : ' + inputValue;
			// Submit the google event
			_gaq.push(['_trackEvent', 'Foundation Abide Error Details', labelText, error]);
			
		});
		
		// Total Number of Errors present on the page
		var errorCount = $('div.error').length + ' Errors'
		// Count the number of error messages
		_gaq.push(['_trackEvent', 'Foundation Abide Error Count', 'Errors On Submit', errorCount]);
 
    };

}( jQuery ));



// Then include this after you call the foundation function.
$( document ).ready(function() {
  $('#myForm').on('invalid', function () {
    $(this).abideevents();
  });
});
Rafi Benkual over 5 years ago

This is really awesome! We could add your port to the Tools page. http://foundation.zurb.com/develop/tools.html

Ethan Hackett over 5 years ago

Thanks Rafi. That would be awesome. I'd love to have a couple people try it out and give me some feedback so I could improve it. I'm sure there are some labeling improvements and possible bugs.