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
Solved! Go to Solution.
Views
Replies
Total Likes
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 Name | Session Storage Item Name | Input Field Value / Session Storage Item Value | Adobe Analytics Conversion Variable |
---|---|---|---|
animal | fa_field_animal | Sloth | eVar1 |
fruit | fa_field_fruit | Pineapple | eVar2 |
snack | fa_field_snack | M&M's | eVar3 |
drink | fa_field_drink | Water | eVar4 |
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!
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.
Views
Replies
Total Likes
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 Name | Session Storage Item Name | Input Field Value / Session Storage Item Value | Adobe Analytics Conversion Variable |
---|---|---|---|
animal | fa_field_animal | Sloth | eVar1 |
fruit | fa_field_fruit | Pineapple | eVar2 |
snack | fa_field_snack | M&M's | eVar3 |
drink | fa_field_drink | Water | eVar4 |
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!
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
Views
Replies
Total Likes