Tuesday, January 8, 2008

Javascript Random Ad Buttons/Banners

I like to think of ad banners on my blog like like the racks in the checkout lines at the grocery store, Impulse Items. I wanted to be as un-obtrusive as possible with ad banners, while still having them stand out.

In order to do this I'm using JS to display them. That way I can defer them from showing untill the content people have come here from search engines to read in the first place has already loaded.
I absolutely hate it when a site makes me stare at a blank section where the article would be while I wait for the advertisements to load. If there's another result I considered clicking on I will immediately close the tab with that blank section in it & go with the alternative instead.
I also don't want to go out of my way to force people to look at advertisements by bypassing blockers & such, doing so appears to be a waste of time.

Now that we know I don't want to intrude, but do want to nag you a little bit, here's how I'm doing it.

First I have an array with objects for all of my banners. Each object includes the alt, href, and src attributes I will need for each banner. Though for some odd reason I decided to use url to denote my href attributes here.
var impulses = new Array(
{alt:'image alt text', url:'click-through-url', src:'image-source'},
{alt:'image alt text', url:'click-through-url', src:'image-source'},
{alt:'image alt text', url:'click-through-url', src:'image-source'}

For the sake of simplicity there's only three in that example, but just imagine there's about twenty of those objects in that array.

Now since I don't want the order they're shown in from left to right to be too predictable I'm going cycle a random number of ad banner objects to the end.
Basicly what this code is doing, is geting a random number between zero and the number of ad banner objects there are in the impulses array, and moving the first ad banner object to the end of the array that many times.
for(var i = Math.round(Math.random() * impulses.length); i > 0; i--)

Next I narrow the size of the array down to the number of ad banners I want shown.
Basicly what this code is doing is randomly picking an ad banner object in the array and removing it, untill there's only as many as I want left.
while(impulses.length > 5)
impulses.splice(Math.round(Math.random() * (impulses.length - 1)), 1);

Once the ad banners that will be displayed are determined I generate the HTML to show them with, I'm using simple <a> and <img> elements for this. I like to generate it using basic data like this so it's easier to modify the actual HTML that's used in a single place later on if I need to.
for(var i = 0; i < impulses.length; i++)
impulses[i] = '<a href="'+impulses[i].url+'"><img alt="'+impulses[i].alt+'" src="'+impulses[i].src+'"/></a>';

Now with a string of ad banner HTML to use, I make use of the jQuery library to insert it amongst my pages.
var impulse = jQuery("<div id='impulses'>" + impulses.join('') + "</div>").insertBefore('#load-anim');


NeilO said...

I like that you are using JavaScript to make content loading a priority. I agree that waiting for anything other than the target content to load is annoying. However, I must also say that it's equally irritating when I'm trying to read something and it suddenly jerks around as odds, ads, and ends suddenly appear out of nowhere.

Perhaps a happy median is to place the ads where their stark void OR sudden appearance doesn't cause mayhem. For example, the side bar or just below the end of the post.

Thanks and keep up the blogging.

Joe said...

Definately a good point about content jerking around. That drives me nuts too now that I think about it.

I want to try that space with the ads for awhile longer however, so I moved the DIV ad container into the HTML & gave that element a height so the space that will be taken gets reserved & the content doesn't jump around.

Anonymous said...


Is it possible to use the code above in Wordpress? If so, this would help me out a lot.


Joe said...

Sure it would.