Wednesday, April 3, 2013

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
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.

3 comments:

  1. Hey Nishant,

    Just wanted to say thanks for this. I took this code and customized it for my own forms. It is mint!

    Cheers,
    S

    ReplyDelete
  2. 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
  3. The presence of grey machines threatens revenue era within the playing trade. If folks opt to use the machines as an alternative of spending money on lotteries or going to a on line casino, the federal government revenue 1xbet shall be diminished. As could be imagined, the difference between mechanical and computerised slot machines is in how they're powered. Traditional slot machines used a mechanical generator to find out} outcomes, whereas computerised slots makes use of micro laptop chips to take action.

    ReplyDelete