How to Randomize AdSense Ads with Javascript

I came across this problem on the forums today. How can you randomize which Ad Sense ad to show using Javascript?

The solution, it turns out, is very simple.

Why Randomize Ads?

There are a few reasons you might want to do this.

If you’re looking into changing the theme of your AdSense ad, you may want to test the two themes against each other. By giving each theme approximately 50% of the impressions for a given time period, you can make some direct comparisons between their performance.

Or maybe you and a friend both run a website, so you want to split the advertising time between two AdSense publisher ids. That can be done too.

How the AdSense Code Works

Before we randomize it, let’s take a look at how the AdSense code works.

Here’s the snippet of code that creates the skyscraper on the left side of this page.

<script type="text/javascript"><!--
google_ad_client = "pub-2399151883698113";
/* Web Cash Tall Skyscraper */
google_ad_slot = "8702750734";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

You’ll notice two major pieces to this code. The first piece – in the first <script> element – defines the ad unit’s properties. It sets google_ad_client (your publisher id), google_ad_slot (the saved ad unit’s id with color info), google_ad_width, and google_ad_height.

The second section – the script element with src “show_ads.js” – actually displays the ad based on the variables that were set previously.

In order to vary the type of ad shown, we need to come up with a conditional statement to vary the google_ad_client/slot/width/height settings.

The Javascript Code…

And here’s the moment you’ve all been waiting for – the Javascript code to randomize which ad is shown.

<script type="text/javascript">
<!--
if (Math.random() > 0.5) {
  google_ad_client = "pub-2399151883698113";
  google_ad_slot = "5396010225";
  google_ad_width = 250;
  google_ad_height = 250;
} else {
  google_ad_client = "pub-2399151883698113";
  google_ad_slot = "3900536874";
  google_ad_width = 250;
  google_ad_height = 250;
}
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

You’ll notice that there’s an if/else statement, and each branch of the conditional statement defines a different ad to display. The results of that conditional statement rely on the outcome of Math.random().

Previously, we built a function to get a useful random number out of Math.random(). This is actually a situation where we can use the value from Math.random() just the way it is.

Math.random() generates a random value between 0 and 1. In other words, it gives you a probability. By checking that Math.random() is greater than 0.5, the statement should evaluate to true approximately 50% of the time.

We could also make the rotation more lop-sided. For example (Math.random() > 0.70) would be true 30% of the time. Therefore the first ad would be displayed 30% of the time, while the second ad would be displayed 70% of the time.

I hope you weren’t looking for something more complicated because, well, it isn’t. It’s just that simple.

Bookmark and Share:
  • Digg
  • Furl
  • del.icio.us
  • StumbleUpon
  • MisterWong
  • DZone
  • Technorati

Tags: , , , ,

12 Comments to “How to Randomize AdSense Ads with Javascript”

  1. Buck said this on March 2nd, 2008 at 2:38 am

    I’ve seen something similar for randomizing the ad colors. It makes them dynamic enough to stick out and be interesting.

  2. sunjester said this on March 2nd, 2008 at 1:37 pm

    but why would you rotate page specific ads like adsense? they are contextual ads, they dont need to be rotated.

  3. Walkere said this on March 2nd, 2008 at 2:16 pm

    The biggest reason you’d want to do it is to test out a new type of ad.

    For example, let’s say I wanted to see if text ads or an image ad worked better in my Skyscraper. I’d go into AdSense, create two ad units, give each an individual channel, and then randomly select which to show.

    After a week, I could compare which performed better and see which would earn me more money. Likewise you could test different color schemes and themes.

  4. A Tua Mae said this on March 5th, 2008 at 1:18 am

    Greetings.

    Is it possible to have more than 2 ads rotating?

    Thanks in advance.

  5. Walkere said this on March 5th, 2008 at 3:59 pm

    Sure. To do that, you should save the Math.random() value in a variable (like var prob). Then, include extra if/else statements and modify the percentages, kind of like this…

    var prob = Math.random();
if (prob > 0.66) {
  //  First Ad Here
} else if (prob > 0.33) {
  //  Second Ad Here
} else if (prob > 0) {
  //  Third Ad Here
}

  6. Monkeygames.ws said this on March 19th, 2008 at 12:12 am

    Your website is a great

    thanks

  7. Shiv Majumdar said this on April 12th, 2008 at 11:50 am

    I am a non-techie. i happened to land on this interesting page.

    I am struggling to put together a rotator for three adsense codes on a wordpress article directory I am planning for a long time- admin, author and referer.

    Obviously the last two have to be picked up from a database.

    Any help possible?

  8. Walkere said this on April 12th, 2008 at 12:40 pm

    So you want to show a different Ad Sense ad, depending on the situation?

    For this, I would advise using PHP. The Javascript alternative above is good for a simple random selection of ads, but it’s not going to work as well when you have to interact with a database.

    However, the same concept would apply. First, you want to make a variable that tells the script what type of ad to display.

    For example, if the admin is viewing the page, the variable is set to 1. If the author is viewing the page, the variable is set to 2.

    Then, use a switch statement to echo the proper Ad Sense code.

  9. todd frost said this on March 15th, 2009 at 10:45 am

    I found your blog on google and read a few of your other posts. I just added you to my Google News Reader. Keep up the good work. Look forward to reading more from you in the future.

  10. Carl Plummer said this on April 28th, 2009 at 11:55 am

    Please, can you PM me and tell me few more thinks about this, I am really fan of your blog…

  11. Wayne said this on May 20th, 2009 at 12:13 pm

    Hello Guru, what entice you to post an article. This article was extremely interesting, especially since I was searching for thoughts on this subject last Thursday.

  12. How to Randomly Rotate AdSense Ads with Javascript - Tutorial Collection said this on June 7th, 2009 at 3:47 pm

    [...] View Tutorial No Comment var addthis_pub=”izwan00″; BOOKMARK This entry was posted on Monday, June 8th, 2009 at 2:21 am and is filed under Javascript Tutorials. 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. [...]

Leave a Reply