Tracking Form Submissions with Google Analytics Events

joe.price's picture

Google Analytics can be customized to track just about anything on your site.

Google Analytics Event Tracking is a method available in the ga.js tracking code that you can use to record user interaction with website elements, such as a Flash-driven menu system.

With ga.js, you would commonly apply Event Tracking to:

  • Any Flash-driven element, like a Flash website, or a Flash Movie player
  • Embedded AJAX page elements
  • Page gadgets
  • File downloads
  • Load times for data

Usage takes the form of _gaq.push(['_trackEvent', 'category', 'action', 'opt_label', 'opt_value', 'opt_noninteraction']). The category, action, and opt_label act like a event hierarchy - Event Category > Event Action > Event Label - enabling you to logically organize your event data.

Here is a simple example to track submissions of the form with id="my-form" where we set category = My Form and action = Form submission. In your Google Analytics Events Overview, you'll see this Event Category and Event Action now tracked.

jQuery(document).ready(function($) { // Track submission events. $('#my-form').submit(function() { _gaq.push(['_trackEvent', 'My Form', 'Form submission']); }); });

This can be extended further for more complex forms or websites by adding and optional label (opt_label = New submission).

jQuery(document).ready(function($) { // Track submission events. $('#my-form').submit(function() { _gaq.push(['_trackEvent', 'My Form', 'Form submission', 'New submission']); }); });

The first time I tried to implement this functionality, I had a hard time finding many examples. Hopefully this will get you started tracking events a little quicker.

Tags: