The inimitable Craig Sullivan<\/a> gave me an idea for a continuation to my latest post on form abandonment tracking<\/a>. In this short tutorial, I\u2019ll show you how to track the time users spend on your form fields. We\u2019re going to use the User Timings<\/a> hit type, and we\u2019ll send the data for just one form. With small modifications, you can expand the script to cover multiple forms on a page.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n This simple solution tracks the time the user spends on each form field by measuring the distance between the The timing object that is sent to GA looks like this: Note! Timings are counted against the 500 hits \/ session<\/strong> limit in Google Analytics. That\u2019s why you have to be careful when implementing this. I suggest you only implement it on one form and for a short time, and then see if users\u2019 sessions are getting miscalculated thanks to them surpassing the 500 hit limit. There are some additional limitations<\/a> per property as well, but they only count towards the timing hits and not all hits in the session.<\/p>\n \n \n Subscribe to the Simmer newsletter<\/a> to get the latest news and content from Simo Ahava into your email inbox!\n <\/p>\n <\/span><\/p>\n The Custom HTML Tag looks like this:<\/p>\n To fire this Tag, I suggest you create a Page View Trigger<\/strong> which only fires this Tag on pages where your form exists.<\/p>\n Next, change the very first variable Whenever a Then, when the field is exited, and either a Anyway, feel free to change the value of the \u2018timingCategory\u2019 variable in the Finally, if the form selector you use in the very first variable declaration of the script works, the three listeners are attached to the form with their respective callbacks.<\/p>\n This is the script itself. We\u2019ll wrap up the setup in the next chapter.<\/p>\n To make the setup work, we need a Timing Tag, a Custom Event Trigger and four Data Layer Variables.<\/p>\n Create the Data Layer Variables first. You need four<\/strong> Variables with the following settings:<\/p>\n Name: {{DLV – timingCategory}}<\/strong> Name: {{DLV – timingVariable}}<\/strong> Name: {{DLV – timingLabel}}<\/strong> Name: {{DLV – timingValue}}<\/strong> The Trigger is a Custom Event Trigger<\/strong> with the following settings:<\/p>\n Name: Event – fieldTiming<\/strong> Finally, you need to create the Timing Tag. Create a new Tag of type Google Analytics<\/strong>, and set the following settings:<\/p>\n Name: UA – Timing – Form Field Timing<\/strong> Attach the Trigger you created in the previous section to this Tag.<\/p>\n And now you\u2019re set to go! Each interaction with the fields in your form should now send the Timing hit. You can find the results in Google Analytics, by going to Behavior<\/strong> -> Site Speed<\/strong> -> User Timings<\/strong>.<\/p>\n Like I mentioned, this is a very simple solution. It just measures the time spent on each form field, and reports this as a User Timing hit to Google Analytics. You might want to tweak it a little to be more robust, and you have to be mindful of the 500 hits \/ session<\/strong> limitation that GA imposes on sessions.<\/p>\n You can do some cool stuff with the data, such as building a histogram where it\u2019s easier to visualize the problematic fields. It would be also interesting to see if long time spent on a field correlates with form abandonment<\/a>.<\/p>\n<\/p><\/div>\n![\"Form](\"https:\/\/www.simoahava.com\/images\/2015\/07\/form-field-timing.jpg#ZgotmplZ\")
<\/p>\nfocus<\/code> event and the blur<\/code> or change<\/code> event. The first one occurs when a form field is entered, and the latter depends on if a value changed (change<\/code>) or no change was registered (blur<\/code>).<\/p>\n
Timing Category<\/strong> – Comment Form Field Timing
Timing Variable<\/strong> – Form field name<\/code> attribute value
Timing Label<\/strong> – \u2018blur\u2019 or \u2018change\u2019 depending on how the field was exited
Timing Value<\/strong> – Time spent in the field in milliseconds<\/p>\n
\n X<\/span><\/p>\n
\n The Simmer Newsletter<\/strong>\n <\/p>\nThe Custom HTML Tag<\/h2>\n
script>\n(function<\/span>() {\n var<\/span> form = document<\/span>.querySelector('#commentform'<\/span>);\n var<\/span> fields = {};\n \n var<\/span> enterField = function<\/span>(name) {\n fields[name] = new<\/span> Date<\/span>().getTime();\n }\n \n var<\/span> leaveField = function<\/span>(e) {\n var<\/span> timeSpent;\n var<\/span> fieldName = e.target.name;\n var<\/span> leaveType = e.type;\n if<\/span> (fields.hasOwnProperty(fieldName)) {\n timeSpent = new<\/span> Date<\/span>().getTime() - fields[fieldName];\n if<\/span> (timeSpent > 0<\/span> && timeSpent 1800000) {\n window<\/span>.dataLayer.push({\n 'event'<\/span> : 'fieldTiming'<\/span>,\n 'timingCategory'<\/span> : 'Comment Form Field Timing'<\/span>,\n 'timingVariable'<\/span> : fieldName,\n 'timingLabel'<\/span> : leaveType,\n 'timingValue'<\/span> : timeSpent\n });\n }\n delete<\/span> fields[fieldName];\n }\n }\n \n if<\/span> (form) {\n form.addEventListener('focus'<\/span>, function<\/span>(e) { enterField(e.target.name); }, true<\/span>);\n form.addEventListener('blur'<\/span>, function<\/span>(e) { leaveField(e); }, true<\/span>);\n form.addEventListener('change'<\/span>, function<\/span>(e) { leaveField(e); }, true<\/span>);\n }\n})();\nscript<\/span>><\/code><\/pre>\n<\/div>\nvar form = document.querySelector('#commentform');<\/code> to select the form you want to track. On my site this happens to be a form with ID #commentform.<\/p>\nfocus<\/code> event is detected, a hash table is updated with the form field name and the time when the field was entered.<\/p>\nblur<\/code> or change<\/code> is recorded, the time spent in the field is calculated, and then the field name is deleted from the hash table. If you don\u2019t delete the field, a change<\/code> event would send the timing twice, because when the user edits the value of a field and leaves it, a change<\/code> is dispatched first, and then a blur<\/code>.<\/p>\ndataLayer.push()<\/code>. I use \u2018Comment Form Field Timing\u2019, as that\u2019s what I\u2019m doing here.<\/p>\nTiming Tag, Trigger, and Data Layer Variables<\/h2>\n
Data Layer Variables<\/h3>\n
Data Layer Variable Name: timingCategory<\/strong><\/p>\n
Data Layer Variable Name: timingVariable<\/strong><\/p>\n
Data Layer Variable Name: timingLabel<\/strong><\/p>\n
Data Layer Variable Name: timingValue<\/strong><\/p>\nCustom Event Trigger<\/h3>\n
Fire On \/ Event name: fieldTiming<\/strong><\/p>\nTiming Tag<\/h3>\n
Tracking ID: UA-XXXXXX-Y<\/strong> (substitute with your property ID)
Track Type: Timing<\/strong>
Var: {{DLV – timingVariable}}<\/strong>
Category: {{DLV – timingCategory}}<\/strong>
Value: {{DLV – timingValue}}<\/strong>
Label: {{DLV – timingLabel}}<\/strong><\/p>\nSummary<\/h2>\n