Basic Form Abandonment in SiteCatalyst

In my recent web project which involved creating a Contact Us form, Captcha was added to avoid spam. But client was skeptical about user abandoning the form because of Captcha. So client came up with a requirement of tracking the field on which user was dropping of from the page. SiteCatalyst 15 was used for web analytics and it required custom JavaScript code for achieving the goal. By implementing custom link tracking user actions were being captured.

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.