Adsense loads the highest paying ads first, so it’s recommended that you load your highest CTR ads first to maximize advertising revenue. In my last post, I didn’t discuss the mechanics of changing the order of your Adsense (other than offering up some CSS code) because I wanted to address it better today. In that post, I said you could use fancy CSS to do it, and that is certainly one option, but here’s a simpler javascript way of doing it.

In addition to increasing revenue, you can use this strategy to improve your site’s load time. The general consensus is that when loading a page, you want to load javascript last whenever possible. That’s because most browsers render the page from the beginning of the source to the end and will pause whenever there are any delays, such as when loading javascript. If you’ve ever wondered why some people recommend that you use the height and width tags on images, that’s why (images also take a relatively long time to load, so if you can specify their screen dimensions then the browsers can continue rendering).

Here’s what the approach will be:

  1. You will put an empty <div> block as a placeholder for where your ad will appear.
  2. You will put a hidden <div> block in the footer that contains your Google Adsense javascript code.
  3. You will add two lines of Javascript code to be executed on the window.onload event. The two lines of code will append your Google Adsense javascript code DIV to your empty placeholder DIV and then unhide it.

1. Empty DIV Block Placeholder

Stick this line of code, changing “GoogleAdsenseBlock” to something descriptive, wherever you want to insert Adsense:

<div id="GoogleAdsenseBlock"></div>

2. Hidden DIV Block in Footer

For each one of your DIV Block placeholders, add a hidden DIV block in the footer:

<div id="GoogleAdsenseCode" style="display: none;">
<strong>[Google Adsense Code]</strong>
</div>

Here’s where the Adsense blocks are being loaded, so order these from highest CTR to lowest. For example, if you have a header and a sidebar block, you would want to load the sidebar’s hidden DIV block first (assuming it has a higher CTR).

3. Shuffling DIVs with Javascript

Once you’ve created all the empty placeholders and loaded the Adsense javascript in hidden blocks, it’s time to stick them in the right places and make them visible.

<script type="text/javascript">
	window.onload = function() {
		document.getElementById('GoogleAdsenseBlock').appendChild(document.getElementById('GoogleAdsenseCode'));
		document.getElementById('GoogleAdsenseCode').style.display = '';
	}
</script>

The first section tells the code to execute whenever the window.onload event first. The first line of actual code takes your footer DIV block and appends it the placeholder. The second line takes away the display: none, which was hiding the second block from view.

Are there drawbacks to this? A small one. When you load your site, the page will initially render the page without the Adsense and then it will pop in once the page has completed loading (that’s the onload event firing). This is necessary or Internet Explorer will get upset.

Mucho gracias to Ed at Semplice, who came up with the code.

RSS Subscribe Like this article? Get all the latest articles sent to your email for free every day. Just click "Subscribe" and enter your email. Your email will only be used for this daily subscription and you can unsubscribe anytime.

3 Responses to “How to Load Adsense In Any Order with Javascript”

  1. Derrick Says:

    Has this technique been tested on FireFox? For me, it works on IE but not Firefox.

  2. jim Says:

    It works for me with Firefox, which version are you using?

  3. LadyBoy Says:

    How about if the other way around? Meaning,load Adsense first before site. What is the technique to do that?

Leave a Reply