Jul
10
2008

AdSense CSS Top Position – Make More Money From First Ads

Share
Email

The first AdSense ad that appears on your site is important. Why? Because it has the highest earning potential. The highest bidding ads are displayed inside whatever ad is rendered first. If you’re using multiple AdSense banners on a page then this is a common concern. Especially when you have ads showing up first in a leftside bar or top ad spot (before your body ads where most people see CTR is the highest).

A Worse Ad Setup Scenario:
Another scenario that makes it worse is if you utilize a leftisde ad, top ad, and then have a body/content ad. Its well known that most sites produce their highest click thru rates on ads in the body of their content. With that assumption, we want to get the biggest bang for our buck!

The Old Work-A-Round Method:
If you remember my post way back when about Multiple AdSense Banners That Could Cost You Money, it follows along the same issue. While you are putting the top paying ads in the highest clicked areas, you’re also sacrificing the ability to place any ads before that.

Not anymore! Now you have an option even if you don’t use a the hip new CSS designs and styles. Of course you’ll need to use CSS to do this trick but now you might have another reason to start learning it for your future redesign, right?

CSS Trick For More Income From First Place Positioning:
To get started, the first thing you’ll need to do is place a DIV tag just below your Body tag to ensure its the first ad that your browser comes into contact with. Also place your unique adsense code inside the div (see below). This doesn’t mean it will necessarily appear first, but it is recognized as such because it comes up in the source code first. CSS is great like that.

<div id=”ad1″>
INSERT YOUR ADSENSE CODE HERE
</div>

This next part is difficult to help everyone at once with because every site is unique. Add this CSS code in your style sheet and do some trial and error with the left, right, top, and bottom attributes to position the ad properly. Change the height/width as needed depending on the ad that you’re trying to place in.

#ad1 {
width: 468px;
height: 60px;
position: absolute;
left: 140px;
right: 0px;
bottom: 0px;
top: 350px;
}

If you’re not using a style sheet wrap the above code inside the following tag and place it all within the head of your html document:

<style type=”text/css”>
INSERT CSS CODE ABOVE HERE
</style>

You’re going to have the hardest time getting this to work in liquid layouts with pixels. In that case you might want to switch to em’s or percentages to match the length of change needed every time the browser window is adjusted. You may also want to use relative instead of absolute positioning depending on your existing setup. See the description of those below and choose which applies best to you.

Relative VS Absolute Alignment:
Relative – This moves an element relative to its normal position, so “left:20px” adds 20 pixels to the element’s left position no matter what starting container its in.
Absolute – This specifies coordinates relative to its containing block. If you had a div block inside another div block that was already centered and 800px width specified. Then adding left:20px would start a 20 pixel bump at the beginning of the box that is 800px wide and centered versus starting on the far left margin of the browser window.

Placeholder your Absolute Positions With A Separate Div:
If you use absolute positioning you will NEED to create the white space area for the ad manually. So you can shove your div at the very top of your page, but you cannot float (allows the text to wrap) AND position:absolute at the same time. Create a space in your template by doing something like this wherever you’re positioning you’re ad. Also be sure the content is not going to change and therefore push that div down in any case. Otherwise your manual alignment of the absolute positioning will be skewed:

<div style=”width:468; height:60″></div>

Notes:

  1. Moving the DIV code into an existing container or wrapper div might be best assuming no other ad code will show up before it.
  2. Keep in mind the place that spot that your ad is being positioned into. You may have to make some adjustments to existing code where its being inserted

You may also want to combine the strategy mentioned here with Ways To Optimize Google AdSense – Blending Content Ads.

Any Value To Learning CSS?
This strategy is more intermediate and you may need help if you’re not familiar with CSS. Try spending some time playing with it, posting to forms, or commenting here if you’re spending hours trying to get it to work. Your best bet would be to pick up a CSS book or Google for some basic CSS tutorials. CSS is easy enough that it can be learned in an afternoon. However it also has quirks about it that you’ll need to learn by playing with it yourself. If you ever plan to do web design work, its more then essential these days as browsers are only growing their use of it as a standard.

Respond: Leave A Comment | Trackback URL

Entrupeners, Subscribe for the lastest tools, tips, and tutorials.


5 Responses to AdSense CSS Top Position – Make More Money From First Ads

  1. Absolute positioning is a great way to get something to go where you want it.

    When used in combination with Firefox and Firebug, you can see real time updates when coding. It helps me when I do coding work.

  2. you know don’t currently use adsense on my page, but this is great info!

  3. Jeremy

    How do you make adsense load first adding a delay before the whole page content or post content with post title appearing later after the delay for say about 30 – 35 seconds.

    I seen some people do that and thought this might be a way to increase the CTR in adsense.

    Do you know the answer to doing this

    Regards,

    Jeremy

  4. You could use a javascript timer and cover all divs with a block of whatever color suits your theme. Then when the timer is up, do a display:none on the blocks that are covering all content. Thats kind of tedious and makes your site useless to people with JS turned off. But its the first thing I thought of :) .

    Or (and this ones a bit better), make sure you use adsense either in/on/under the header area or immediately in your left hand sidebar. Then in php do a sleep(30) right after your ad. After the time is up it will continue to load the rest of the page. Though, I would set that for closer to 5-10 seconds if you were really going to try this. 30 seconds is a long time. There are some other drawbacks to that too including script execution time limits on the server that would have to be extended a bit for this to work. Default is usually 60, but you need to figure, the rest of the page has to load too.

    If you have a high quality content site, I’m not sure why you would ever want to do this. If its purly a site to make adsense income on, then I can see why you might think you need this. Otherwise, move on, that kind of thinking is counter productive to any site trying to grow in the long term. Not to mention a waste of time in trying to make income with an adsense only site.

  5. Jeremy

    Hi Rob

    I am trying to impliment this on blogger blogs.

Leave a Reply

Custom Theme by Rob Malon | Content & Design © 2010 - RobMalon.Com - Chicago, Illinois