Form tracking and optimization

On the web there are 2 main ways a visitor can interact with your website: through links and forms. Think of it as an asymmetric dialogue. Through links you offer information to the user while through forms the user sends information to you. Being asymmetric is what sucks about it, but than again, if there would have been an easier way, I am sure it would of have been implemented.

Most web analytics tools tend to track the outcomes of a visitor actions: the pages that load after users click a link or fill in a form. While for links I believe that is the right way to go, with forms things stay different. No matter how well optimized, there is always going to be an abandonment rate. With forms, things are a little bit more complex. So, how do we track them?

Tracking form errors

Tracking form filling errors is the first thing you wanna do when you want to know more about the performance of your forms. Make sure you have implemented a form validation method though. Check this tutorial on how to do it if you haven’t done it yet.

Each time a user gets an error make sure you trigger a JavaScript snippet as well that will send the data to your web analytics tool. If it is Google Analytics, use events to track the error. Here is how it could look like:

//use the following code inside your JavaScript validation function
pageTracker._trackEvent('Form Errors', 'Field Name', 'Field Error');
//replace Field Name & Field Errors with their respective values

Funnel vs last filled-in field

One of the pitfalls of tracking forms is that some analysts see forms as being funnels.Tracking them as such will get you a huge amount of data which will be not that easy to analyze. Wouldn’t it be easier to track only where users drop of, therefore the last filled-in field of the form? You’ll get less code to write (hint: onunload javascript function) within your forms and cleaner data to analyze. Double win.

Another trick can be to use a heat map tool for your form pages. Crazy Egg worked the best for me in the past.

Tracking and flagging success

A major issue with forms that use the POST method is that many times the “Thank you” page has the same URL as the form itself. Most web analytics tools track URL’s so you won’t be able to make the difference between a user loading up the form and a user completing the form. 2 things I suggest to do here:

• use custom tagging for successful form filling
• flag the visitors who have filled up a form with success so you can track their behavior from that point on

Here is one way to do it using Google Analytics on the page containing the form:

//the following example is based in php 
//can be replicated for any other scripting language 
<script type="text/javascript"> 
try { 
var pageTracker = _gat._getTracker("UA-xxxxx-x"); //use your own UA ID 
<?php if(formsuccess) 
{ 
   $pagename="form-end";
   echo ("pageTracker._setCustomVar(1, \"Form\", \"Submitted\", 2);"); //flag the visitors   
} else $pagename="form-start"; ?> 
pageTracker._trackPageview(<?php echo ($pagename) ?>); 
} 
catch(err) {}
</script>

Optimizing forms

When it comes to optimizing forms there is a great resource out there on the web. His name is Luke Wroblewski.

He has a great blog dedicated to forms and user interactions. When it comes to form design I highly recommend Luke’s book about Web form usability, visual design, and interaction design considerations: Web Form Design: Filling in the Blanks.