This article by Eric Giguere is adapted from his upcoming e-book “Uncommon AdSense“. ProBlogger readers will also find his contextual advertising blog of interest. Please Note that if you use the AdSense code outlined below that you should add your own publisher code and channel codes to it to make it your own.
AdSense and Chitika, like most ad serving programs, depend on JavaScript being enabled in the user’s browser. The code you paste into your web pages is JavaScript, so if the browser’s JavaScript support is disabled the code doesn’t run and no ads are displayed. Even your alternate ads won’t display — the alternate ad facility still requires the JavaScript code to run. Nothing will be displayed, in fact, if JavaScript is turned off. This is where the <noscript> tag becomes important.
How <noscript> Works
If JavaScript support is enabled, the browser executes any code it finds between a <script> and </script> pair and ignores any markup it finds between a <noscript> and </noscript> pair. If JavaScript support is disabled, however, the contents of all <script> tags are ignored and the contents of the <noscript> tags are displayed instead. Consider this simple page:
<html>
<body>
<script type=”text/javascript”>
document.write( “<b>Hello!</b>” );
</script>
<noscript>
<b>Goodbye!</b>
</noscript>
</body>
</html>
Load it into a browser with JavaScript enabled and you’ll see “Hello!” with JavaScript disabled you’ll see “Goodbye!” instead.
Using <noscript> with AdSense
Let’s say you’re using the 234×60 (half-banner) ad unit on your page and that you’ve defined an alternate URL for it. You’ve created a separate HTML file to hold your alternate ad, which could be pretty much anything that will fit in a box 234 pixels wide by 60 pixels high. Just make sure that the alternate ad doesn’t use any JavaScript.
Let’s say your AdSense code looks like this:
<script type=”text/javascript”><!–
google_ad_client = “pub-5964030199537728”;
google_alternate_ad_url = “http://www.mysite.com/mybannerad.html”;
google_ad_width = 234;
google_ad_height = 60;
google_ad_format = “234x60_as”;
google_ad_type = “text_image”;
google_ad_channel =””;
//–></script>
<script type=”text/javascript”
src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”>
</script>
Notice the alternate URL property: we’re telling AdSense to display the content at http://www.mysite.com/mybannerad.html if it has no ads to display. (These are all fake URLs, of course.) The equivalent Chitika code is very similar.
The alternate URL is the address of an HTML page much like this:
<!– mybannerad.html –>
<html>
<body>
<a href=”http://www.affprogram.com/myaffid”>
<img src=”affad.gif” width=”234″ height=”60″ border=”0″></a>
</body>
</html>
This particular alternate URL happens to display a banner promoting a product sold via an affiliate program; when clicked, the visitor is sent to the product site via an affiliate link.
So how does the alternate URL get displayed? An <iframe> tag like this one is used:
<iframe width=”234″ height=”60″ frameborder=”0″
src=”http://www.mysite.com/mybannerad.html”>
</iframe>
If you’re using an alternate URL already, why not make it do double duty and use it within a <noscript> tag as well? Here’s what I mean:
<noscript>
<iframe width=”234″ height=”60″ frameborder=”0″
src=”http://www.mysite.com/mybannerad.html”>
</iframe>
</noscript>
Now place the <noscript> block immediately after the AdSense code, like so:
<script type=”text/javascript”><!–
google_ad_client = “pub-5964030199537728”;
google_alternate_ad_url = “http://www.mysite.com/mybannerad.html”;
google_ad_width = 234;
google_ad_height = 60;
google_ad_format = “234x60_as”;
google_ad_type = “text_image”;
google_ad_channel =””;
//–></script>
<script type=”text/javascript”
src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”>
</script>
<noscript>
<iframe width=”234″ height=”60″ frameborder=”0″
src=”http://www.mysite.com/mybannerad.html”>
</iframe>
</noscript>
You can’t modify the AdSense code itself, of course, but it’s OK to immediately follow it (or precede it) with your own code. As long as your alternate ad doesn’t require JavaScript itself, you’ll always be showing some kind of ad to the user, regardless of their JavaScript setting.
Excellent tutorial Eric… as soon as I get a chance to tweak my templates I’m going to put this one into play.
Glad you liked it, and thanks to Darren for running it here. I also like to wrap the entire script/noscript block in a div as well, but that’s not a requirement.
Excellent tutorial. Just the other day I was thinking about what I was going to do if IE 7 was going to handle scripts differently (I read an article on how Adsense didn’t work in early versions of IE 7 Beta 1). Now I know exactly what I need to do.
That’s a slightly different case, but same principle. What you’d do is wrap the entire script/noscript block with a conditional comment to exclude it from IE 7. Then you’d add a new block consisting of just an iframe that you’d wrap within another conditional comment, this time including the new block only on IE 7. Gets kind of ugly, though. However, it’s my understanding that IE 7 blocking AdSense ads is just a bug… but I haven’t tested it myself, as I’m primarily a Firefox user at this point (see my blog for a nifty little Greasemonkey script that highlights AdSense ads…)
eh, i think every at least little advanced webmaster knows how this works. but ok, there may be some beginners too…
The question is why would you force some sort of advertisement on people who went through the trouble of blocking yours? It is NOT the equivalent of TV shows adding product placement within the show — it is like TV shows finding ways to move commercials past the Tivos and PVRs so they’re still displayed, much to the chagrin of the consumer who doesn’t want to see them.
In this situation, it is more important to find out WHY your readers don’t want to look at your advertising. Are they just swamped by ads that aren’t relevant? Do they not want to buy online?
My top 5 readers are also my top 5 commenters. They’re also generally ad-blockers (which I’ve confirmed by seeing that their visits to my sites don’t seem to update my pageviews in AdSense but do on my counters). Why would I be happy that they don’t view ads?
First of all, it doesn’t hurt my CTR — they won’t click anyway. Secondly, I profit MORE from their input and continued commentary than by any 50 cent or $1 click from them. Some readers take an hour out of every day to comment on my various articles — one hour to pay 20 people to comment each is 20 hours times US$12 per hour. I just gained US$240 (or more) worth of commentary rather than, say, US$10 in ad income.
I would MUCH rather get written input than ad clicks by people who won’t buy from my advertisers. I think the AdSense and YPN TOS is stupid to preventing people from talking about their ads in certain ways. For example, I’d rather be able to tell peope NOT to click if the ads aren’t interesting, but this still draws attention to the ads, according to the networks.
In the long run, you write for a profit — not just financial, but informational. The input of readers is more profitable for me than monetizing ever will be. Every new comment that is insightful makes me worth more money in my real job.
Obviously, there are different approaches that publishers can take with respect to displaying or not displaying ads. On some of my sites, for example, I go to the extra effort of hiding ads when printing a page, because the ads are useless in that case. It all depends on your situation. Only you know what’s best for your site.
I think the point is made well about utilizing the noscript tags, that often are overlooked. It’s not about ad-blocking in particular. Tech savvy surfers who block ads do so by other means. Disabling JavaScript for the sole purpose of blocking ads is about as bright as blocking flash to block ads.
Something that might work better than showing essentially bottom-tier ads/affiliate links(unless server generated and well-targetted) is making a banner or text blurb stating that the site is supported by advertising and if the user wishes to block ads, a store purchase or donaation/tip would be appreciated to help cover costs and time spent on it. It really depends on your content and site/business model though.
I noticed that if the user has some kind of ad blocking software, Adsense and YPN ads are displayed, but nothing happens if the user clicks on the ad. Can the noscript tag be used here?
No. If you’re seeing ads, it means that the JavaScript is running. The tag only gets invoked when JavaScript is disabled.
The ads are displayed – why would the user not be able to click on the ads?
Well, this would be a special case. Sometimes AdSense publishers use software like this to prevent themselves from clicking on ads on their own sites…
I can’t figure this out. I am using a friend’s computer and I cannot click on Adsense ads on some sites. I can click on AdSense ads at Canada.com though – not sure why.
eg. http://www.canada.com/vancouversun/index.html (in red near bottom of page)
Eric, thank You very much for excellent practical tutorial!
Excellent idea Eric. However, I have a problem with with AdSense code when the code is inside the iframe. Users are not able to click the AdSense Ads @ http://www.orientalads.com/default.asp/
Any help why the ads are not clickable (javascript is enabled), please.
Thanks,
RkMailer