How to accurately track Form Abandonment in Google Analytics using jQuery or JavaScript

Question

I (and possibly anyone who's ever been asked to tackle this task) would like to accurately track "Form Abandonment" in Google Analytics through the use of jQuery (or JavaScript). This allows reports to be generated from Google Analytics that show how far users got into the form filling process before they left or didn't submit a form.

Is there a better way to track form abandonment for the below #'s 1 & 2 (suggestions for other steps would be extra credit) by the use of a jQuery event trigger that covers the below scenarios but doesn't require a complex script involving form validation? The below examples are what I've used thus far:

1.) Tracking a click on each form field. When the event fires it passes: "form - placeholder text" to GA. The problem with this is that some users will use the Tab key to cycle through the fields and never click or only click once on the fields. Example:

$("form field").click(function(event){ fire event code here });

2.) I attempted to add a .on('keydown') to each of the events so that when a user clicks OR when a user begins to type in a field, the same value as in step 1 is passed to GA. The problem here is that some users use Chrome auto-fill data which does not trigger a keydown or a click. This occurs when a user has saved form data in their browser or in a plugin and the fields are all auto-filled for them. Example:

$("form field").keydown(function(event){ fire event code here });

3.) For drop-down selection menus I use:

$("form select").on('change',function(){ fire event code here });

This usually suffices.

4.) For Text areas I have the same issue where the tab key can be used. Comments sections are not usually ever auto-filled (and they are not required fields so really not that important overall). For this I tend to use: (placed within the same container so it only triggers one event or the other but never both).

$("form textarea").click(function(event){ fire event code here });

AND

$("form textarea").keydown(function(event){ fire event code here });

5.) For Radio Menus I typically use:

$("form input[type='radio']").click(function(event){ fire event code here });

This tends to work nicely since they aren't typically triggered by auto fills.

On all events I use a 3 minute timeout before the event can fire again to prevent/reduce duplicate triggering per page load (I also filter by unique events in Google Analytics to ensure duplicate events per user are not shown).

It would be nice if all scenarios could be covered via a simple $("").on("something"){ fire event values } so that it could be implemented inside of Tag Managers or used inside of JS scripts.

For this scenario let's assume we only have the following form and we want to track all possible interactions with the elements so we can know where users are abandoning (Please do not comment on submit tracking): three inputs, one select drop down, three radio menus and one text area (remember to please try and account for auto-fill and the Tab key).

<form>

<input name="Name" type="text" placeholder="Name *" title="Name *" class="form-field">

<input name="E-mail" type="text" placeholder="E-mail *" title="E-mail *" class="form-field">

<input name="Phone Number" type="text" placeholder="Phone Number *" title="Phone Number *" class="form-field">

<select title="dropDown" name="dropDown" class="form-field">
    <option value="0">Select Something</option>
    <option value="1">Select Something Else</option>
    <option value="2">Select Another Something</option>
</select>

<input type="radio" name="gender" value="male"> Male</input>
<input type="radio" name="gender" value="female"> Female</input>
<input type="radio" name="gender" value="other"> Other</input>

<textarea name="Comments" placeholder="Comments" title="Comments" class="form-field"></textarea>

</form>

Any tips or recommendations would be very helpful.

Thank you!

Answer 1

您可以跟踪focus而不是其他事件，因为要使用这些字段，所以焦点要可靠一些。