How To Track Form Abandonment In Google Analytics
A question I hear frequently is “can I track form abandonment in Google Analytics?” The answer is yes, and I’ll explore the details in a moment, but you should first consider alternative solutions.
There are existing solutions (like ClickTale) that do this in a much more elegant manner, with reports dedicated specifically to form analytics. Think of it like the goal funnel visualization reports, but applied to forms.
However, if you don’t want to spend the money on an alternative solution, or you want to keep everything in one place (i.e., Google Analytics), I can help you.
Tracking forms with events
You can use event tracking to find out which fields of your form are being filled out, and which ones are causing people problems. To do this, you can fire an event whenever a user’s cursor exists a field of the form. The easiest way to do this is with a script like below:
(function($) {
$(document).ready(function() {
$(':input').blur(function () {
if($(this).val().length > 0) {
_gaq.push(['_trackEvent', 'INSERT FORM NAME HERE', 'completed', $(this).attr('name')]);
}
else {
_gaq.push(['_trackEvent', 'INSERT FORM NAME HERE', 'skipped', $(this).attr('name')]);
});
});
})(jQuery);
Here’s what this script does: when the cursor leaves an input field (if a user tabs to the next field or clicks out of the field) it checks to see if any text was entered. If there is text, it fires an event with a category that you specify (replace the text “INSERT FORM NAME HERE” with the actual name of the form), an action of completed and a label that is set to the name of the form field.
If the field is left blank when the cursor exits, it fires the event with the action set to skipped.
Using the script
Once you’ve downloaded the script, be sure to replace the category (INSERT FORM NAME HERE) with the name of the form you’re tracking. Then, include the script in the <head> section of your html. You’ll also need jQuery, so be sure to include that before the script. You should have something like this:
<script src="//code.jquery.com/jquery-1.7.2.js"></script>
<script type=”text/javascript” src=”https://bounteous.com/js/form-tracker.js”></script>
What you’ll see
Once you have this script in place and it has collected some data, you’ll start to see the places in your form that users may be having problems.
Go to the Content > Events > Top Events report. Click on the form name (whatever you specified as the event category). That will drill down into the event actions. You’ll see completed and skipped. If you want to see which fields are most commonly skipped, click on that action. To see a more general view of the dropout rate, click on completed.
You’ll see your field names, along with how many total events and unique events occurred for that field.
You may be wondering why total events and unique events are different. This is because the event is fired every time a user’s cursor exits the field. So if someone fills out their email, then password, then goes back to the email field to change it, then goes on from there, the email field would have 2 total events, but only one unique event.
Things to keep in mind
- This script requires jQuery. Make sure include the script after you include jQuery, like in the example above.
- This script pulls in the name attribute of the form field as the event label. Make sure you use descriptive names (as opposed to field1, field2, etc.). Alternatively, if you have descriptive IDs on each form field, you could use those. Just replace $(this).attr(‘name‘) with $(this).attr(‘id‘) in the form tracker script.
- You may also want to track submissions of the form. You can fire an event when someone clicks the submit button, but that would fire even if the form doesn’t go through (missing fields, invalid input, etc.). Instead, fire the event only after the form has been validated and submitted. This will likely require getting your hands dirty by digging around in the code that executes on form submit.
