Blog

How to Track Form Fields as Pageviews in Google Analytics

Google-behavior

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?)

form tracking funnel

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:

exclude form field

Let's get started.

Implementation:

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!

Update (Dec 13, 2012): A great question from Renato Fuly on Twitter:

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.

5 Ways to Increase Your Website's Conversion Rate Whitepaper

Share this post

Comments on this post

  1. You could also do this with Events. It would save you having to filter out the additional pageviews from your site-wide reports.

  2. Pingback: 42 Top Online Web Forms Resources and Guides – James Caldwell

  3. Never thought of tracking the individual fields, that could give some useful insight, thanks for the tutorial.

  4. Two questions:

    1: Is it possible just to filter the “/form/” in Page View and Time On Page reports? I don’t want to create two profiles as it creates a mess in my code.
    2: If I use events instead, can I make a report with a funnel like those?

    Thanks!

  5. Joe Kleinhans said:

    Hey Alhan, thanks for the information.
    I was wondering though what happens with the funneling data if a user doesn’t fill out the form in the order you anticipated?

    Thanks, Joe

Comment on this post

*
*

Ready to discuss your project?
Request a Quote
Blue Fountain Media is recognized as a
Top Digital Agency by
Ranked #1 Interactive
Agency by top interactive agencies example
Ranked Top 10 Digital
Agency by awwwards logo
Ranked Top 10 Agency
Worldwide by IMA logo
Our Locations
New York Headquarters
New York Headquarters
102 Madison Avenue - Second Floor
New York, NY 10016
Chicago Office
Chicago Office
222 Merchandise Mart Plaza, Suite 1212
Chicago, IL 60654
Seattle Office
Seattle Office
14980 NE 31st Way, Suite 120
Redmond, WA 98052