Solution
In SiteCatalyst admin, a custom event called Dropped Off was configured. Also a custom variable (eVars) was configured in which the name of last accessed field by user before she dropped off, was set.
In Javascript, a variable was used to store the name of last access field. Its value is set whenever a user clicks or sets focus on a form field. An event listener was attached to beforeunload event of the document. In this event handler last access field name was set in SiteCatalyst custom variable (eVar) and event was set to event corresponding Dropped Off event. Finally track link method (s.tl()) was invoked to send the tracking data to SiteCatalyst.
As beforeunload event is triggered even when form is submitted, ensure that custom link tracking code is not executed. This can be achieved by making use of boolean flag which will be used to check form is submitted or not before sending data to SiteCatalyst.
You can find sample JS code at github.
In SiteCatalyst, report can be seen under Custom Conversion > Custom Conversion 1-10 > eVar Name
![]() |
Sample report in Site Catalyst |
Above implementation can be further extended to include form validation errors so as to track for which validation error user is abandoning the page.
Hey Nishant,
ReplyDeleteJust wanted to say thanks for this. I took this code and customized it for my own forms. It is mint!
Cheers,
S
Thank you for sharing, this is a must-have!! I thought I'd share this, in case it's helpful: you can track all your forms at once using Insiteful.co's form abandonment plugin, no coding skills required. Otherwise, Nishant's tutorial above is an excellent resource for any developers familiar with JS :)
ReplyDelete