I recently signed up for Google AdSense and I thought it would be fun to show ads for Internet Explorer users. Of course, you could use this tutorial for more productive purposes. Here is how I integrated this functionality into my theme.
I added 2 regions to THEME.info file:
regions[ad_left] = Ad Left
regions[ad_right] = Ad RightI then included the regions in my theme by adding some code to my theme's page.tpl.php file:
<?php if ($ad_left): ?>
<div id='ad_left' class='google_ads'>
<?php print $ad_left; ?>
</div>
<?php endif; ?>
<?php if ($ad_right): ?>
<div id='ad_right' class='google_ads'>
<?php print $ad_right; ?>
</div>
<?php endif; ?>Next, I added some CSS in my style.css theme file to absolutely position the regions in a fixed position:
.google_ads {
position: absolute;
bottom: 10px;
width: 120px;
height: 600px;
display: none;
}
.google_ads .block {
padding: 0;
margin: 0;
}
body > .google_ads {
position: fixed;
}
#ad_left {
left: 10px;
}
#ad_right {
right: 10px;
}Now that my regions were setup, I added 2 blocks containing the Google AdSense code and assigned the blocks to my new regions. You'll need to make sure the input filter you choose allows for javascript to be included.
At this point, the ads are included for every browser, but they will not be shown due to the "display: none" property I added to the "google_ads" CSS class. I added a few lines of jQuery in my theme's script.js file to show the regions for IE users:
$(document).ready(function(){
// per IE ads
if ($.browser.msie) {
$('.google_ads').show();
}
});If you view this page in IE, you'll see my code in action ^_^
My additional thoughts... this code executes the Google AdSense javascript regardless of your browser, but it is only shown to IE users. A more efficient method would be to use AJAX to include the javascript ONLY if the browser is IE, or of course, by implementing a server side browser detection library.
