Yesterday, Sam from SEOmoz posted 11 Conversion rate lessons they had learned in 2009 – along with some traffic stats for their blog.

The 10th lesson that Sam posted really struck a chord with me and I got thinking about how best to implement it. Sam suggests that you track how far people get through your forms by registering a virtual page view each time someone completes a form element.

Some background

One of the first things to do when looking at improving the conversion rate of a page is to work out a list of possible client objections. There could well be some incredibly obvious ones, for example a lot of online shops somewhat hide the postage costs and only display them once you have added a product to the cart. The best way to find this out is to get a representative sample of your users and talk to them. Conversion rate experts have a good post listing tools to reveal why people abandon your website

There are another set of conversion hurdles that are less obvious. For example it is often said that the longer a form is the fewer people will fill it in.

Tracking form completion

If, as Sam suggests you could track each time a field is completed in one of your forms, you should be able to spot if there are any questions that are causing your customers to run away screaming. My best guess is that you will also see a drop off of entries as people progress through the form, as people, for one reason or another decide not to continue.

With a few lines of javascript and a bit of Google Analytics magic you can easily track these events and over time make improvements to the form to increase the number of people who get all the way through.

Tracking custom events within Google Analytics

Google has a nifty function called _trackEvent which does pretty much what it says on the tin. The original SEOmoz post talks about virtual page views, but I believe using these events is a better because it doesn’t inflate your page view metrics.

_trackEvent(category, action, optional_label, optional_value)

The code

Because most of you will skip reading anything that looks like help I’ll link directly to the example so you can go an have a play.

In the example I’ve created a bog standard form, with 4 text elements and one drop down. There is nothing of interest or different to any other form you see around.

In order for the event tracking to work you need to be using the ga.js tracking code.

I’ve also used a jquery url parser, the installation of which was very simple.

1.  $(document).ready(function() { 
2.      var currentPage = jQuery.url.attr("path");
3.      $(':input').blur(function () {
4.          if($(this).val().length > 0){
5.              pageTracker._trackEvent("Form: " + currentPage, "input_exit", $(this).attr('name'));
6.          } 
7.      });
8.  });

The jquery code in question is fairly simple. The first line is standard jquery which just ensures that everything has loaded that is needed. Line 2 uses the url parser in order to work out what page we are currently on. In the example the path will be /files/ga_form_events/index.html.

Line 3 uses a jquery selector to select all input elements (input, textarea, select & buttons) which we bind a function to when the blur element is triggered. This function then checks that there has been something typed (or chosen) and if so it fires of the google analytics event tracking code. In the track event function call we dynamically select the name of the element.

The results

Assuming this is installed and working as expected, then you should start seeing events in your Google Analytics dashboard. To view these choose Event Tracking from the Content section of your reports.

Assuming you’ve installed everything correctly, then a few hours later, you should start seeing the events filtering through into your reports.

A caveat

The code is very much a proof of concept, and I wouldn’t recommend you install it on any live site, without proper testing. If people find it useful I might spend time learning how to package it up into a jquery plugin. I’m sure there will be issues and bugs, and no doubt internet explorer will do something funky, but as it’s a proof of concept, i’ll leave that as an exercise to yourselves. If anyone has any comments or ways it can be improved then let me know in the comments, and i’ll happily update the post.

Update: Ben Jesson from conversion rate experts points out that you can get the same sort of insights from ClickTale. This won’t add the data to Google analytics, and doesn’t involve messing around with Jquery, so isn’t as much fun!

Further work

We’ve just had a discussion in the office about ways you could improve the above. Once you have the framework there are a myriad of improvements, and depending on what you want to track you amend the code accordingly.

Tweet This Post