Track validation errors on Magento forms using Google Analytics

A couple of weeks ago one of my colleagues from Inchoo wrote a very nice article about Tracking Onepage Checkout abandonment using Google Analytics. We will go a bit further now and expand the set of data that we are tracking in order to try to pinpoint the exact cause of checkout abandonment, if possible. You will also see that this code is re-usable on any form in frontend, which is something that I’m sure you will find a use for.

Goal

A lot can be learned from monitoring how customers use your site and what problems they have. By solving those problems, you can boost your conversion rate, but that’s something you probably know. Tracking validation errors on the checkout page can show you the raw data which you can analyse and make some adjustments or feature improvements in order to help the customers get to our favourite “/success/” page. For example, if you see that a lot of users get validation errors on the “Last Name” field, they are obviously typing both their first and last name in the “First Name” field. Or, if the results from the Onepage Checkout abandonment tracking show that a lot of your customers are leaving the checkout process to go back to the “Shopping Cart” page, they might be doing that just to check the total price which is not available to them at all times during checkout by default. You might want to add the total price somewhere where they can see it without leaving the checkout page.

The Form

What we need from the form is:

• form’s ID;
• IDs of elements that we want to track
• “onclick” event of form’s “Submit” button

Fortunately, the majority of forms have these. 🙂

The Code

I will take the Shipping tab of the onepage checkout process as an example. The following are step-by-step instructions of how to track form fields’ validation errors using Google Analytics:

1. Open “app/design/frontend/[your_theme_name]/default/template/checkout/onepage/shipping.phtml” file;
2. Add the following code at the end of the file:

   <script type="text/javascript"> 
   //<![CDATA[
      var shippingForm = new VarienForm('co-shipping-form', true); 	
      function trackAndSaveShipping() {
         if (!shippingForm.validator.validate()) {
            var failed_elements = Form.getElements(shippingForm.form).findAll(function(elm){return $(elm).hasClassName('validation-failed')});
            failed_elements.each(function(value) {
               var failed_ids = $H({'shipping:firstname': 'shipping_FirstName', 'shipping:lastname': 'shipping_LastName', 'shipping:street1': 'shipping_Address', 'shipping:postcode':'shipping_Postcode', 'shipping:city': 'shipping_City', 'shipping:region_id': 'shipping_Region', 'shipping:country_id': 'shipping_Country', 'shipping:telephone': 'shipping_Phone'});
               var failed_event = failed_ids.get(value.id);
              _gaq.push(['_trackEvent', 'Checkout - Shipping', failed_event]);         			
            }); 		
         }
      shipping.save(); 	}
   // ]]>
   </script>

3. Replace the onclick function call of the form’s “Continue” button:

   onclick="shipping.save()"

   with

   onclick="trackAndSaveShipping()"

4. Clear cache

Code clarification

The first thing to do is to grab the form based on its ID. Then we’ll have to make a function that will be used for the “onclick” event of the “submit” button. If the validation fails, we will track the event(s), and if there are no validation errors the function will call the default “shipping.save()” function.
To track the fields that have validation errors, we must first gather all of them and put them in the “failed_elements” variable. This is done by picking only elements that have “validation-failed” css class. We will then run through each of them and create the “_trackEvent” with the form’s logical name as the “Event Category” (in our case it’s “Checkout – Shipping”) and invalid element’s ID pseudonym as “Event Action” (defined in “failed_ids” variable).

Checking results

The results will be available on the “Content > Events > Overview” page on your Google Analytics account after a while (up to 24 hours). Alternatively, you can track HTTP requests (by using “Net” tab of the Firebug) and look for GET request for __utm.gif to see what information is being sent. The “utme” field contains your tracking code for the form field that failed to pass validation.

That’s all for now. Don’t forget to take a look at Google’s official reference for various Google Analytics functions, including _gaq().