I made an amazing discovery regarding Google AdSense that I will share with you in this post. Not only will I share with you what I learned (which you may or may not already know), but I will also explain how to modify your theme template to take advantage of this lucrative information.
Facts About AdSense
According to the Google AdSense Terms & Conditions, you are allowed to place up to three ad units and three link units on a single page. If you have added the AdSense code to your theme template, you don't even have to worry about this. The code will automatically display ad units up to three times. For example, on my main page I show my last 10 posts. In my theme template, I have added my AdSense code at the end of my "post" template. Theoretically, the ad units should therefore display at the end of all 10 posts. But this is not the case. The code is smart enough to display ad units the correct number of times.
I recently learned that Google displays the ads on your page in order of value. This means that the highest paying ad of the three will be displayed first. Google considers the "first" ad to be the first block of AdSense code it sees in the final markup of your page's HTML.
Capitalizing on These Facts
When I learned this interesting fact about highest paying ads displaying first, it caused me to take another look at where I was displaying my Google Ads. Originally, I only had three ad units displayed at the bottom of the first three posts. I realized this was a huge waste of a valuable ad spot! Most people don't read an entire post from start to finish. They'll skim the first paragraph or two and decide if its worth finishing. Often they will get the information they need before the end of the article. Or in my case...before they get to the ad! Since the first ad is the most valuable, I wanted to change my design to highlight this ad unit and put it in a spot that catches the reader's attention.
To further capitalize on this valuable first ad, I decided to make it an image ad to really spark the reader's interest. It will take up more real estate, but by selecting "Image Only" ads when creating my AdSense code, you can increase your chances of getting more clicks. In my opinion, the entire world has become desensitized to Google Text Ads. Without even trying, their eyes just skip right over them. An image ad, on the other hand, can still be attractive and effective at grabbing the reader's attention.
I decided to put the first ad at the top of my Buzz Sponsors section which can be seen in my sidebar to the right.
Houston, We Have a Problem!
Remember earlier that I said the Google AdSense code is smart enough to display the correct number of ad units? In my case, it was displaying all three units in the first three posts. My blog platform generates these posts before it generates the side bar. How then can I make the FIRST ad unit appear at the top of my side bar? Thanks to the magic of Cascading Style Sheets (CSS), the answer to this question is not as hard as you might think.
Updating Your Template
Most blog templates that have a sidebar use an amazing (but often misunderstood) CSS property called float. This property tells a browser to display an HTML element to the left or the right side of its parent element. The beauty of the float property is that when it is applied, the content being floated can occur BEFORE or after the rest of the content. It will look the same either way.
A typical WordPress theme will generate the content first and the side bar second. Here is the code of the default theme's main index page:
<?php get_header(); ?> // generates the header
<div id="content" class="narrowcolumn"> // generates the main content
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
// generate each individual post (omitted for clarity)
<?php endwhile; ?>
<?php endif; ?>
</div>
<?php get_sidebar(); ?> // generates the side bar
<?php get_footer(); ?> // generates the footer
See how the main content (the posts) gets generated BEFORE the sidebar? By the time the call to get_sidebar() is made, you've already generated the three allowable AdSense ad units. But, thanks to the amazing float property, we can make a simple change to generate the side bar first! If we move the call to get_sidebar() ahead of the content div, the lucrative image ad in the sidebar will be the first ad generated, but your layout will still look EXACTLY the same. The resulting code should look like this:
<?php get_header(); ?>
<?php get_sidebar(); ?> // the side bar FIRST!
<div id="content" class="narrowcolumn"> // generates the main content
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
// generate each individual post (omitted for clarity)
<?php endwhile; ?>
<?php endif; ?>
</div>
<?php get_footer(); ?>
This works because the side bar has been give the property of float: right, which can be found if you look in your theme's style sheet file. This means that the sidebar content will be pushed to the right side of its container element and the rest of the content will flow around it. It doesn't matter if the float content is generated before or after the rest of the content. Check out this article if you want to learn more about the CSS Float property.
I hope this tip helps you earn a little extra with your Google AdSense. At the very least, it should help you get a little more understanding of your theme's template. Let me know if this works for you or if you have any questions.
Jeff
* To receive more tips and useful blogging information, subscribe to the BuzzMyBlog RSS feed.
