Using Event Tagging for Form Field Tracking
Many, many websites have forms on them: Subscription forms, Contact forms, Sign-up forms, etc. Understanding how users to your site or app interact with your form, and how they are succeeding through the form, or dropping out of the form, is an important key performance indicator (KPI) for your business to track.
There are a lot of tools out there that have a specific purpose for form field tracking, but why use a separate tool when you can do it well with one you are already using? Using Google Analytics Event Tracking is a great way to track form field interaction on your sites and to create fallout funnels to understand success or lack there of for your forms. The benefit of using a tool you already have is data parity and the ability to use this data across and with all of your other Google Analytics data.
I like to use Event Tracking to look at form field completion/dropoff using onChange events to measure each form field interaction. Of note, this is different than an onFocus listener which would fire if the field was tabbed into (which would be less informative than knowing when a user entered text using the onChange listener). This works great for single page forms, multi-page forms, checkout flows, signup flows, etc. Pretty much anywhere you have multiple form fields of entry, you can benefit from tracking that interaction with onChange events to help pinpoint exact fields where conversion may drop or errors may occur.
Let’s look at a quick example using the Event Category/Action/Label hierarchy structure I describe in this post (I also go into detail in that post about how to setup Event Tracking with Google Tag Manager).
In this example, we are looking at the Google Analytics marketing website. For the category, you can see we are measuring where an event occurred (Home, Tag Manager Overview, Contact Form). If we click into the ‘Contact Form’ row, we’ll get to the next level of the hierarchy, which is the Event Action.
Here you can see that we are using the Event Action to capture the product that someone indicated they were interested in when they clicked to contact sales. Again, if we click into a row, for example, ‘Analytics 360 Suite’, we’ll be taken to the next and final level of the hierarchy, the Event Label.
This is where it gets really interesting. Here we are using the label field to capture the form field that a user interacted with, and sending the event as an onChange event. As you can see, we are capturing, First Name, Last Name, Email, etc (just the form field names, no PII is being captured as that would be against the Google Analytics Terms of Service).
Normally, tables in Google Analytics are sorted by the first metric column after the primary dimension column, however, in this case, you can see that I’ve resorted this table to show Unique Events in descending order. That shows me a couple of interesting things:
- The order of the table is almost exactly that of the order of the form, so users are filling the form out in order, and there is very little drop off from field to field
- There is one exception to this, which is Region, since this is an optional form field
- There is an interestingly large number of total events for the Submit field. This tells me that users were likely encountering an error when trying to submit, and tried several times to submit the form. I went ahead and did some UX investigation to see what was going on here, and when I tried filling out the form myself, I noticed that the asterisk (the symbol * which indicates that a form field is required) was not very apparent, so likely users did not notice that the field was required, tried to submit the form, and instead encountered an error. I went ahead and passed this info on to our teams and we were able to fix that problem quickly. It was great that we had the level of detail we did on the form field tracking in order to spot an error like this in the process which was likely costing us leads and putting unnecessary strain on our users.
As you can see, there is a lot of valuable information to be gained by implementing each form field with event tracking to track when a field has been interacted with and doing the analysis to track form completion or desertion. You can find errors, points where your users are getting frustrated or stuck, potential areas of optimization, and more – a very useful tool in an analysts toolbox, all done using a tool you are likely to already be using, Google Analytics.
This is just a basic overview of some of the cool things you can do with form field tracking and onChange listeners and events. For even more cool stuff, Simo Ahava has a great overview of custom events listeners (of which change is one) here and also an excellent post on advanced form tracking tips here.