How to track form info before submit button click?

Avatar

Avatar
Validate 25
Level 4
cathyw49544988
Level 4

Likes

36 likes

Total Posts

155 posts

Correct reply

2 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Boost 5
Boost 3
View profile

Avatar
Validate 25
Level 4
cathyw49544988
Level 4

Likes

36 likes

Total Posts

155 posts

Correct reply

2 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Boost 5
Boost 3
View profile
cathyw49544988
Level 4

01-06-2018

I have to track the info on a pop up form when user click the submit button. I noticed that when the rule fire and if the form submit successfully, then I can not get any form info. If the form submit fail, then I can get all the info. This seems to me that the click button happen first and then the info already lost. Is there a way allow to to grab the form info before the form submit?

Thanks

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Validate 1
Level 1
nevardreik
Level 1

Likes

2 likes

Total Posts

3 posts

Correct reply

1 solution
Top badges earned
Validate 1
Boost 1
Affirm 1
View profile

Avatar
Validate 1
Level 1
nevardreik
Level 1

Likes

2 likes

Total Posts

3 posts

Correct reply

1 solution
Top badges earned
Validate 1
Boost 1
Affirm 1
View profile
nevardreik
Level 1

13-11-2018

One way would be to store the values of the form fields as session storage items, once a 'blur' event occurs on the input field.

For example, if you're using jQuery and you have simple text input fields you could do:

$('input').on('blur',function() {

    

     // cancel if no data or if the input field is type "submit"

     if (!$(this).val() || $(this).attr('type') === 'submit') return;

     // get the value of the input field

     var inputFieldValue = $(this).val();

     // get the field name

     var inputFieldName = $(this).attr('name') // or your own selector for the field name - you know your app better than i do!

     // write the data to session storage

     if (inputFieldValue && inputFieldName) sessionStorage.setItem('fa_field_' + inputFieldName,inputFieldValue);

});

From here, just can make sure that your custom event process scrapes the content of session storage items that have an index of 'fa_field_', and allocate them to their respective eVars or context data properties (depending on your implementation).

For example, let's assume your form has four different input fields:

Input Field NameSession Storage Item NameInput Field Value / Session Storage Item ValueAdobe Analytics Conversion Variable
animalfa_field_animalSlotheVar1
fruitfa_field_fruitPineappleeVar2
snackfa_field_snackM&M'seVar3
drinkfa_field_drinkWatereVar4

From here, we want to allocate each of the of these input field values to a respective s.evarX property so that it's included in the server call to Adobe Analytics:

// convert session storage items into an array

var sessionStorageItems = [];

var keys = Object.keys(sessionStorage);

var i = keys.length;

while(i--) {

     sessionStorageItems.push(sessionStorage.getItem(keys[i]));

}

// now we want to set the respective values against their respective evars

for (var x = 0; x < sessionStorageItems.length; x++) {

     if (/^fa\_field\_/.test(sessionStorageItems[x])) {

          // check item name and allocate to evar

          switch(true) {

               case /animal/g.test(sessionStorageItems[x]):

                    s.eVar1 = sessionStorage.getItem(sessionStorageItems[x]);

                    break;

               case /fruit/g.test(sessionStorageItems[x]):

                    s.eVar2 = sessionStorage.getItem(sessionStorageItems[x]);

                    break;

               case /snack/g.test(sessionStorageItems[x]):

                    s.eVar3 = sessionStorage.getItem(sessionStorageItems[x]);

                    break;

               case /drink/g.test(sessionStorageItems[x]);

                    s.eVar4 = sessionStorage.getItem(sessionStorageItems[x]);

                    break;

          }

     }

}

// trigger custom s.tl() process

...

Hope that helps!

Answers (2)

Answers (2)

Avatar

Avatar
Validate 1
Level 1
nevardreik
Level 1

Likes

2 likes

Total Posts

3 posts

Correct reply

1 solution
Top badges earned
Validate 1
Boost 1
Affirm 1
View profile

Avatar
Validate 1
Level 1
nevardreik
Level 1

Likes

2 likes

Total Posts

3 posts

Correct reply

1 solution
Top badges earned
Validate 1
Boost 1
Affirm 1
View profile
nevardreik
Level 1

13-11-2018

Sorry, there was additional code examples in there for scrapping the session storage items and adding the right ones to the respective s.eVarX property, but it didn't save the post properly when I commited the reply

Avatar

Avatar
Coach
Employee
Gigazelle
Employee

Likes

473 likes

Total Posts

1,947 posts

Correct reply

740 solutions
Top badges earned
Coach
Contributor 2
Validate 1
Ignite 80
Ignite 70
View profile

Avatar
Coach
Employee
Gigazelle
Employee

Likes

473 likes

Total Posts

1,947 posts

Correct reply

740 solutions
Top badges earned
Coach
Contributor 2
Validate 1
Ignite 80
Ignite 70
View profile
Gigazelle
Employee

12-11-2018

It should work if you're triggering the image request on the onClick event. Does the information instantly disappear on your form when you hit submit? That would be the only reason why I'd anticipate it not working.