Introduction

This tutorial offers a method for displaying different sized Adsense units complete with size-specific channels depending on how wide the viewing area in the visitors browser is. This can come in handy in fluid layout templates where a larger ad unit could fill otherwise wasted space on larger screens.

This assumes you're already familiar with creating new Adsense Ad units and implementing their code in your template.

Create Some Ads

The first thing to do is to create a group of ad units that will go in the space.
For example sake, I created a 468x60 unit and a 234x60 unit.
I added a size-specific channel for each unit.

I copied the code for each ad unit into a notepad window for later and closed my Adsense control panel.

Setting up the code

I started by pasting the code from the last unit I created into the place within the template where the units will be displayed.
I've done a little cleaning to the code, but for the most part this should look familiar.

<script type='text/javascript'>//<![CDATA[
google_ad_client = "pub-1234567890123456";
google_ad_host = "pub-1234567890123456";
google_ad_slot = "1234567890";
google_ad_width = 234;
google_ad_height = 60;
//]]></script><script src='http://pagead2.googlesyndication.com/pagead/show_ads.js' type='text/javascript'>/*-*/</script>

Next I wrapped the two variables that control the width and channels of an ad within an IF/ELSE statement and worked in those same two variables from the other ad units code.

<script type='text/javascript'>//<![CDATA[
google_ad_client = "pub-1234567890123456";
google_ad_host = "pub-1234567890123456";
if()
{
    google_ad_slot = "1234567890";
    google_ad_width = 468;
}
else
{
    google_ad_slot = "0987654321";
    google_ad_width = 234;
}
google_ad_height = 60;
//]]></script><script src='http://pagead2.googlesyndication.com/pagead/show_ads.js' type='text/javascript'>/*-*/</script>

Now if it was an entirely different sized unit, for instance if I was going from 468x60 to 768x90, I could enclose that google_ad_height variable in there too.

Now in my case the width at which I could move from a 234 pixel wide banner to a 468 pixel wide banner was 1120 pixels.
Now I was inclined to check the "screen.width" variable at first, but that variable assumes that the browser window is always maximized which is no good.

Instead, I used the following to check the active width of the browser window.

<script type='text/javascript'>//<![CDATA[
google_ad_client = "pub-1234567890123456";
google_ad_host = "pub-1234567890123456";
if(document.body.clientWidth && document.body.clientWidth > 1120)
{
    google_ad_slot = "1234567890";
    google_ad_width = 468;
}
else
{
    google_ad_slot = "0987654321";
    google_ad_width = 234;
}
google_ad_height = 60;
//]]></script><script src='http://pagead2.googlesyndication.com/pagead/show_ads.js' type='text/javascript'>/*-*/</script>

With that check in place the larger unit will be displayed if the visitor is browsing with a window size that's large enough to display the large unit, or if the browser's not large enough or the browser doesn't have that number available it will default to the smaller ad unit.

Conclusion

That's it.
A simple way to select a good sized Adsense unit on the fly, that could more than likely even be translated to use with other javascript-based ad providers. 😁

This page was published on May 14, 2009, at 03:06:28 (UTC). It was last revised on Jul 17, 2024, at 00:17:26 (UTC).