Adsense Beautifier for Drupal
Want to increase click rate for your Adsense ads? WordPress users have been using the Adsense beautifier, and this is also implemented on this site. Since I run a few Drupal communities with Adsense, I thought I'd port that tweak to Drupal.
The concept is based on putting some sort of rotating colorful icons next to your ads which would prevent the user's ad blindness. Please note that the Google terms indicate that the image should be separated from the ads and should have no connection to the ad whatsoever. Furthermore, you may not use arrows or any other visual indicators that point to the ad. Here's the related details from JenSense :
AdSense ad units with images next to them
The least surprising of them all, AdSense has added rules regarding the use of images next to AdSense ad units.
- May not direct user attention to the ads via arrows or other graphical gimmicks
- May not place misleading images alongside individual ads
and more :
We ask that publishers not line up images and ads in a way that suggests a relationship between the images and the ads. If your visitors believe that the images and the ads are directly associated, or that the advertiser is offering the exact item found in the neighboring image, they may click the ad expecting to find something that isn't actually being offered. That's not a good experience for users or advertisers.
No. If the ads and the images appear to be associated, inserting a small space or a line between the images and ads will not make the implementation compliant.
So, with that said I went to do two things -
- Find icons that are completely unrelated to anything on my site.
- Port the Adsense Beautifier into Drupal.
To find relevant icons you could just go to Google Image Search and use the Advanced search to look for small size images.
I have a few icons I'm satisfied with and that are according to the Google Adsense terms and match my most common Adsense ad - Banner. Download the ones I use here - Drupal Adsense Beautifier (rename to .RAR). Put the icons you use in a directory called banner inside the images directory in your Drupal theme.
Then add the following to the style.css to create a rotatable image next to the ad separated by a line :
.randombanner {
background-image: url(rotate.php?folder=banner);
background-repeat: no-repeat;
background-position: 0px 0px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
width: 400px;
}
.randombanner p{
margin: 0px 0px 0px 50px;
padding: 0px 0px 0px 5px;
border-left-width: 1px;
border-left-style: dotted;
border-left-color: #000;
}
For the rotate.php which the style is pointing you can use http://alistapart.com/d/randomizer/rotate.txt .
Next, all you have to do, is put your Banner Adsense code between the right CSS tags, like the following :
<div class="randombanner">
<p>
<YOUR ADSENSE CODE HERE>
</p>
</div>
And that's about it. The same can be done to all other ads format using the same method. An implementation of this code can be seen on the following site : http://www.chinalyst.net .