Tutorial: Random Adsense Layouts

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

Post 3+ Months Ago

Introduction


At one time or another everyone who works with Adsense is going to get the idea to do something with random sizes and positions.
Random Adsense Unit Sizes are fairly easy to accomplish if your placements stay the same. Likewise random, or at least partly random, positions aren't very hard to do either.

I'm assuming you're familiar with the process of creating new ad units and placing them in your page at the time of this writing.
This includes adding channels to ad units for tracking.

Page Layout
Simple Solution, Potential Problems
Pre-defined Layouts, A Solution
Tracking
Collecting Code, Organizing Layouts
Selecting a Random Layout
We're All Organized, Can We Display Ads Yet ?
Putting it All Together
I Thought You Said it Was Display Time !
Conclusion

Page Layout


The first thing we need to do is visualize our pages layout, and determine potential ad slots.
It makes things a lot easier if you draw up a mock layout in an image editing application. I use Adobe Fireworks because it's what I have and the built-in vector path support is easy to work with. It also has layer support.

This image shows a common blog layout. There's a header, a sidebar, and post blocks.
The content areas are denoted using the brown blocks, and the potential ad units are denoted with the green blocks that have black borders.
Note how each potential slot is labeled.

Attachments:
potential-slots.gif


Simple Solution, Potential Problems


The first thing you should notice is that there are eleven potential slots and some of them are overlaping eachother.
The simple thing to do would be to create a new ad unit that corosponds to every one of those potential slots and give each unit its' own Adsense Channel to track it then setup some quick randomization code that picks three slots and displays them.

There's a problem with this though.

What happens if slot K and slot I are selected but slot J isn't ?
We would have wasted space beside the K slot and a crowded sidebar adwise, that's what.

What if slots G and E were selected ?
The layout would probably just push whichever one was generated last down the page a little, but that still gives us crowded ads and one of them really isn't in the intended spot anyway.

Pre-defined Layouts, A Solution


Now we know we can only display three ad units at a time (no including link units) according to Googles guidelines, so what we need to do is come up with some potential three unit layouts using our image from before.
This is where the layer support in Fireworks comes in handy, it makes it much easier to create layout mockups using the existing potential slot image from before just by hiding a few vectors/layers.

In the following image you'll see four such potential ad unit layouts I setup from the potential slots.
There are certainly many more possible combinations, but four should be fine for example sake.
Note that each layout has a number label in its' corner.
Note the arrows meant to denote that the lower part of the layout would jump up in those layouts.

Attachments:
potential-layouts.gif


Tracking


Now that we have some potential layouts figured out without any colissions, it's time to think about how we want to track these.
Again, the easy thing to do would be create ad units with their own channels and reuse the same unit code in each layout.

There's a problem with that though.

For instance look at slot C, it's included in three out of four layouts. What if slot C is only being clicked when it is in layout 3 ?
It would certainly be nice to know that. It would let us know we can try some of the other slots in layouts 2 and 4.
If we keep our records and timelines straight, we can also compare new layouts to old, maybe swapping an inactive slot out with another slot caused the overall clickthrough for that layout to fall.
Sometimes there are what I like to call Sacrificial Ads which only exist to support other ads on the page.

So rather than creating new units with the mindset of the total potential slots, we create new units with the mindset of layouts.
The nice thing about Adsense units is you can apply multiple channels to units, so it's still possible to track each unit individually as well.

Before creating these ad units, I would go into my Adsense Channel Manager and create the following channels.

A, B, C, D, H, I, J, K (8 total)
A4, B1, C2, C3, C4, D2, H4, I2, J1, J3, K1, K3 (12 total)

For a total of 20 channels.
Note how the slots and layout numbers are included in each of the secondary channels.

Now looking at the four examples you might be tempted to omit the channels for B1 and A4 so you don't have to create so many channels, but don't. How will you distinguish them from other layouts you create in the future if you don't track them now ?
You also don't want to create a whole bunch of ad units right now either, just wait.

Collecting Code, Organizing Layouts


Now that we have an idea of what is going to go where, we can gather the Javascript code that Google Adsense gives us and start working on a way to group the codes into layouts.

Here's an example of what Adsense gives us to put in the page. Basically it's setting some global variables in one script block, and using a generic display script below it.
We're going to do something similar, but not exactly.

