Google AdSense and AJAX

Currently, Google AdSense is not very AJAX friendly. If you have a website that loads content via AJAX and there is also an AdSense ad on the page, ideally you would like to have the ads replaced with new ones appropriate to the new content at the same time the new content is loaded. AdSense provides no mechanism to do this. The popular work around is to put the AdSense code in an iframe with a list of keywords or content in that frame that the AdSense uses to choose appropriate advertisements but the user does not see. This works, but is a little messy (replicating content or keywords, and hiding them off page so they can't be seen).

So why use AJAX for loading content? Generally, you shouldn't. I am a firm believer in accessible web pages, and content loaded via AJAX is not available in a straight forward manner to screen readers etc. In general, AJAX techniques should only augment page content to enhance a user experience, not replace the traditional methods of navigating a web page. Furthermore, AJAX for content loading is not search engine friendly. I only ended up in this situation because of Google Maps. I use Google Maps on an antiques community site to enhance the experience of finding types of local services, but it is not essential to the content. As Google Maps takes a significant time to load into a page, reloading it on every page visited in the site became simply unusable. The solution was to create an AJAX based page load that works for browsers that support it. This works in parallel with the normal html navigation for browsers and readers that don't support Javascript/AJAX (as Google Maps isn't going to work on those anyway).

This then lead me to the problem of AJAX content loading and Google AdSense. An alternative to the iframe approach (above) is to use a small piece of javascript to analyze the page after the AdSense javascript has made its changes. This can then be used to make an appropriate change when the content is loaded via AJAX. In other words we create some javascript to watch what AdSense does and use that to do it again when the main content of the page changes. This is arguably consistent with the Google AdSense Terms & Conditions as no change to the AdSense code or content is made, ads are displayed in the normal way, and the content of the page that is searched by AdSense is the same that is being viewed by the user.

This approach relies on the fact that the AJAX content loading operates simply as an enhanced alternative to normal web page navigation (i.e. there is a "real" web page corresponding to the AJAX loaded content). I use a Content Management System (Drupal) which makes this easy as the same content can be generated for a web page or for AJAX. The AdSense javascript creates an iframe into which the ad is loaded from a complex http address. Part of this address is information about the page itself (including such things as time of last modification, url etc). This address can be easily reconstructed appropriate for the new page being loaded via AJAX. The construction of the address is completely as it would be for the corresponding real web page load as we have all the appropriate information about that real page. The AdSense iframe can then be reloaded with this newly constructed address to place the appropriate ads on the page at the same time new content is loaded.

This approach works well. In a sense, this might be labeled as "reverse engineering" of the AdSense Javascript, but really it was noticing that the ad is loaded into an iframe based simply on the source address for that frame. A quick analysis of the address reveals the information needed. The downside to this approach is that the Adsense address structure may change.