We have updated our Privacy Policy and Privacy Options

Got It

Developer Download: How Do I Test From a Global Adobe Test&Target Mbox?

Share

Sometimes when you’re developing a testing campaign for large-scale clients, testing from a global mbox located directly below the opening body tag is unavoidable. This may not be the best scenario for load times of test cells, but may be the only option you have for working with dynamic server-side content. Let’s say you want test adding a banner to the top of a page but can’t get the resources together to get mboxes placed in a specific location.

How effectively do you use data? Download our Data-Driven CMO Framework!

You will need to work directly in the global mbox with JavaScript to run this test. Let’s also assume there is not a JavaScript library like jQuery being pulled in, so we’ll use raw JavaScript for the test. First you will need to create a variation in Adobe Test&Target. In that variation you will need to start by adding your basic script tags.

<script type=”Text/Javascript”></script>

Since the mbox is the first thing that loads on the DOM after your opening body tag you will need to use a function to house your JavaScript that waits until all elements on the page loads. To do this we add some event listeners that call a function on page load and attach them to the window like this.

window.addEventListener ?
window.addEventListener(“load”,bbWriteFF,false) :
window.attachEvent && window.attachEvent(“onload”,bbWriteFF);
function writeHTML (){}

Once all elements on the page load we can write some scripts in our function that will write the appropriate HTML to the area that you need your banner. Let’s assume that you need your banner inside a div called ‘header’ and have it the first piece of HTML in that div. Let’s take a look at the entire raw JavaScript code that will accomplish this; then we will break up what it is doing below.

var divTag = document.createElement(“div”);
divTag.style.margin = “10px 0px”;
divTag.innerHTML = “<img src=’images/image.jpg’ />”;
document.getElementById(‘header’).insertBefore(divTag,document.getElementById(‘header’).childNodes[0]);

The first few of pieces of this code are where we create a new element and define its properties.

var divTag = document.createElement(“div”);
divTag.style.margin = “10px 0px”;
divTag.innerHTML = “<img src=’images/image.jpg’ />”;

The last line of this code is where you find the ‘header’ div and then insert your ‘divTag’ directly before the first child of that div. This will place your new HTML as the first element in the header div.

document.getElementById(‘header’).insertBefore(divTag,document.getElementById(‘header’).childNodes[0]);

This is just one way to work within the global mbox on a page. How do you use the global mbox to test?

Categories