I'm using Adobe Target and have come to a point where I might have two or more experiments appear in any given browser window at one time. For those of you not aware, an experiment is basically a series of front end HTML blocks (html, css, js), which load after the server-side mark-up in order to manipulate the DOM for various types of A-B testing and personalisation.
Each different experiment makes it's own API call. I have developed a solution that performs a search for a sessionStorage item called 'sparksSSO' and if it doesn't exist, then it will make an API call, if it does exist, it will run the rest of the function from variables that pull the sessionStorage data (confused yet?)
My solution works if I copy/paste in a test URL of each of the various experiments into the same browser tab, because, alas the data does infact exist in sessionStorage.
However when they all appear on the same page at the same time, ie two js code blocks which contain the same logic to check for session storage and then take action from there, they seem to run the logic as though the first function doesn't store the API call into sessionStorage and then subsequently, the second function ignores that sparksSSO (the sessionStorage variable) exists and it makes a fresh API call, when it should infact recognise that the API call has occured and it should now run it's function from sessionStorage.
Here is a simplified version of the scripts to illustrate my issue - both the same, except the naming convention - one is exp33 and the other is exp78:
<script>
//# sourceURL=EXP33_target.js - THIS ONE RUNS FIRST
// declares sparksSSO as global variable and converts from strigified API data, back to JSON object
var sparksSSO = JSON.parse(sessionStorage.getItem('sparksSSO')) || {};
// create #home_dashboard as a variable
var home_dashboard = document.querySelector('#home_dashboard');
// global variables for use with session storage
var sparksOfferCount = (sparksSSO.totalOffers >= 0) ? sparksSSO.totalOffers : "" ;
var sparksAllOffers = (sparksSSO.allOffers);
var sparksDashImg;
function api_call_exp33() {
if ("sparksSSO" in sessionStorage) {
// runs function with variable data populated by session storage
} else { ////////////////////////////////////////////////////////////////////////////////////////
// funs API call and functions from fresh API data
} // closes ELSE IF statement if sparksSSO is in session storage
} // closes api_call_exp33 function
</script>
<script>
//# sourceURL=EXP78_target_foundIT.js - THIS ONE RUNS SECOND AND SHOULD RECOGNISE sparksSSO, but it doesn't
// declares sparksSSO as global variable and converts from strigified API data, back to JSON object
var sparksSSO = JSON.parse(sessionStorage.getItem('sparksSSO')) || {};
// create #home_dashboard as a variable
var home_dashboard = document.querySelector('#home_dashboard');
// global variables for use with session storage
var sparksOfferCount = (sparksSSO.totalOffers >= 0) ? sparksSSO.totalOffers : "" ;
var sparksAllOffers = (sparksSSO.allOffers);
var sparksDashImg;
function api_call_exp78() {
if ("sparksSSO" in sessionStorage) {
// runs function with variable data populated by session storage
} else { ////////////////////////////////////////////////////////////////////////////////////////
// funs API call and functions from fresh API data
} // closes ELSE IF statement if sparksSSO is in session storage
} // closes api_call_exp78 function
</script>
Any ideas, folks?