How to serve a wallpaper ad on WordPress with DFP / Adzerk

I recently had to implement some code for our advertising packages that we are gearing up to make available next year.

One element of the ad package is a background  or wallpaper ad. It’s a great marketing tool as it lets the brand adopt your content to raise their profile and awareness around their brand.

The problem I encountered was that background ads are very difficult to make clickable, and after hours of browsing the net I couldn’t find code that worked. This is how I’m serving background ads using Adzerk (in my opinion better than Google DFP.) We’re fully responsive and run on WordPress.

Place the head part of the ad code just before </head> in your header.php file.

Place the delivery part of the ad code just after the body opening tag, which usually looks something like this.
<body <?php body_class() ?>
<div id="code"></div>

Then modify this code to suit your application. Change items highlighted blue.

<script>
if (window.self !== window.top) {
//check to see if the creative is loading into an iframe
var wallpaperDocument = parent.document;
//if yes, reference parent window and document
var wallpaperWindow = parent.window;
} else {
var wallpaperDocument = document;
//if no reference default window and document
var wallpaperWindow = window;
}
wallpaperDocument.body.style.background = 'url("http://nzentrepreneurs.org/myimage.jpg")
no-repeat fixed center top #000000';
//change the body background image

(function(){
var hotSpotLeft = wallpaperDocument.createElement('a');
//create the clickable 'hot spots', left and right
var hotSpotRight = wallpaperDocument.createElement('a');
hotSpotLeft.id = 'hotSpotLeft';
//set the ids for the hot spots
hotSpotRight.id = 'hotSpotRight';
hotSpotLeft.setAttribute('href','http://clicktracker.com');
//set the click-commands
hotSpotRight.setAttribute('href','http://clicktracker.com');
hotSpotLeft.setAttribute('target','_blank');
hotSpotRight.setAttribute('target','_blank');
hotSpotLeft.style.display = hotSpotRight.style.display = 'block';
//set CSS for the hot-spots. I use element.style to be compatible with IE8
hotSpotLeft.style.height = '100%';
hotSpotRight.style.height = '100%';
hotSpotLeft.style.width = hotSpotRight.style.width = '145px';
//width of visible background either side
hotSpotLeft.style.position = 'fixed'; hotSpotRight.style.position = 'fixed';
hotSpotLeft.style.top = hotSpotRight.style.top = '0px';
hotSpotLeft.style.border = hotSpotRight.style.border = 'none';
hotSpotLeft.style.left = hotSpotRight.style.right = ((((wallpaperDocument.documentElement.clientWidth-997)/2)-145) + 'px');
//position hot spots based on window width
wallpaperDocument.body.appendChild(hotSpotLeft);
wallpaperDocument.body.appendChild(hotSpotRight);
})();
wallpaperWindow.onresize = function() {
wallpaperDocument.getElementById('hotSpotLeft').style.left = (((wallpaperDocument.documentElement.clientWidth-997)/2)-145) + 'px';
//adjust position of hot spots if window is resized.
wallpaperDocument.getElementById('hotSpotRight').style.right = (((wallpaperDocument.documentElement.clientWidth-997)/2)-145) + 'px';
};
</script>

Once you’ve customised it, serve it to the placement you placed earlier.

Leave any questions in the comments, and I’ll try to answer them as best I can.

Tags: , , , ,

Leave a Comments