How to track form field interactions and abandonment

[Anitha_Ruth]

Hi Team,

Would be great if anybody suggest a best solution to track the form field interactions and where the user exactly abandon the form via Launch.

What kind of event/rule configuration would help to achieve this?

Thank you,

Ani

[thomas_amsler]

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.

[Anitha_Ruth]

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,

[thomas_amsler]

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: []

});

[gadanihiman]

When do you trigger this satellite track?

[Asheesh_Pandey]

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

[Anitha_Ruth]

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,

[Asheesh_Pandey · Accepted solution]

Hi Anitha,

Instead of letting Adobe do all the heavy lifting if you only care to track the final abandonment step (if any). You should set a session base "form-abd" cookie or local storage as Jan suggested in the article on each form step i.e.  _satellite.cookie.set(). You can actually overwrite the previous step name in "form-abd" cookie with subsequent step name with user progression (use s.tl rules to do this). when user submits form deletes "form-abd" cookie i.e. _satellite.cookie.remove(), if user abandonment from any step read "form-abd" cookie on next page or exit; set in an (eVar/prop) and then delete "form-abd" cookie to avoid multiple read instances.

This way you can get only the steps where the user is abandoning most. Lmk if you have questions. 

Thanks,

Asheesh

[jantzen_b]

Do any of the answers below answer your initial question? If so, can you select one of them as the correct answer? If none of the answers already provided answer your question, can you provide additional information to better help the community solve your question?

[insiteful]

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!