Clawg Blog

Sites that need to generate ad revenue are often littered with ad scripts throughout the HTML. If these ads break or take a while to download it can delay the time it takes your site to appear. It would make more sense to serve the ads as the last item in the document, thus allowing all page content to load first. After all the user has not came to your site to see your ads. I have put together a demo page of ad positioning.

To do this I have devised a technique that uses a combination of JavaScript and absolute positioning to take the ads from the bottom of document and place them visually where you want within the page.

Below is a step-by-step guide to setting up a MPU ad.

Set the main site wrapper to position:relative within the CSS

Take you ad code and add it to the end of the HTML document, placing it in a div tag with an id

<!-- MPU Banner -->
<div id="mpu-content">
<script type="text/javascript"><!--
document.write('<scr'+'ipt language="javascript1.1" src="http://adserver.adtech.de/
addyn|3.0|577|1671709|0|170|ADTECH;loc=100;target=_blank;key=key1+key2+
key3+key4;grp=[group];misc='+new Date().getTime()+'"></scri'+'pt>');
//-->
</script>
<noscript><div><a href="http://adserver.adtech.de/adlink|3.0|577|1671709|0|170|ADTECH;
loc=300;key=key1+key2+key3+key4;grp=[group]"><img src="http://adserver.adtech.de/
adserv|3.0|577|1671709|0|170|ADTECH;loc=300;key=key1+key2+key3+key4;grp=[group]"
width="300" height="250" alt="" /></a></div></noscript>
</div>
<!--/ MPU Banner -->

Set up an empty container placing it within the document flow where you want the ad to appear.

<!-- MPU container -->
<div id="mpu"></div>
<!--/ MPU container -->

Set the dimensions of the empty container to match the size of the ad you are inserting. Generally you will know the dimensions of the ad being served, so set the container to this size in your CSS. The ad will later be positioned into the container.

#mpu {width:300px; height:250px}

Split the ad code and place the noscript part of the ad code into the empty container, this allows for the ad to be served in the appropriate place if their is no JavaScript.

<!-- MPU container -->
<div id="mpu">
<noscript><div><a href="http://adserver.adtech.de/adlink|3.0|577|1671709|0|170|ADTECH;
loc=300;key=key1+key2+key3+key4;grp=[group]"><img src="http://adserver.adtech.de/
adserv|3.0|577|1671709|0|170|ADTECH;loc=300;key=key1+key2+key3+key4;grp=[group]"
width="300" height="250" alt="" /></a></div></noscript>
</div><!--/ MPU container -->

The banner will now be in two places, with the JS part sitting at the end of the page and noscript content in the page flow.

Now for the JavaScript magic. I have used Jquery to position the ads, but this technique should be easily customised with JavaScript or any JS library.

var mpuContainer = $('#mpu').position();
var mpuContainerTop = mpuContainer.top;
$("#mpu-content").css({position:"absolute", top:mpuContainerTop, right:"10px", display: "block"})

What the code is doing here is:

• Getting the coordinates of the empty container
• Finding the top left position of this container and setting it to the variable mpuContainerTop
• Then using JQuery CSS function, positioning the banner absolutley to match the position of the empty container

Page resizing

A downside of positioning the ads with absolute positioning is once the user changes the font size, text will dissapear behind the ad. To handle this I employed a script found on ALA called Text-Resize Detection. The script detects the default font size and then fires when a text resize occurs. I have used this to reposition the ad at the new coordinates when text resizes.

More examples

More examples can be found on my work site www.stv.tv, where the mpu and skyscrapper have been positioned using this technique. If you dig a bit deeper on the code for this site you will notice the leaderboard does not use JavaScript. I was able to use a different techniqe for positioning this as the leaderboard always sits at the top of the site with no content before it so I simply used absolute positioning.