HTML Code: [ Select ]
<script type="text/javascript"><!--
google_ad_client = "pub-1234567890123456";
/* 200x200, created 9/18/09 */
google_ad_slot = "1234567890";
google_ad_width = 200;
google_ad_height = 200;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
  1. <script type="text/javascript"><!--
  2. google_ad_client = "pub-1234567890123456";
  3. /* 200x200, created 9/18/09 */
  4. google_ad_slot = "1234567890";
  5. google_ad_width = 200;
  6. google_ad_height = 200;
  7. //-->
  8. </script>
  9. <script type="text/javascript"
  10. src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
  11. </script>


Now assuming I start with layout one, I create the three new units required to fill that layout and gather the code.
For layout one I'll have a unit with channels B and B1 which will give me one code, a unit with channels J and J1 for another piece of code, and the same for K and K1.

Now in my text editor, using a new empty file, I want to create some basic organiation Javascript to put these units in.

JAVASCRIPT Code: [ Select ]
var adsense_manager = new Object();
adsense_manager.layouts = new Array();
  1. var adsense_manager = new Object();
  2. adsense_manager.layouts = new Array();


adsense_manager is a new object designed to keep all of our code nice and tidy.
The layouts property of the adsense_manager object will be used to store multiple arrays, each array will include multiple objects.


With this in place, I can start populating the layouts array with new organized layout information.
Note how each index corosponds to a layout number.
Note how each object has the Adsense code and a slot_id corosponding to the slot in the diagram from earlier.
Note that 2-4 have been truncated for example sake.

VERY IMPORTANT: Make sure you surround your google_ad_slot values with quotes, using integers (without quotes) will give you unexpected results !

JAVASCRIPT Code: [ Select ]
adsense_manager.layouts[1] =
[
   {slot_id:'A', google_ad_client:"pub-1234567890123456", google_ad_slot:"1234567890", google_ad_width:200, google_ad_height:200,},
   {slot_id:'J', google_ad_client:"pub-1234567890123456", google_ad_slot:"1234567890", google_ad_width:200, google_ad_height:200,},
   {slot_id:'K', google_ad_client:"pub-1234567890123456", google_ad_slot:"1234567890", google_ad_width:200, google_ad_height:200,}
];
adsense_manager.layouts[2] =
[
   {slot_id:'C' /* ... */},
   {slot_id:'D' /* ... */},
   {slot_id:'I' /* ... */}
];
adsense_manager.layouts[3] =
[
   {slot_id:'C' /* ... */},
   {slot_id:'J' /* ... */},
   {slot_id:'K' /* ... */}
];
adsense_manager.layouts[4] =
[
   {slot_id:'A' /* ... */},
   {slot_id:'C' /* ... */},
   {slot_id:'H' /* ... */}
];
  1. adsense_manager.layouts[1] =
  2. [
  3.    {slot_id:'A', google_ad_client:"pub-1234567890123456", google_ad_slot:"1234567890", google_ad_width:200, google_ad_height:200,},
  4.    {slot_id:'J', google_ad_client:"pub-1234567890123456", google_ad_slot:"1234567890", google_ad_width:200, google_ad_height:200,},
  5.    {slot_id:'K', google_ad_client:"pub-1234567890123456", google_ad_slot:"1234567890", google_ad_width:200, google_ad_height:200,}
  6. ];
  7. adsense_manager.layouts[2] =
  8. [
  9.    {slot_id:'C' /* ... */},
  10.    {slot_id:'D' /* ... */},
  11.    {slot_id:'I' /* ... */}
  12. ];
  13. adsense_manager.layouts[3] =
  14. [
  15.    {slot_id:'C' /* ... */},
  16.    {slot_id:'J' /* ... */},
  17.    {slot_id:'K' /* ... */}
  18. ];
  19. adsense_manager.layouts[4] =
  20. [
  21.    {slot_id:'A' /* ... */},
  22.    {slot_id:'C' /* ... */},
  23.    {slot_id:'H' /* ... */}
  24. ];


Now you might be tempted to use push, unshift, or other array functions to add items to the layouts array, don't.
Using the array indexes that corospond to the layout makes it easier to find and remove that layout from the rotation later on.

Selecting a Random Layout


Now that we have some potential layouts and their potential placements all organized we can think about selecting a random layout.
It just so happens I have a function to do that.

