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!
