Adnami Skin/takeover formats load wallpaper assets that take up 1440 pixels in height. In order to make room for these wallpaper assets, a publisher must decide what to do with the usual ad formats loading in the first fold of the page, e.g. skyscrapers on each side of the content.
In most cases publishers choose to push down the skys to a placement just underneath the bottom of the wallpaper assets coming with the skin creative. With this approach the publisher keeps both the ad revenue from the skin, and the revenue from the skyscrapers.
In other cases the publisher needs to or wishes to prevent one or more formats from loading entirely when a skin or e.g. a Topscroll is loaded onto the site. This can be done by following a couple of technical steps, which we are going through in the below.
How to solve, step-by-step
1. Add code to the publisher specific macro in skin.js file
Firstly, Adnami will add the following code to the publisher specific macro in skin.js file. This is done by Adnami’s technical support team.
var adnmEventHandler = (function () {
var actions = {};
function handler(event) {
if (event.data){
var type = event.data.type;
var cmd = actions[type];
if (cmd) {
for (var i = 0; i < cmd.length; i++) {
cmd[i](event.data.payload, event.source);
}
}
}
}
window.addEventListener('message', handler, false);
function connect(type, callback) {
var cmd = actions[type] = actions[type] || [];
cmd.push(callback);
}
return {
connect: connect
};
})();
Make sure that the code is added to the global scope in the run function:
window.adsm.adnmEventHandler = adnmEventHandler;
2. The website owner adds the event listener to their ad server implementation
Secondly, the website owner can add the event listener to their ad server implementation, looking like this:
adsmtag.cmd.push(function () {
window.adsm.adnmEventHandler.connect('ADSM_MACRO_UNLOAD', function(){
//SKYS SHOULD NOT BE LOADED IN THIS CASE
console.log('The placement is loading an Adnami skin');
})
The website owner can now use the adnmEventHandler to listen for the unload event, which means that a skin is being loaded.
The typical way that this is implemented is by loading the placement used for skin before the skyscraper placements. If the placement used for skin is loaded and the event has been caught the skys should never be loaded.
If you need support on this topic, feel free to reach out to support@adnami.io, and we will do our best to help you complete your implementation.