JAVASCRIPT Code: [ Select ]
adsense_manager.enqueue_random_layout = function()
{
   if(adsense_manager.layouts.length < 1)
   {
      return false;
   }
   adsense_manager.enqueued_units = new Object();
 
   var index = 0;
   while( ! adsense_manager.layouts[index])
   {
      index = Math.floor(Math.random() * adsense_manager.layouts.length);
   }
   var unit = adsense_manager.layouts[index];
   for(var i = 0; i < unit.length; i++)
   {
      adsense_manager.enqueued_units[unit[i].slot_id] = unit[i];
   }
   return true;
}
  1. adsense_manager.enqueue_random_layout = function()
  2. {
  3.    if(adsense_manager.layouts.length < 1)
  4.    {
  5.       return false;
  6.    }
  7.    adsense_manager.enqueued_units = new Object();
  8.  
  9.    var index = 0;
  10.    while( ! adsense_manager.layouts[index])
  11.    {
  12.       index = Math.floor(Math.random() * adsense_manager.layouts.length);
  13.    }
  14.    var unit = adsense_manager.layouts[index];
  15.    for(var i = 0; i < unit.length; i++)
  16.    {
  17.       adsense_manager.enqueued_units[unit[i].slot_id] = unit[i];
  18.    }
  19.    return true;
  20. }


Basically what the function is doing is creating an enqueued_units object which is a property of the adsense_manager.
It then picks a random layout from the layouts array, and populates the enqueued_units object using the ads slot_id properties as identifiers.

Defined manually, the enqueued_units object would look like this if layout number one were selected.

JAVASCRIPT Code: [ Select ]
var adsense_manager =
{
   enqueued_units:
   {
      A: {slot_id:'A' /* ... */},
      J: {slot_id:'J' /* ... */},
      K: {slot_id:'K' /* ... */}
   }
}
  1. var adsense_manager =
  2. {
  3.    enqueued_units:
  4.    {
  5.       A: {slot_id:'A' /* ... */},
  6.       J: {slot_id:'J' /* ... */},
  7.       K: {slot_id:'K' /* ... */}
  8.    }
  9. }


We're All Organized, Can We Display Ads Yet ?


Display ads you say ?
I've got a function for that !

JAVASCRIPT Code: [ Select ]
adsense_manager.display = function(slot)
{
   if(adsense_manager.enqueued_units[slot])
   {
      var unit = adsense_manager.enqueued_units[slot];
      if(unit.google_ad_client && unit.google_ad_slot && unit.google_ad_width && unit.google_ad_height)
      {
         window.google_ad_client = unit.google_ad_client;
         window.google_ad_slot = unit.google_ad_slot;
         window.google_ad_width = unit.google_ad_width;
         window.google_ad_height = unit.google_ad_height;
         
         document.write(unescape("%3Cscript src='http://pagead2.googlesyndication.com/pagead/show_ads.js' type='text/javascript'%3E%3C/script%3E"));
         return true
      }
   }
   return false;
}
  1. adsense_manager.display = function(slot)
  2. {
  3.    if(adsense_manager.enqueued_units[slot])
  4.    {
  5.       var unit = adsense_manager.enqueued_units[slot];
  6.       if(unit.google_ad_client && unit.google_ad_slot && unit.google_ad_width && unit.google_ad_height)
  7.       {
  8.          window.google_ad_client = unit.google_ad_client;
  9.          window.google_ad_slot = unit.google_ad_slot;
  10.          window.google_ad_width = unit.google_ad_width;
  11.          window.google_ad_height = unit.google_ad_height;
  12.          
  13.          document.write(unescape("%3Cscript src='http://pagead2.googlesyndication.com/pagead/show_ads.js' type='text/javascript'%3E%3C/script%3E"));
  14.          return true
  15.       }
  16.    }
  17.    return false;
  18. }


Basically what this function does is accept a slot_id argument and if that slot is present in the enqueued_units object it will display that slot.
Because Google Adsense paramaters are global variables, we can set those to the value of our layout objects properties then write the generic script line usually seen at the end of Adsense code to the document.

One more thing at the very end of this code.
We create a variable to store the return value of the adsense_manager.enqueue_random_layout function.
This gives us a small and easy thing to check later on to see if we have enqueued units.

JAVASCRIPT Code: [ Select ]
var adsense_ready = adsense_manager.enqueue_random_layout();


Putting it All Together


One of the awesome things about this is we're going to be able to stash the majority of this new Javascript in an external file, meaning repeat visitors only have to load it once.
Here's a look at all of this new code all put together and ready to store in a file named "adsense_manager.js".

JAVASCRIPT Code: [ Select ]
var adsense_manager = new Object();
adsense_manager.layouts = new Array();
 
