Expand my Community achievements bar.

SOLVED

How to track form info before submit button click?

Avatar

Level 6

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

1 Accepted Solution

Avatar

Correct answer by
Level 2

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!

View solution in original post

3 Replies

Avatar

Employee Advisor

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.

Avatar

Correct answer by
Level 2

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!

Avatar

Level 2

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