Adsense Ads, Ajax, and You

• Posted by Badi Jones on July 18th, 2006 - Comment on this Post »

For those of you who have experimented some with Ajax, you may have noticed that Adsense ads don’t work when you print them to the page in an Ajax response.

This is a simple solution initaly from Kevin Cho via jguru, that we will explore a bit more and add a bit to the functionality of. This solution probably doesn’t break the AS TOS, but you may want to check to make sure.

Update: (8/8/07)
Here is a working example of this solution from weekendstory.com. Notice that when you click a link that updates the page via ajax, the ad block updates as well. Nice work.

Also, for those worried about breaking the terms of service, see the comment from noob78 below.

The part we want to pay attention to is the loadAdsense() function.

oXmlHttp.onreadystatechange = function () {
	if (oXmlHttp.readyState == 4) {
		if (oXmlHttp.status == 200) {
			displayData(oXmlHttp.responseText);
			loadAdsense("keyword1 keyword2...");
		} else {
			displayData("An error occurred: " +
                        oXmlHttp.statusText);
		}
	}
};

Lets take a look at the loadAdsense() function.

function loadAdsense(keywords) {
      var currentTime = new Date();
      googlead.location = "ads/as.php?unique_s=" +
      currentTime.getTime() + "&kws=" + keywords;
}

The loadAdsense function is basically going to load our Adsense ad into an iframe on the page.

It is going to create a unique string, a timestamp, and append it on to the end of the url of your page containing adsense. The purpose of this unique string is to keep the page from getting cached in the browser. The url can also have some specific keywords attached if you like. As you will see in just a second, these keywords will get added below your adsense ad in the iframe. Adding these keywords dynamically isn’t mandatory, but it would add a lot more flexibility.

The ad page used here is: ads/as.php, but you could use any method, dynamic or static for the Adsense page.

Lets take a look at the iframe that goes on your ajax page somewhere beneath the ajax function:

<iframe id="googlead" name="googlead"
href="" src="" width="100%" height="100" scrolling="no"
frameborder="0" marginwidth="0" marginheight="0"/>

And finally the ad page: ads/as.php

<script type="text/javascript">
<!--
google_ad_client = "googleID";
google_ad_width = 728;
google_ad_height = 90;
google_ad_format = "728x90_as";
google_ad_type = "text";
google_ad_channel =""; //-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

<br /><br /><br /><br />

< ?php if ($_REQUEST[kws] != null) {
          // print your key words here!
      } else {
//If you didn't send any keywords to this page
// dynamically, you can just add some here.
// If you aren't using server side scripting to do this,
// simply add your keywords below the 4 >br/> tags.
} ?>

Note that the ad height is 90 pixels tall, and the iframe is 100 pixels tall. This means that the keywords that you use won’t be visible to the end user, and it’s (probably) ok with the Adsense TOS.

If you enjoyed this post, make sure you subscribe to my RSS feed!