Category Archives: Web Optimization

Conversion Optimization: Tracking Form Validation Errors with Google Analytics

After all the effort of getting your users interested in your product/service, the last thing you want is for them to exit your site because form validations were an afterthought.

Losing Conversions from Indian Street Addresses

After all the effort of getting your users interested in your product/service, the last thing you want is for them to exit your site because form validations were an afterthought.

For the last few weeks at Learnhub I’ve been trying to optimize the conversion rate of our school application form. This form is lengthy compared to most and we required that potential students entered their home address.

As an experiment, we hooked up Google Analytics to track every time a validation error happened.

We were surprised to discovered that 20% of users failed to enter their street address properly and half of those users then exited the site. This was a big warning sign that our validations need improvement.


So we began to look into why this is happening in more detail.

We realized that our indian users were skipping the address not because they didn’t want to share it but because Indian addresses are really complicated.

In India, especially in smaller towns, street address’s are not as established as other parts of the world. If they did know it, it frequently looked like this: 83, LAXMI APPT., SEC-5, PLOT NO-27/8, ROHINI.

Asking someone to type that out is a usability nightmare.

From this data we now had a new starting point for improving conversions: by making the process of entering address easier or by making the field optional.

How Did We Track Validation Errors with Google Analytics?

In Google Analytics they have an awesome feature called event tracking that can be easily trigger by on-page javascript.

Our site was developed with Rails so when a field fails to validate, it automatically gets wrapped in a div.

<div class="fieldWithErrors">
    <input id="question_8_street_address" name="question_8[street_address]" type="text" value="" />

So we wrote up a tiny script that:

  1. scans the page for any divs with fieldWithErrors
  2. grabs the ID of the form field

sends an event to Google Analytics with the label “Validation Error” and the value as the fields ID

The script (prototype):

 $$('div.fieldWithErrors').each(function(field) {
   pageTracker._trackEvent('Form', 'Validation Error', field.down().identify());

With this data you can see see how many exited the form, what country they are from, validations per user, etc.

Fixing the Problem Fields

It may be beneficial to minimize the required fields to get that initial commitment.

Just like the old sales adage, if you can get the customer to say yes the first time it will be easier to get them to say yes later on for the bigger commitment.

Making fields a requirement is always a tough balance between hurting the forms usability and getting the information you want.

If you do decided to skip the tough questions early on, a process could be set up to get the needed information later on from something like a follow-up email or secondary form.

Either way it helps to have the analytics data to back it up those decisions.

How We Improved Our Conversion Rate by 72%

One of my favourite parts of creating web apps is being able to make subtle changes to our sales pages and see the impact it has on our signups.

With CareLogger being a side project, our time available for marketing is limited. We found conversion optimization to be a good way to spend 30 minutes once a week refining our pitch to customers. It also maximizes the number of signups so we have access to more people to conduct customer development with.

After these 3 experiments, our free signup conversion rate went from 14.5% to 25%, a 72% improvement.

1) Including a pain point in our headline

When we launched the site our headline said Keeping Tabs on Your Diabetes Just Got A Lot Easier:

While this explained in very general terms a benefit of our product it didn’t hit on the real need that people had when they decided to keep a logbook to record their diabetes. Making your life easier is what almost every product promises.

People weren’t looking for our software because it was easier than what they currently do. They wanted better insight into their illness so they can stay as healthy as possible.

So we changed our message to Maintain Your Optimal Health by Keeping Tabs on Your Diabetes. We also highlighted the most important benefit “Optimal Health” with green.

This change resulted in a 31% increase in conversion after 1000 trials (our metric was signing up). Not bad at all.

2) Changing our signup button from Green to Red

Earlier this week I came across an article by Performable that explained how changing their call-to-action from green to red increased conversion by 21%.

I had to try it out so that day I set up an A/B test on our homepage call-to-action.

So far we’ve had 600 participants and our conversion rate has increased by 34%.

We generally wait until 1000 trials but so far the results have been pretty significant.

We believe that it was so effective because we used green on many other parts of the landing page and the red just stands out so much more. It’s all about contrast.

3) Changing our button text from “Signup for Free” to “Get Started Now”

We also experimented with changing the button text on the call to action to form “Signup for Free” to “Get Started Now”. This one had a smaller effect, after 1000 trials our conversion rate improved by 7%.

The difference in this one is that “Get Started Now” is an easier sounding commitment than signing up. Signing up also has connotations with paying (our app is free).

Next up we’re going to try alternating the stock photo on the homepage from a male/female couple to a doctor and patient.