How to track form field interactions and abandonment

Anitha_Ruth

11-04-2019

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

Accepted Solutions (1)

Accepted Solutions (1)

Asheesh_P

MVP

24-04-2019

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

Answers (5)

Answers (5)

thomas_amsler

15-04-2019

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

});

thomas_amsler

15-04-2019

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

22-04-2019

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,

Anitha_Ruth

15-04-2019

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,