Tag: Web Usability

Quick wins, low-hanging fruits – we’re all looking for the shortest, most effective route to improve sales. As optimizers, it’s what we do.

Think of the most important actions a customer can take on your website. Registering for a new account, making an inquiry about a product, filling out billing and shipping information – each of these vitally important actions are made through forms, which means: Optimizing those forms can have a big effect on your conversion funnel.

Of course, to optimize these forms, you have to understand how visitors are reacting to them, and what their behaviors indicate. And to do that, you have to measure their activity on your website or app.

Form analytics data is, perhaps, the most important information you can have to understand how your conversion funnel works. When you have access to this type of user data, you can start to see where you’re losing potential customers, determine why they drop off, and create concrete steps towards funnel improvements that will reap huge rewards. All of this begins in Google Analytics and Google Tag Manager with Tracking Forms.

This article will show you how to create events in Google Tag Manager that will allow you to track the behavior of visitors interaction with forms. Having this data will enable you to optimize the forms to fit it with visitor expectations and increase the form conversion rate.

Find your ideal form to fit the purpose

Purpose 1: Simple data collection

Simple data collection forms are just used to gather basic data on visitors, like name and email address – common examples are newsletter subscriptions and short surveys. Data gathered can be used to personalize web and marketing efforts, and contribute to customer research. These types of forms can be considered micro conversions and can give important indicators of visitors’ motivations (like how confident they are in your site, and whether your site looks credible enough to merit their time and attention).

Purpose 2: Lead generation

Lead generation forms are the bread and butter of B2B websites. To be really useful, lead generation forms must enable the sales department to quickly and effectively identify the strongest prospects.

Lead generation forms ask for more information, and typically offer something of value in return, like a free ebook, study, or e-course. The amount of value offered is directly related to how many form fields you can expect people to fill out.

“According to FormStack’s research, only 6% of users will fill out an average of 19 (!) form fields on an order page, but people entering a contest will go nearly to the ends of the earth to submit, tolerating 10 form fields with a 28% submission rate.” – Crazyegg, Little Known Form Facts That Can Increase Conversion Rates

It’s a delicate balance to strike. Ideally you want only qualified leads to fill out the form, but if you add too many qualifiers, even motivated visitors may drop out or leave the form unfilled.

To avoid this outcome, you can use form analytics to determine the forms effectiveness and eliminate or change the questions that cause visitors to skip or drop out.

Purpose 3: Shipping & billing

Finally and most importantly, you need to track shipping and billing forms. For the most part, the content of these forms is mandatory. However, accurate form analytics can tell us if there are areas we need to improve.

For example, if you realize that many of the visitors drop out at shipping, it may indicate that the shipping options offered are inadequate. Visitors may need more of them, consider them too expensive, or are unpleasantly surprised at the shipping estimate.

Large dropout rates in billing forms often indicate a lack of trust in the security of the site, making customers unwilling to leave their billing information. Think of it this way: hese people want to be your customers, hey wouldn’t reach your billing page if they didn’t, which means that if you can fix these issues, they are sure wins.

Often, form issues are low-hanging fruits that, if fixed, can result in instant (and large) conversion increases. And to solve them, we need to track our forms and see what our users are really up to. We can do this in Google Analytics.

The Nitty-Gritty How-to: Tracking HTML Forms in Google Analytics

Tracking HTML forms is relatively easy. All you need to do is to establish events for every form. You can go through the forms in your code and add the following line at the submission button code:

