This article was updated on 12/13/12.
Picture this: you're tasked with increasing the percentage of visitors to a web form who fill it out. Or maybe, your job is to increase the percentage of visitors who get through a multi-step form such as an application or checkout process. What analytics data would you look at to identify areas of opportunity? (Where are your visitors dropping off in the process?)
If you have a one-page form, then all you have is the percentage of form fills to go by. And for the multi-page forms, you can take a look at your goal funnel report to find out what pages are causing abandons. But what about looking at each form field separately as a step in the funnel process, whether you have a one-page or multi-page form?
The tips below will give you the ability to track each form field as a virtual pageview and thus create either one or multiple conversion funnels.
Before we get started, let's cover some precautions of using this technique. Tracking each form field as a pageview is likely to have the following effects on your overall analytics data:
- It will decrease time on page statistics.
- It will inflate pages/visit.
- It will influence your page depth reports.
- It will affect your goal flow reports.
- And more.
For these reasons, I advise doing two things when tracking form fields as pageviews:
- Use a separate profile to track your form field-generated pageviews and create your conversion funnels in there.
- Create a filter to exclude form field-generated pageviews from the profile(s) where you track site-wide numbers. A filter like this might do the trick for you:
Let's get started.
1. Add the following code to your form fields. What this does is create a virtual pageview every time someone clicks out of a form field (using onBlur). You can also trigger the virtual pageviews when people click into fields using onFocus, but it has a tendency to mess up funnels on the last step where the visitor will click into your last field (trigger the last field pageview) then click out of that field to review their form (thus viewing your form page again). Whereas, with onBlur, that sequence of events is less likely to cause funnel reporting issues. You will want to edit what comes after _trackPageview to be what URL you want showing up in your reports for each field.
<form action="submitted.php" method="post" name="testform">
<input name="firstname" type="text" onBlur="if(document.testform.firstname.value != '');_gaq.push(['_trackPageview','/form/firstname'])">
<input name="lastname" type="text" onBlur="if(document.testform.lastname.value != '');_gaq.push(['_trackPageview','/form/lastname'])">
<input name="email" type="text" onBlur="if(document.testform.email.value != '');_gaq.push(['_trackPageview','/form/email'])">
<input name="Send" type="submit" />
2. Setup your conversion funnels. Since Google Analytics limits you to 10 steps per funnel, when dealing with long forms, you have a few options:
- Only add some of your fields as funnel steps. For example, rather than adding First Name and Last Name, only add the Last Name field and call that funnel step "Name". Then instead of tracking each field of an address section, count that as one step in the process. You get the idea. The caveat here is that this can defeat the whole purpose of doing this in the first place by providing generic data that isn't as actionable, especially when dealing with really large forms. I would say use this in situations where one field really is not a major pain point and where it doesn't make sense to create multiple funnels to track a form due to it's small size (say 11-15 fields).
- The other approach is to create separate conversion funnels for separate parts of your form. This is especially practical when your form is broken-up into multiple pages that you want to see as separate funnels.
3. Look at your reports and start optimizing those form fields!
- For tricks to improve web form design and the likehood that visitors will fill them out, take a look at 10 Ideas to Design a Better Sign-Up Form and Web Form A/B Testing: How I Increased Form Fills by 37%.
- For more ideas on how to better track your website analytics, pick up a copy of Brian Clifton's Advanced Web Metrics with Google Analytics. It's a great read for anyone who's just starting off with GA or looking to fill in gaps of knowledge.
Update (Dec 13, 2012): A great question from Renato Fuly on Twitter:
@alhankeser Hi there, I was wondering if the Form Field code you provided, will work with radio buttons and check boxes.
— Renato Fuly (@RBFuly61) December 6, 2012
Our resident Rubik's Cube champion, Bryan Mytko, helped by providing me this answer:
No, it won't work, at least not universally. There's strange behavior with radio buttons in webkit, and some new versions of Firefox. The issue has to do with radio buttons not gaining focus, therefore never getting blurred.A clever work around is to add an onclick handler to radio inputs, which gives itself focus. Here's a a quick example:In the example, you'll need to have a console open to see the notifications. In Chrome, press F12 and navigate to console for PC or simply ⌥⌘j for Mac.
If you have any questions, please comment below or find me on Twitter @alhankeser.