How to advertise on a pure AJAX application?

Kevin Cho, has written a very nice article on “How to advertise on a pure AJAX site?” Here is what Kevin says: For a while I had a dillema on how to show ad on a 100% ajax web site. It's totally unfair to show only 1 impression of ads while the user is browsing […]

Kevin Cho, has written a very nice article on “How to advertise on a pure AJAX site?” Here is what Kevin says:

For a while I had a dillema on how to show ad on a 100% ajax web site. It's totally unfair to show only 1 impression of ads while the user is browsing your site. Currently, I'm using Google's Adsense and they don't give any help on Ajax Web thus I had to come w/ my own solution. Of course there was some help on the web to do this but it was a combination of results + my own solution that made it work.

Ok~ so let see what is fair use of this adsense. In my opinion (yours may differ..even Google), if there's a content change in your web site then it's fair to show a new ads on your page. Since I'm using AJAX, the best place to refresh the ad would be where you're making your HTTP request to the server. Example!

var oXmlHttp = createXMLHttp();oXmlHttp.onreadystatechange = function() { if (oXmlHttp.readyState == 4) { var storyDiv = document.getElementById(layerName); storyDiv.innerHTML = oXmlHttp.responseText;refreshAd(); } };

refreshAd() will refreash the ad. No better place then here. Do not put this under any onClick/onChange/onAnything behavior as it will only complicate your page like onClick="doSomething();refreshAd();"

// Need to pass unique URI each time to make sure that your browser does not cache the result! This is needed for Firefox specifically!

function refreshAd() { var currentTime = new Date(); googlead.location = "pages/ad.jsp?s=" + currentTime.getTime(); }

That's right! I'm using IFRAME.. I can already see you're not surprised as if you already know the solution. There's really no other option since any other solutions will be breaking Google's TOS.

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

Create a globally access IFRAME named "googlead" or whatever you desired. To make sure that this page does not get cache, always pass a unique parameter. In this case I used client's system time. You could use other algorithm to create unique random characters but for lazy people like me will use what I did.

Great! I got my IFRAME to refresh on every HTTP/AJAX request.. but what the hell! it only shows Public Service Ad. I want to show ads that's related to my site!
Now in order for Google to content search your page... the content has to be inside wherever you put your google adsense script. For now this is what I had.

--ad.jsp-- <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>

No wonder I'm getting PSA, there's no content!! now if I put a content then it shows litterally on your page.. which becomes stupid. Showing Ad and showing key word contents to the user will quickly condemn your site to hell. Now how can I put the content that's not visible to the audience? By pure stupid dumb luck, I found out that you can write invisible contents in your IFRAME by setting absolute height (that's right it took 2 days..my other solutions were too complicated and all failed).

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

For my ad I only need height of 100, so if I write anything below then it's invisible to the user and visible to the google content search engine! beautiful!! I just love dumb simple solution!

<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/> <% if (yourkeyword !="" null) { print your key words here! } else { print your general key words in case you don't have any. Example "Vacation Money Dating" better than PSA's! } %>

Voila! Now I have total control of the content key words for google engine! In this case I used JSP where I save the content in my session and display on this page. But, I'm sure this techinque will work on whatever programming language.

Jguru | ajaxian

How to advertise on a pure AJAX application?