adsense_manager.layouts[1] =
[
   {slot_id:'A', google_ad_client:"pub-1234567890123456", google_ad_slot:"1234567890", google_ad_width:200, google_ad_height:200,},
   {slot_id:'J', google_ad_client:"pub-1234567890123456", google_ad_slot:"1234567890", google_ad_width:200, google_ad_height:200,},
   {slot_id:'K', google_ad_client:"pub-1234567890123456", google_ad_slot:"1234567890", google_ad_width:200, google_ad_height:200,}
];
adsense_manager.layouts[2] =
[
   {slot_id:'C' /* ... */},
   {slot_id:'D' /* ... */},
   {slot_id:'I' /* ... */}
];
adsense_manager.layouts[3] =
[
   {slot_id:'C' /* ... */},
   {slot_id:'J' /* ... */},
   {slot_id:'K' /* ... */}
];
adsense_manager.layouts[4] =
[
   {slot_id:'A' /* ... */},
   {slot_id:'C' /* ... */},
   {slot_id:'H' /* ... */}
];
 
adsense_manager.enqueue_random_layout = function()
{
   if(adsense_manager.layouts.length < 1)
   {
      return false;
   }
   adsense_manager.enqueued_units = new Object();
 
   var index = 0;
   while( ! adsense_manager.layouts[index])
   {
      index = Math.floor(Math.random() * adsense_manager.layouts.length);
   }
   var unit = adsense_manager.layouts[index];
   for(var i = 0; i < unit.length; i++)
   {
      adsense_manager.enqueued_units[unit[i].slot_id] = unit[i];
   }
   return true;
}
 
adsense_manager.display = function(slot)
{
   if(adsense_manager.enqueued_units[slot])
   {
      var unit = adsense_manager.enqueued_units[slot];
      if(unit.google_ad_client && unit.google_ad_slot && unit.google_ad_width && unit.google_ad_height)
      {
         window.google_ad_client = unit.google_ad_client;
         window.google_ad_slot = unit.google_ad_slot;
         window.google_ad_width = unit.google_ad_width;
         window.google_ad_height = unit.google_ad_height;
         
         document.write(unescape("%3Cscript src='http://pagead2.googlesyndication.com/pagead/show_ads.js' type='text/javascript'%3E%3C/script%3E"));
         return true
      }
   }
   return false;
}
 
var adsense_ready = adsense_manager.enqueue_random_layout();
  1. var adsense_manager = new Object();
  2. adsense_manager.layouts = new Array();
  3.  
  4. adsense_manager.layouts[1] =
  5. [
  6.    {slot_id:'A', google_ad_client:"pub-1234567890123456", google_ad_slot:"1234567890", google_ad_width:200, google_ad_height:200,},
  7.    {slot_id:'J', google_ad_client:"pub-1234567890123456", google_ad_slot:"1234567890", google_ad_width:200, google_ad_height:200,},
  8.    {slot_id:'K', google_ad_client:"pub-1234567890123456", google_ad_slot:"1234567890", google_ad_width:200, google_ad_height:200,}
  9. ];
  10. adsense_manager.layouts[2] =
  11. [
  12.    {slot_id:'C' /* ... */},
  13.    {slot_id:'D' /* ... */},
  14.    {slot_id:'I' /* ... */}
  15. ];
  16. adsense_manager.layouts[3] =
  17. [
  18.    {slot_id:'C' /* ... */},
  19.    {slot_id:'J' /* ... */},
  20.    {slot_id:'K' /* ... */}
  21. ];
  22. adsense_manager.layouts[4] =
  23. [
  24.    {slot_id:'A' /* ... */},
  25.    {slot_id:'C' /* ... */},
  26.    {slot_id:'H' /* ... */}
  27. ];
  28.  
  29. adsense_manager.enqueue_random_layout = function()
  30. {
  31.    if(adsense_manager.layouts.length < 1)
  32.    {
  33.       return false;
  34.    }
  35.    adsense_manager.enqueued_units = new Object();
  36.  
  37.    var index = 0;
  38.    while( ! adsense_manager.layouts[index])
  39.    {
  40.       index = Math.floor(Math.random() * adsense_manager.layouts.length);
  41.    }
  42.    var unit = adsense_manager.layouts[index];
  43.    for(var i = 0; i < unit.length; i++)
  44.    {
  45.       adsense_manager.enqueued_units[unit[i].slot_id] = unit[i];
  46.    }
  47.    return true;
  48. }
  49.  
  50. adsense_manager.display = function(slot)
  51. {
  52.    if(adsense_manager.enqueued_units[slot])
  53.    {
  54.       var unit = adsense_manager.enqueued_units[slot];
  55.       if(unit.google_ad_client && unit.google_ad_slot && unit.google_ad_width && unit.google_ad_height)
  56.       {
  57.          window.google_ad_client = unit.google_ad_client;
  58.          window.google_ad_slot = unit.google_ad_slot;
  59.          window.google_ad_width = unit.google_ad_width;
  60.          window.google_ad_height = unit.google_ad_height;
  61.          
  62.          document.write(unescape("%3Cscript src='http://pagead2.googlesyndication.com/pagead/show_ads.js' type='text/javascript'%3E%3C/script%3E"));
  63.          return true
  64.       }
  65.    }
  66.    return false;
  67. }
  68.  
  69. var adsense_ready = adsense_manager.enqueue_random_layout();


