Follow

What homepage takeover setups does Switch support?

Homepage Takeovers

The Switch platform comes complete with a Rich Media suite to allow users to build Rich Media content. Please see the manual for guidance on setting up.

If this is not an option, the the user can use our legacy template an alternate option. Please note that this is no longer supported.

Before the setup starts we need the following from the advertiser:

  • Takeover image
  • Destination URLs for each creative.
  • The name of the advertiser so that the right click tracking macro can be enabled.

Setting up the campaign:

Upload the creative to the adserver under a single campaign, and create a 1x1 banner (third party type) under the same campaign as the creative.

Once uploaded, right click on the image & select ‘Copy Image URL’ and insert in the template attached, adding in click urls, changing dimensions to match the creative and page, and paste this within the 1x1.

The third party redirect tag will look something like this when it is finished & will be input as a 1x1 at banner level: 

<script type="text/javascript">
/* <![CDATA[ */

var skinConfig = {
backgroundImage:"Insert Switch hosted banner URL",
centerClickUrl: "{clickurl}Insert URL",
leftClickUrl : "{clickurl}Insert URL",
rightClickUrl : "{clickurl}Insert URL",
siteWidth : "(Enter size)px",
partsWidth : "(Enter size)px",
centerPartHeight: "(Enter size or leave as 0 if required)px",
partsTopPosition: "(Enter size or leave as 0 if required)px"
}

var posContainer;
var addSkin = function (){
var d = parent.parent.parent.document;
var body = d.getElementsByTagName('body')[0];
var centerPart, leftPart, rightPart;

posContainer = d.createElement('div');
posContainer.style.position = "relative";
posContainer.style.margin = "0px auto";
posContainer.style.padding = "0px";
posContainer.style.height = "0px";
posContainer.style.width = skinConfig.siteWidth;

centerPart = d.createElement('div');
centerPart.style.position = "absolute";
centerPart.style.top = "-92px";
centerPart.style.left = "0px";
centerPart.style.width = skinConfig.siteWidth;
centerPart.style.height = skinConfig.centerPartHeight;
centerPart.innerHTML = '<a href="' + skinConfig.centerClickUrl + '" style="width:100%;height:100%;display:block;" target="blank"></a>';

leftPart = d.createElement('div');
leftPart.style.position = "absolute";
leftPart.style.top = skinConfig.partsTopPosition;
leftPart.style.left = "-" + skinConfig.partsWidth;
leftPart.style.width = skinConfig.partsWidth;
leftPart.style.height = body.offsetHeight + "px";
leftPart.innerHTML = '<a href="' + skinConfig.leftClickUrl + '" style="width:100%;height:1000px;display:block;" target="blank"></a>';

rightPart = d.createElement('div');
rightPart.style.position = "absolute";
rightPart.style.top = skinConfig.partsTopPosition;
rightPart.style.left = skinConfig.siteWidth;
rightPart.style.width = skinConfig.partsWidth;
rightPart.style.height = body.offsetHeight + "px";
rightPart.innerHTML = '<a href="' + skinConfig.rightClickUrl + '" style="width:100%;height:1000px;display:block;" target="blank"></a>';

posContainer.appendChild(centerPart);
posContainer.appendChild(leftPart);
posContainer.appendChild(rightPart);

body.insertBefore(posContainer, body.firstChild);

body.style.backgroundImage = 'url("' + skinConfig.backgroundImage + '")';
body.style.backgroundPosition = '50% ' + skinConfig.partsTopPosition;
body.style.backgroundColor = '#ffffff';
body.style.backgroundRepeat = 'no-repeat';
body.style.backgroundAttachment = 'fixed'
body.style.width = '1005px';
body.style.marginLeft = 'auto';
body.style.marginRight = 'auto';
};

var removeSkin = function(){
var d = parent.parent.parent.document;
var body = d.getElementsByTagName('body')[0];
body.removeChild(posContainer);
body.style.width = '100%';
body.style.backgroundColor = '#000000';
body.style.backgroundImage = '';
}

if (window.attachEvent) {
window.attachEvent('onload', addSkin);
window.attachEvent('onunload', removeSkin);
} else {
window.addEventListener('load', addSkin, false);
window.addEventListener('unload', removeSkin, false);
}

/* ]]> */
</script>