Geek Blog for Little Red String

Geek stuff, amature programming, Linux, Ruby, open source

Loading Google Ad-Sense ads last with jQuery

I recently put a web site online (talkdb.net) that I built on Rails using jQuery. Of course Rails has lots of helper functions for Prototype but I found myself being more productive when using jQuery because it really helped me separate the concerns of developing the core interface and adding all the JavaScript AJAXy extras later. The decision to try using jQuery on this site was mostly inspired by reading about it’s use with Rails on this Err The Blog post.

I’m using a plugin that changes html radio buttons into a star rating form and adding the extra Google Adsense code delayed the execution of the classic $(document).ready(function(){}) to the point that the radio buttons would be visible while Adsense was loading ads. My first solution was to call the Google Adsense code with jQuery after doing all of the star-rating work. I made a file called ads.html and tried to load it with jQuery.get(‘ads.html’). When that didn’t work I tried loading the html with jQuery.getScript(‘ads.html’). Then I tried changing the html to JavaScript and using getScript and still had no luck. I searched some Google forums and found that people were generally unable to load GoogleAds using AJAX techniques.

Here is the solution I arrived at. I took all of my previous jQuery out of $(document).ready(function(){}) and created my own function called loadJS to house all of my jQuery interface stuff. Then I placed the Google snippet in my application.html.erb file before the tag in a hidden div. Finally I created another JavaScript function called moveAds to move the iframe created by the Google snippet to the sidebar of the webpage. Here is what the code looks like:

application.html.erb

<!-- All my page content -->
Content

<!-- load all of my jQuery interface stuff -->
<script>loadJS()</script>

<!-- render Adsense ads in a hidden div -->
<div id="hidden-ads">
    <script type="text/javascript"><!--
                google_ad_client = "pub-0892125849735349";
                /* 160x600, created 5/13/08 */
                google_ad_slot = "8316786024";
                google_ad_width = 160;
                google_ad_height = 600;
                //-->
    </script>

    <script type="text/javascript"
        src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
</div>

<!-- move created iframe to my sidebar -->
<script>moveAds()</script>

</body>

Here is the moveAds() method that copies the iframe that is created by Google’s code to my sidebar.

function moveAds(){
  $("#hidden-ads iframe").appendTo('#ads')
}

So what this allowed me to do was place the ad-sense adds at the very bottom of my page and then move them to where they belong in the layout. When ads are placed here, browsers load the ads last (after all my content and after all of my JavaScript).

Note: Using $(‘#hidden-ads’).appentTo(‘#ads’) worked great for me for about 6 hours and then totally ruined my page rendering. Coping just the iframe did the trick.

Update 5/3/2009: In the comments you can see that Thomas Casadei had trouble using the code I suggested and had success when moving the entire “hidden-ads” div and not just the iframe. You may want to give that a try if you’re running into issues.