TUTORIAL: Dynamic Adsense Unit Sizes

  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

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.

HTML Code: [ Select ]
<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>
  1. <script type='text/javascript'>//<![CDATA[
  2. google_ad_client = "pub-1234567890123456";
  3. google_ad_host = "pub-1234567890123456";
  4. google_ad_slot = "1234567890";
  5. google_ad_width = 234;
  6. google_ad_height = 60;
  7. //]]></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.

HTML Code: [ Select ]
<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>
  1. <script type='text/javascript'>//<![CDATA[
  2. google_ad_client = "pub-1234567890123456";
  3. google_ad_host = "pub-1234567890123456";
  4. if()
  5. {
  6.     google_ad_slot = "1234567890";
  7.     google_ad_width = 468;
  8. }
  9. else
  10. {
  11.     google_ad_slot = "0987654321";
  12.     google_ad_width = 234;
  13. }
  14. google_ad_height = 60;
  15. //]]></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.

HTML Code: [ Select ]
<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>
  1. <script type='text/javascript'>//<![CDATA[
  2. google_ad_client = "pub-1234567890123456";
  3. google_ad_host = "pub-1234567890123456";
  4. if(document.body.clientWidth && document.body.clientWidth > 1120)
  5. {
  6.     google_ad_slot = "1234567890";
  7.     google_ad_width = 468;
  8. }
  9. else
  10. {
  11.     google_ad_slot = "0987654321";
  12.     google_ad_width = 234;
  13. }
  14. google_ad_height = 60;
  15. //]]></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. :D
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

I've got a small blog with a fluid layout that implements this and over the 5000 impressions since implementation, 30% of visitors are triggering the smaller ad unit.
  • HHawk
  • Novice
  • Novice
  • HHawk
  • Posts: 22

Post 3+ Months Ago

Very nice tutorial, however how can I make the ads display on different locations? E.g. first time on the top of the page and on reload at the bottom or middle of the page?

I do not have my any scripting experince, so I cannot achieve this...
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

If you have any problems with Adsense only displaying a single unit, read the following thread.
programming-forum/google-slot-must-string-t101681.html

Post Information

  • Total Posts in this topic: 4 posts
  • Moderator: Tutorial Writers
  • Users browsing this forum: No registered users and 4 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.