Skip to main content

Integrating AdSense into Drupal

Ok, I spend an entire afternoon, evening and half of the night over this (after it has been nagging me for weeks), so I might as well blog about it in the hope, that it will save someone else some time.

The problem

Like many webmasters, I use Drupal. I also use Google AdSense to monetize my content and being somewhat greedy, I naturally aim for a high click through rate. This is where the trouble starts. As everybody knows, in order to have a good CTR, it is essential to properly place and blend the banners. The trick here is to make them highly visible but not obnoxious at the same time.

<

p>
After a lot of playing with placement (often grossly disregarding the fact, that I employ a CMS and therefore should not manually insert HTML/JavaScript code into pages), as well as closely watching the daily statistics, I came to the following conclusion:

  • Banners perform best, when close to the content (not really surprising).
  • The banner with the best result (for me) is a rectangle, placed at the start of the page, having the text flow around it (not a big surprise either, printers have used something similar to this in books for years because it looks good).
  • A Skyscraper on the left or right column is easy to do, but also performs four times worse then the rectangle (at least for me).
  • Whenever I write an article longer then one screen page, I also want a second banner at the bottom, as I do not expect the visitor to scroll up again just to see the first banner a second time.
  • I don't want more then one banner visible at a time and no banners at all on certain pages. Seeing more then one banner at once might discourage the visitor and putting advertisement on non content pages (e.g. the imprint) is forbidden by the AdSense TOS. This means, I need a way to determine ad placement on a per article base.

<

p>
So, how to meet these goals? I could of course simply use the Drupal AdSense module. Unfortunately, it works on a block basis and therefore cannot display the banners in the locations, I want them to. What I need is a way to inject the AdSense code directly into the page's content area itself, not somewhere adjacent to it.

<

p>
The naive approach, of course, would be to simply copy&paste the Javascript directly into the article when writing it. However, that would completely defeat the purpose of using a CMS in the first place. It is error prone and does not allow to update or disable all ads at once, should I wish to do so. A slightly better solution would be to use a content filter, that expands macros with the actual code. Stupidly, this would also likely put banners in the teasers and hence, I'd risk showing more then the allowed amount on the frontpage. So this is a no go as well.

The Solution

Unsurprisingly, the best solution to this dilemma is called CCK and Contemplates. So here are the setup instructions for getting it right, using the "Blog" content type as an example.

Installing the required modules

First download and install the CCK and the Contemplates module. Enable at least "Content", "Content Templates" and "Option Widgets".

Setting up the CCK part

Go to admin/content/types and click the new manage fields link for the blog type. Create a new field with the label "Advertisement", fieldname "toggle_ads", datatype "Text" and elementtype "Checkboxes/radio buttons". Configure the new field. Under Global settings set the Number of values to unlimited (this will give you checkboxes instead of radiobuttons) and enter the following two lines in the allowed values list:


Top:300x250
Bottom:468x60

<

p>
Last but not least, the new options widget should only be seen by you and not your visitors, so switch to the Display fields tab. and set the display option to "Hiddden" everywhere.

Setting up the Contemplate part

With the toggling mechanism in place, go to admin/content/templates and create a template for the blog type. Expand the Body panel and check the Affect body output checkbox to enable the editing field. Replace it's content with the following code:

<

p>


<?php
if ($node->field_toggle_ads!=null)
foreach ($node->field_toggle_ads as $val)
if ($val['safe'] =="Top:300x250") print <<

ENTER YOUR ADSENSE CODE HERE

END;

?>

<?php print $body ?>

<?php
if ($node->field_toggle_ads!=null)
foreach ($node->field_toggle_ads as $val)
if ($val['safe'] =="Bottom:468x60") print <<

ENTER YOUR ADSENSE CODE HERE

END;
?>

Testing it

Assuming nothing went wrong, create a new blog page now. You should see two new checkboxes labeled "Top:300x250" and "Bottom:468x60". Checking these should toggle the ad placement. If you so desire, you can add additional formats (sometimes the text flows better around smaller or wider banners).

UPDATE: You might also want to read this blogpost for a more elegant solution.