An important part of optimization is to remove friction/problems/errors from forms. To help you identify problem areas, tracking Form Field Errors is essential (but still so few do it). I have doubled funnel conversion rates just because of this type of tracking in Google Analytics.
Tracking Form Field Errors can give you information about:
- Validation errors or too strict validation
- Usability issues
- Wording issues
And in addition to that, data trumps opinion (IT comes to mind).
Tracking this can be done by programming code into the form fields error checking (that may take some time/cost extra money since you will probably have to involve other people to do the programming/implementation, and then you have to wait for the release). To get around this problem I track this with some help from jQuery and serve scripts through a Tag Management Solution (TMS). Demo scripts on this page is served through Google Tag Manager.
Scripts in this blog post are not "out of the box", so you will have to rewrite them to suit your needs. It's your HTML structure and elements that defines what your script will look like.
In this blog post you will find 3 different form examples that hopefully will make it easier for you to do your tracking.
- Tracking error messages from structured HTML
- Tracking generic error messages
- Tracking error messages generated with ex. AJAX
Tracking structured HTML Error Messages
Error messages that comes in a strutured form are the easiest to track. By structured I mean that the error messages is written to the page using for example unordered lists.
This demo script is suitable if validation is done server side, and the page reloads after submitting.
Error messages are tracked using Events, and is following this structure:
- Category: Error Messages
- Action: Page URL
- Label: The error message
Demo of Tracking structured HTML Error Messages
- Last Name must be filled out.
- Email is not correctly filled out.
Strutured Form example HTML
Below is the HTML used in this demo.
- <div class="error">
- <ul>
- <li>Last Name must be filled out.</li>
- <li>Email is not correctly filled out.</li>
- </ul>
- </div>
- <form name="myForm1" id="myForm1">
- <div id="div_firstName">
- <label>First Name:</label>
- <input name="input_firstName" type="text" id="input_firstName" value="Eivind" />
- </div>
- <div id="div_lastName">
- <label>Last Name:</label>
- <input name="input_lastName" type="text" id="input_lastName" value="" />
- </div>
- <div id="div_email">
- <label>Email:</label>
- <input name="input_email" type="text" id="input_email" value="somename@domaincom" />
- </div>
- </form>
jQuery used for Tracking structured HTML Error Messages
Since several error messages can occour, the jQuery script will have to loop through the error messages. You will at least have to rewrite the code in red.
- <script type="text/javascript">
- // jQuery for tracking structured HTML Error Messages
- $(document).ready(function() {
- if ($(".error ul li").length > 0){
- $('.error ul li').each(function(index) {
- if($(this).text().length > 1){
- _gaq.push(['_trackEvent','Error Messages', window.location.pathname+window.location.search, $.trim($(this).text())]); // If you don' have dynamic URLs, you can drop +window.location.search
- }
- });
- };
- });
- </script>
Tracking Generic Error Messages
Despite of that we live in 2013, there are some forms that just spits out a generic error message that doesn't tell the user exactly what the problem is. This is bad for the user, and makes the tracking a little bit more difficult also since tracking the error message is pointless.
In the HTML code I have also added another problems, namely empty error elements.
To get around these problems, this jQuery script will instead "listen" for the error message, and then track the name of the nearest input field.
This demo script is suitable if validation is done server side, and the page reloads after submitting.
Error messages are tracked using Events, and is following this structure:
- Category: Error Messages
- Action: Page URL
- Label: Input field name
Demo of Tracking Generic Error Messages
Generic Error Messages example HTML
Below is the HTML used in this demo.
- <form name="myForm2" id="myForm2">
- <table>
- <tr>
- <td>Postal Code:</td>
- <td><input name="input_postalCode2" type="text" /></td>
- <td><span class="error">* This field is not correctly filled out.</span></td>
- </tr>
- <tr>
- <td>City:</td>
- <td><input name="input_city2" type="text" value="Oslo" /></td>
- <td><span class="error"></span></td>
- </tr>
- <tr>
- <td colspan="2">I accept terms and bla bla. <input type="checkbox" name="input_Terms2" id="input_terms2" /></td>
- <td><span class="error">* This field is not correctly filled out.</span></td>
- </tr>
- </table>
- </form>
jQuery used for tracking Generic Error Messages
Since several error messages can occour, the jQuery script will have to loop through the error messages. You will at least have to rewrite the code in red.
- <script type="text/javascript">
- // jQuery for tracking generic Error Messages
- $(document).ready(function() {
- if ($('.error:contains("* This field is not correctly filled out.")').length > 0) {
- $('.error:contains("* This field is not correctly filled out.")').each(function(index) {
- var formName = $(this).parent('td').parent().find("input").attr('name');
- _gaq.push(['_trackEvent','Error Messages', window.location.pathname+window.location.search, formName]); // If you don' have dynamic URLs, you can drop +window.location.search
- });
- };
- });
- </script>
Tracking Error Messages generated with ex. AJAX
If validation and error messages are generated using ex. AJAX, the page will not reload. This makes tracking of error messages more complicated, but still possible using an external tracking script (and TMS). What you can do is to "sniff" clicks on the submit button/link, and then add some delay to the tracking script to allow the AJAX script to run first.
Instead of tracking the page URL as Action in Google Analytics, in this demo the name of the input field is instead tracked. If you also track which input fields that are filled out, this gives you the possibility to calculate error rate per input field in for example Excel.
Error messages are tracked using Events, and is following this structure:
- Category: Error Messages
- Action: Input field name
- Label: The error message
Demo of Tracking Error Messages generated with ex. AJAX
Tracking Error Messages generated with ex. AJAX example HTML
Below is the HTML used in this demo
- <form name="myForm3" id="myForm3">
- <div id="div_birthday3"><label>Birthday:</label>
- <input name="input_birthday3" type="text" id="input_birthday3" value="" />
- <span class="error" id="birthdayError"></span>
- </div>
- <div id="div_phone3"><label>Phone:</label>
- <input name="input_phone3" type="text" id="input_phone3" value="" />
- <span class="error" id="phoneError"></span>
- </div>
- <div id="div_email3"><label>Email:</label>
- <input name="input_email3" type="text" id="input_email3" value="somename@domain.com" />
- <span class="error" id="emailError"></span>
- </div>
- <p><input name="input_submit3" type="button" value="Submit" id="submitButton" /></p>
- </form>
jQuery for Tracking Error Messages generated with ex. AJAX
Since several error messages can occour, the jQuery script will have to loop through the error messages. You will at least have to rewrite the code in red.
- <script type="text/javascript">
- // jQuery for tracking Error Messages generated with ex. AJAX
- $(document).ready(function() {
- function trackErrorMsg() {
- if ($(".error").length > 0){
- $('.error').each(function(index) {
- if($(this).text().length > 1){
- var formName = $(this).parent().find("input").attr('name');
- _gaq.push(['_trackEvent','Error Messages', formName, $.trim($(this).text())]);
- }
- });
- };
- }
- $(function() {
- $("input[type=button]").click(function() { // Instead of running the function based on button clicks, you could use ex. class name or ID instead if that is better.
- setTimeout(trackErrorMsg, 2000); // Wait 2 seconds before we run the Error Message Tracking script
- });
- });
- </script>
The What, but What about the Why?
This tracking will give you the "What", but not the "Why". Although it's easy to collect information also about the "Why" with jQuery, namely tracking what the user wrote in the input field, you can't do that. That means you will be tracking PII (Personally Identifiable Information), and that is not allowed in Google Analytics.
To get the "Why", you will have to walk in the footsteps of your visitors. Sometimes it's easy to spot the "Why", other times it's more work. Perhaps you will have to run a user test, or use tools like SessionCam or ClickTale.
Analyzing the What
Form Field Errors is a negative action on your website. To make it easier to identify changes in errors, I have set up error messages as a goal in Google Analytics.
What to look for in the reports are which pages and form fields that generates the most error messages. Find the important low hanging fruit first.
If you run an Ecommerce website, look at the Ecommerce Conversion Rate for the different fields. Form Field Errors with the lowest Conversion Rate are usually those who are costing you most money.
You can also look at the Event Flow report to identify Form Field Errors with drop outs. This report hasn't been so valuable for me since I also tracks Form Fields Filled out, and this report is therefor too noisy.
Some final words
If you think the code could be improved, feel free to comment (I'm not a programmer).
I'm also curious about how you are tracking Form Field Errors in Google Analytics, and what you have learned from this?