How to track form field interactions and abandonment

Are you speeking of a large form on one page or a form with multiple steps?

We currently only track a start (first click event on any form field) and the steps (with s.t()) and a completion at the end. If you want to track the exact field, you'd need to have an event handler on every field and fire a tracking call for each. This could cause a lot of tracking requests, which might overuse your quota. One idea would be to not fire a tracking call for each field, but one every (X) second(s) the user spends on the page and keep track of the fields he interacted with. Still I am not sure if this is the right approach. There are other tools to evaluate user interaction and UX improvements. With our approach we at least see if a user just navigated to the form page or if he really started using it and with the steps we see, if he continued furthre. For analytics purposes this is enough for us.

Hi Thomas,

We've a registration form with multiple steps. It's kind of single page application where we've three steps of registration, 1st step of the form (to enter the email address details), 2nd step of the form (to update the personal details) and 3rd step of the form (survey feedback).

Would be helpful if you could give some examples.

Thank you,

Are you a developer or more of a business user of Launch with basic technical know how?

In the case of SPA, I would recommend to use Direct Call rules fired from the app, as the app knows its state, which fields are filled and on which step you currently are.

In our project I have one Direct Call rule in launch which listens to the identifier "form-interaction". It needs a payload object where the data I want to track is provided. Example object for the start event:

{

    action: 'start',

    name: 'Contact Form',

    step: 1,

    errors: []

}

Within the rule I have a Custom Code section in a Set Variables action which looks more or less like this (just an example):

s.linkTrackVars = 'events,eVar1,eVar2,prop1,prop2';

if (event.detail.action === 'start') {

  s.linkTrackEvents = 'event1';

  s.events = 'event1';

} else if (event.detail.action === 'step') {

  s.linkTrackEvents = 'event2';

  s.events = 'event2';

} else if (event.detail.action === 'end') {

  s.linkTrackEvents = 'event3';

  s.events = 'event3';

} else if (event.detail.action === 'error') {

  s.linkTrackEvents = 'event4';

  s.events = 'event4';

  s.linkTrackVars += ',eVar3,prop3';

  s.eVar3 = event.detail.errors.join(' | ');

  s.prop3 = 'D=v3';

}

s.eVar1 = event.detail.name;

s.prop1 = 'D=v1';

s.eVar2 = event.detail.name + ' | Step ' + event.detail.step;

s.prop2 = 'D=v2';

To track a call just use _satellite.track('form-interaction', {

    action: 'start',

    name: 'Contact Form',

    step: 1,

    errors: []

});

I would simply use custom links on each step to track form abandonment. See details answered by me in another thread here trigger blur event on the final blurred input tab.

Thanks,

Asheesh

Thank you Asheesh for the above info,

Could you please suggest how we can capture form fields interacted and abandoned via Cookies. In the below article, it gives some info on it, however, not sure how we can fire this rule and on what condition.

https://webanalyticsfordevelopers.com/2018/08/21/tracking-form-abandonment/

Thank you,

Like Asheesh suggested here, you don't have to "let Adobe do all the heavy lifting", instead you can track all your Adobe Experience Manager forms at once using Insiteful.co's form abandonment plugin, no coding required.

Otherwise, the accepted answer above is an excellent solution for any developers familiar with JavaScript & cookies!