Using Jquery and Google Analytics events to track form abandonment.

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.

seomoz-conv-rate-opt-10

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.

ga-events-categories

google-analytics-events

##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.

Duncan Morris

Duncan Morris

Duncan founded Distilled with Will in 2005. He built the, now defunct website CMS from the ground-up, and consulted for some of the company’s first clients. Today Duncan leads the management team and helps to steer...   read more

Get blog posts via email

24 Comments

  1. Nice tip but I think the virtual page views are better because it works with the 2 versions of Google Analtyics tracking code. The Goals only works with the ga.js tracking code.

    Anyway, thanks for sharing this advice/tip.

    reply >
  2. I've made a mistake on the last comment, it's not Goals, but Events. Sorry.

    reply >
  3. Wow. This looks like a great solution.

    The autobinding makes it portable to any form page. I'm going to have to try it out.

    Thanks Duncan

    reply >
  4. Seems like a simple solution - nice and clean - it would certainly work as a quick way to look into an under performing form.

    I'll give it a lash and see if I can poke holes in it

    reply >
  5. Thank you for the tip!

    reply >
  6. Great coverage of another technology that slipped in behind the scene. Thanks. I look forward to exploring this further.

    reply >
  7. Yep great flow chart but as they said if you can do this in clicktale without all the high level time consuming stuff it is a better use of your time.

    Again if you have taken the time to setup eventracking it is kinda cool in what you can do within google analytics.

    reply >
  8. STB

    That's a really nice, Duncan. Thanks for sharing!

    reply >
  9. Lovely combination of features. I'm surprised Google Analytics wasn't already offering it.

    reply >
  10. I know this post isn't recent but I just saw it for the first time from a link on SEOmoz. What you described here is an extremely useful tool for conversion analysis and optimization. Sure, ClickTale is an option but doing it yourself (arguably) gives you more control and I like that. I'm going to test this out on a could of my sites.

    reply >
  11. I'll implement here on my site soon and give feedback

    reply >
  12. I reckon tracking form abandonment is a great way of improving sites. You could consider taking your approach a bit further and also tracking the error messages people see during those forms. They might well prove the key to 'why' people are giving in frustration.

    One point of detail on the events vs pageviews issue. At the moment events are not included in GA funnel reports. So the advantage of using pageviews is that you might see the virtual 'form field' as the abandon route from a step in a funnel. The way round the issue of inflating the pageviews is to use some unique directory structure -- such as starting virtual pages with /virtual/ -- and then use an exclude filter to keep them out of most profiles.

    reply >
  13. Now that's what I call conversion rate optimization!

    I've been looking into this for a while and thanks to this guide, I can implement it on my websites.

    Thanks for the help and I'll let you know the conslusions.. :-)

    reply >
  14. Rob

    Slightly off topic but in a similar area of expertise...

    I am looking to track my events with a date timestamp so that I can then marry these events to an actual action that happens off-site as a result.

    Any ideas as to the jquery i'd need to achieve this and how it fits with the basic event tracking, i.e. is it a dynamic element passed as one of the optional labels, i.e. the numerical label?

    Thanks.

    reply >
  15. This will add an event when someone leaves the form field that they DID fill out or choose something - but don't you want to know when they leave a form field and DIDN'T fill anything out?

    You can surely devise where people are NOT filling out information by seeing which input shows up the least on the analytics report.. hmmmm - as Tim Leighton-Boyce said, virtual page views allow the ability to make a funnel, which is always nice to see :) ...

    I have to do some playing around to perfect it for our specific situation - but this is an awesome post and very lightweight+powerful javascript.. even if it's a base to work from.

    Thank you Distilled and Duncan!

    reply >
  16. Hi Duncan,
    Thanks for this post.
    I'm not sure if it's the same thing but I've noticed recently in GA that they have a new beta section under content called 'in-page-analysis'. It appears to be similar to what you have shown above,but from what I can see you can't identify links that users left on.
    Unless I am using it incorrectly.

    Thanks again for the post though.
    Will

    reply >
  17. Wisam

    What's the point of using jquery when you can just use GA's event tracking?

    reply >
  18. Excellent usage of event tracking in Google Analytics. I am going to give it a try sometime soon on my own site after some minor modifications. I've been thinking about how to do this exact thing for awhile, but I didn't like the virtual pageviews idea so much.

    reply >
  19. [...] Using Jquery and Google Analytics events to track form abandonment. | | distilled [...]

    reply >
  20. Haran Banjo

    Hi,
    interesting article but I'm not able to download the example (404 error).

    Could you please re-upload it?

    Cheers,
    Haran

    reply >
  21. Sébastien Brodeur

    You could also get the form name tie to the input name.

    Something like: $(this).attr('form').attr('name') + "|" + $(this).attr('name')

    reply >
  22. Clicktale does this without any drain on time, also i think kissmetrics can also do funnel abandonment analysis.

    reply >
  23. The link to the url parser is dead (at least for now), but I found the project on github: https://github.com/allmarkedup/jQuery-URL-Parser

    reply >
  24. Alexander T

    thanks for the code! does anybody know how to track a form that is loaded via ajax with this code?

    tried clicktale already and on the way here i bumped into another tool that seems to do this sort of thing called revrise form analytics. i signed up, but they seem to be in some kind of beta. have you/anyone here tried it?

    reply >

Leave a Reply

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

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>