«
»

Script: Post-load banner ads

Many website owners consider banners a good source of income and they strive to create the necessary traffic to be accepted by the more prestigious ad retailers.

On the down side these banners, magnificent as they may be, can make the website quite “heavy” and increase dramatically the loading times of the web pages. It would be ideal if there was a built-in feature by the ad servers that could delay showing the ads but I take this can be considered in the marketing circles more of an insult than a recommendation.

I had this problem with a website I was developing and I knew I had to find a solution, as performance was crucial. With some help from jQuery I happily found an elegant way that did the trick.

The general idea can be outlined in these steps:
1. Create the containers that host the banners empty
2. Inject and load the banners in a 1×1 iframe.
3. Copy the generated banner code to their intended containers.
4. Delete the dynamically created iframe and leave no trace.

To make this work you will need the containers of the banners in your markup, each assigned with a unique id. Additionally, you will need an extra page that will load the actual banner code, using the SAME container names.

When you have this, here is the JavaScript you need to insert in your pages:


/* Functions to load and show the banners post-load*/
function loadBanners(){
$("body").append('<iframe src="http://www/YOUR/ADS/PAGE" width="1" height="1" id="ads-container" frameborder="0" />');
}
function showBanners(){
var content= "";
var banners = ["top-banner","left-banner","right-banner"];
//loop through all the ids we have specified above to contain banners
for ( var i in banners )
{
// remove the unnecessary script tags (that initially load the banners) - WARNING: this may not apply for you
$('#ads-container').contents().find('#'+banners[i]+' script:lt(2)').remove();
// get the banner from the iframe
var content=$('#ads-container').contents().find('#'+banners[i]).html();
// place the banner code in their containers in the main page
$('#'+banners[i]).html(content);
}
// finally delete the container that loaded the ads
$('#ads-container').remove();

}

Replace:

  • “http://www/YOUR/ADS/PAGE”, with the actual page where you have all your banner code.
  • ["top-banner","left-banner","right-banner"], is an array containing all the ids of the containers you want to target.

Of course we need to trigger the first function the page loads…


$(document).ready(function() {
// finally load the banner ads for the page
loadBanners();
});

And then we need to trigger the second function when the ad page (in the iframe) loads. I’ll put in a sample code for the whole source code that contains the banner containers…


<html><body>
<div id="top-banner">[...BANNER CODE...]</div>
<div id="left-banner">[...BANNER CODE...]</div>
<div id="right-banner">[...BANNER CODE...]</div>
<script type="text/javascript"> $(document).ready(function() { showBanners(); }); </script>
</body></html>

And that’s it. Your pages are now free from the lagging of the banner code. Fortunately this solution does not rely on any specific ad provider and hopefully it will work for you whatever banners you use.

Last 5 projects by Makis

This entry was posted on Sunday, May 17th, 2009 at 11:53 pm and is filed under Programming. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

6 Responses to “Script: Post-load banner ads”

  1. Andy Owen Says:
    June 17th, 2009 at 10:15 pm

    Hi there,

    I’ve managed to get this half working…. the banners load into the 1×1 iframe but I can’t get these contents into my empty DIVs where I want them positioned.

    Any thoughts?

    Thanks in advance,

    Andy

  2. makis Says:
    June 17th, 2009 at 10:43 pm

    Hi Andy,

    I suspect you need to change the banners[] array with the names of the containers you are using for your banners.

    But also try to output some of the banner code in the showBanners() function to make sure it arrives up to there…

    Cheers,
    Makis

  3. Shane Says:
    July 5th, 2009 at 6:55 am

    Hi Makis,

    Great work on this. I have come across a really strange problem with it though. It works if I put an alert into the showBanners function (e.g. alert(“hello world”);), but not without. Spent way too long on that one tiny thing. Any clues?

    Thanks a lot.

    Shane

  4. makis Says:
    July 5th, 2009 at 9:40 am

    Hi Shane,

    I recon showBanners is triggered from your “ad” page, so the iframe is loaded as expected. Although make sure that your ad page has the same container names that wrap around your banners. And try to alert that code in the “for” loop to make sure the script is reading the contents.

    Cheers,
    Makis

  5. Monty Doxbeck Says:
    March 5th, 2010 at 11:41 am

    Hello, I found this post while searching for help with JavaScript. I’ve recently changed browsers from Safari to Firefox 3.2. After the change I seem to have a problem with loading JavaScript. Everytime I browse site that needs Javascript, the site does not load and I get a “runtime error javascript.JSException: Unknown name”. I cannot seem to find out how to fix it. Any help is greatly appreciated! Thanks

  6. admin Says:
    March 5th, 2010 at 1:04 pm

    @Monty Sorry, have not had previous experience on your issue.

Leave a Reply