Normally you're going to want to put Javascript like this towards the end of your document before the </body> tag so that the content loads quicker, but in this case you must have this loaded before the </head> tag instead.
The page will be using this script throughout construction of the page and Adsense places units using document.write, if Adsense tries to document.write after the document has loaded it's going to flush the document and all you will have is an ad on the page.

HTML Code: [ Select ]
   <script type="text/javascript" src="./adsense_manager.js">/*-*/</script>
</head>
  1.    <script type="text/javascript" src="./adsense_manager.js">/*-*/</script>
  2. </head>


I Thought You Said it Was Display Time !


It is, here watch.

Remember that diagram we were looking at during the very beginning of this tutorial that had the slots with the labels on them ?
Well now is where we place small Javascript snippets in the places in our HTML where those units would go.

Let's say for instance we are going to tackle the I, J, and K units since they're all pretty much in the same spot there. The sidebar.
Let's assume this is our sidebar HTML with the old style of Adsense code for the I unit.

HTML Code: [ Select ]
<div id="sidebar">
   <script type="text/javascript"><!--
   google_ad_client = "pub-1234567890123456";
   /* 200x200, created 9/18/09 */
   google_ad_slot = "1234567890";
   google_ad_width = 200;
   google_ad_height = 200;
   //-->
   </script>
   <script type="text/javascript"
   src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
   </script>
   <ul>
      <li>One</li>
      <li>Two</li>
   </ul>
</div>
  1. <div id="sidebar">
  2.    <script type="text/javascript"><!--
  3.    google_ad_client = "pub-1234567890123456";
  4.    /* 200x200, created 9/18/09 */
  5.    google_ad_slot = "1234567890";
  6.    google_ad_width = 200;
  7.    google_ad_height = 200;
  8.    //-->
  9.    </script>
  10.    <script type="text/javascript"
  11.    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
  12.    </script>
  13.    <ul>
  14.       <li>One</li>
  15.       <li>Two</li>
  16.    </ul>
  17. </div>


Now let's look at it after we have our adsense_manager loaded and we want to place potential I, J, and K slots.

HTML Code: [ Select ]
<div id="sidebar">
   <script type="text/javascript">
   if(adsense_ready)
   {
      adsense_manager.display('I');
      adsense_manager.display('J');
      adsense_manager.display('K');
   }
   </script>
   <ul>
      <li>One</li>
      <li>Two</li>
   </ul>
</div>
  1. <div id="sidebar">
  2.    <script type="text/javascript">
  3.    if(adsense_ready)
  4.    {
  5.       adsense_manager.display('I');
  6.       adsense_manager.display('J');
  7.       adsense_manager.display('K');
  8.    }
  9.    </script>
  10.    <ul>
  11.       <li>One</li>
  12.       <li>Two</li>
  13.    </ul>
  14. </div>


Another example, this time for the A unit in the header.

HTML Code: [ Select ]
<div id="header">
   <div style="float:right;">
      <script type="text/javascript">
      if(adsense_ready)
      {
         adsense_manager.display('A');
      }
      </script>
   </div>
   <h1>...</h1>
</div>
  1. <div id="header">
  2.    <div style="float:right;">
  3.       <script type="text/javascript">
  4.       if(adsense_ready)
  5.       {
  6.          adsense_manager.display('A');
  7.       }
  8.       </script>
  9.    </div>
  10.    <h1>...</h1>
  11. </div>



The adsense_manager will only display the unit passed to the display function if that unit has been added to the enqueued_units object.
Otherwise it will act like a blank script area and everything will colapse around it as it would if there were no code there at all.
The best part is we have simple clean functions that make it easy to place code using the diagram of layouts we setup before we did anything else.

Conclusion


Ironically, there's never a conclusion when it comes to Adsense and the things you can do with it.
Your next step once you get this figured out and implemented will probably be to experiment with different layouts. After that you might consider influencing your random layout selection with the width of the browser window.
After that you're only limited by your imagination. :D
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

Post Information

  • Total Posts in this topic: 1 post
  • 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.