ga('send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject]);

This will result in reporting an event every time a user clicks the submission button.

However, what we really want to do is to track the completion of each individual field, not just when the entire form is submitted.

To achieve this, we need to insert a custom code into the form code. You can find an excellent solution for this on the LunaMetrics blog. It is easy to implement and you only need to change a few lines, such as the name of the form you use (the formId line).

When you implement this code on your website, it fires an event every time a visitor fills in a form field or skips it. These events enable you to track the completion and abandonment of your forms.

Tracking AJAX forms – it’s a li’l more complicated

AJAX is an acronym for Asynchronous Javascript and XML – it’s a way for web applications, like forms, to send and receive data from the server asynchronously, without having to reload the entire page. For example, you might use AJAX forms so that if a user fails to fill out all the necessary fields, the incomplete ones will be marked in red – without erasing all of the other information they did put in.

The problem with AJAX forms is that by dynamically creating content on the same page, it makes tracking harder; the page information is rewritten every time the event happens, deleting the data layer.

So how do we track AJAX events?

For this we’re going to need Google Tag Manager (GTM), and for illustration purposes, we’re also going to use Gravity Forms, a plugin for WordPress (and websites that use Wordpress hosting). Don’t have that exact setup? Don’t worry, this use case will likely also work with minor modifications for other types of AJAX forms and other types of forms that use single page.

First off, you need to ensure that your AJAX pages populate the data layer with variables that enable you to put triggers on your tags. The easiest way to do this is to open the configuration tab of the plugin in Wordpress’ admin panel. There you can set the plugin to send variables to data layers or even directly to Google Analytics.

If you have only one form you care about, this solution may be the easiest way to accomplish basic tracking.

But you might want to put in your own values in those event definition fields so you have more control over reporting. If you want to create your own events in GTM, configure the plugin to populate the data layer with variables. This is the option you can find in the plugin settings in the form of a check box. The checkboxes are located immediately below the fields shown in the previous image. If checked it will create Tag Manager variables you can use as trigger conditions to set up event tracking.

Once you configure the plugin, it is time to open Google Tag Manager. In order to configure the tags correctly, you should go into preview mode. To do this, simply click the ‘Publish’ button in the interface and select ‘preview.’

Go to the page on your website that contains the form you want to track. Once you open it, you should see the bottom part of the page populating with events, such as:

1. Message
2. Page View
3. DOM Ready
4. Window Loaded

You might see other events too, depending on your individual configuration in Tag Manager.

To determine which variable should be the trigger to your tag, go into the first field of your form. If you have enabled Google Tag Manager tracking correctly in the Admin panel, you should see the following:

Google Tag Manager for the Wordpress plugin has created the #19 event highlighted in grey. It populates the data layer with following variables:

To start tracking individual events, such as form fields being filled, you just need to create a new tag, make it an event, and add triggers containing inputID or inputName values. That way, every time the visitor goes from one field to the other, an event hit will be reported to Google Analytics and you will be able to track each field directly.

Of course, you need to give the event definition values so that it is easy for you to understand and track what is happening.

Once Tracking is Enabled on your Forms, the Optimization Fun Begins

Your own users will show you where to focus first in your optimization journey, but while they’ll show you where something has gone wrong, they won’t tell you why – not without further research and A/B testing to verify your hypotheses.

A few form best practices may give you a jumpstart to reaching some of those quick wins.

1. Use a clean, clear form design that visually stands out, and is consistent with your brand.
2. Keep it simple – the simpler the form, the better your odds of completion.
3. Avoid two-column forms – they just don’t get filled out at the rates single-columns do.
4. Asking for user age reduces conversion rates by 3%, phone numbers reduces it by 5% – avoid too-personal questions.
5. Don’t label your “submit” button “Submit.” Instead, label it with what the user will get in return for giving you their information, like “Send me my ebook!”

The most common issues that prevent visitors from completing forms are the format requirements themselves (too many or too personal), unclear instructions for how to fill out the form, and unclear expectations for what they will get if they do.

But, by and far, the issue that kills conversions fastest is this: Credibility. Users won’t give you any information if they don’t trust you. This lack of trust must be addressed much further up the conversion funnel, long before the visitor encounters the form. Trust indicators like posting user reviews on product pages and displaying security badges can help.

Of course, there are alternative ways to track data and analyze forms – there are dedicated pieces of software that do an excellent job. These are mostly paid software-as-a-service solutions, but you can’t beat the ROI of tracking through the Google Analytics interface.

Even though it initially requires some effort, Google provides these insights free of charge. Not to mention that implementing form tracking this way has the advantage of everything being in one place.