Embellish Ad units and Link units without fear of empty blocks. A nice way to increase the CTR of Link units and Ad units while making sure that you don't have any page with an empty AdSense block: use collapsing units script as a base for further Javascript actions.Have you ever thought of doing something beautiful with your AdSense blocks?
I'm sure many of you now know about the "images next the ads" which increase your CTR everytime, some of you who don't allow Public Ads to display when there isn't enough ads in Google's inventory to display on your page may know about collapsing units which can hide empty AdSense blocks and re-gain the space in your page.Well, the html file that Google provides you with can be adapted to do more things than hiding the AdSense block, for example it can hide additional HTML elements if the AdSense block is empty, or show hidden elements waiting to be activated via JavaScript.I would like to provide you with a very simple example on this page.At the bottom of this article you should see an AdSense Link Unit accross the page size 728x15
On the top of this Link unit there is this graphic: 
Well, if you don't see this Link unit, it means there is no ads to display for this article and you should not see the graphic above on the page either, how is this possible?Simple, I use a DIV around the graphic and the AdSense block, which I've named id="google_ads_adlink" and then in the AdSense code I use as google_alternate_ad_url this file :http://www.senserely.com/google_adsense_script_adlink.html (right click to download it) Here is an extract of the code for setting up your AdSense block :
<div id="google_ads_adlink" align="left" style="cursor: pointer; width: 100%;">
<img src="http://www.senserely.com/images/bg-adlink.gif" width="751" height="10" border="0" />
<div style="background-color: #f3a84e; width:100%;">
<script type="text/javascript"><!--
google_ad_client = "pub-XXXXXXXXXXXXX";
google_alternate_ad_url = "http://www.senserely.com/google_adsense_script_adlink.html";
google_ad_width = 728;
google_ad_height = 15;
google_ad_format = "728x15_0ads_al";
google_color_border = "f3a84e";
google_color_bg = "f3a84e";
google_color_link = "000000";
google_color_url = "000000";
google_color_text = "000000";
//--></script><script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div></div>
You can see that the IMG tag is within the DIV id="google_ads_adlink" and so will be hidden in case there is no Adlink to display... Here is the code for the alternate url which contains the javascript to hide the DIV id="google_ads_adlink" :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<script type="text/javascript">
var w = window;
if (w.parent.document.getElementsByName) {
var google_ad_frames = w.parent.document.getElementsByName("google_ads_frame");
var google_ads_adlink = w.parent.document.getElementById("google_ads_adlink");
for (var i = 0; i < google_ad_frames.length; i++) {
var f = google_ad_frames[i];
if (f.contentDocument) {
if (w.document == f.contentDocument) {
f.height = f.width = 0;
google_ads_adlink.style.display="none";
}
} else if (f.contentWindow) {
if (w == f.contentWindow) {
f.height = f.width = 0;
google_ads_adlink.style.display="none";
}
}
}
}
</script>
</head>
<body style="background-color: transparent;">
</body>
</html>
Here you go, enjoy this example and other ideas you can come up with and if you have any question to ask please do so by commenting here.
For those who want to know if it is allowed by AdSense's Terms of Service (and you should always ask yourself this question first) yes it is. :D
| 
1 comments
no comments
Thanks for the info, I've added (ordinary) collapsing ads to my entire site. I don't know why I didn't implement it sooner.
Cryo.