Effective AdSense Alternative Ads

It probably occurs to plenty of affiliates and other AdSense publishers to insert their own advertisements by specifying an “alternative ad URL” when configuring AdSense units. Why hand over valuable screen space to public service advertisements (PSAs) when you can have your own ads occupying that space? You might list affiliate links, promote other websites in your own network, or even advertise other areas of the same site on which the ad is appearing.

And better yet, why not make your alternative ads look just like Google’s own ads? Although Google’s terms of service prohibit displaying AdSense units on the same page as other ‘look-alike’ text ads, they do not prohibit replacing AdSense units with look-alikes.

Unfortunately, most of the example code we’ve seen published for doing this wind up not looking quite right or not behaving in the same way an AdSense unit would.

So, we’ve decided to share the code we use on some of our other sites for performing this job, and we hope you’ll find it useful.

Key Features of AdSense Units

First, let’s look at some of the important featurs of AdSense units, features which we’ll want to mimic if we’re going to achieve a good level of similarity:

• ad units occupy a space of fixed dimensions in terms of pixels
• in modern standards-compliant browsers (everything but IE), ad unit text changes size depending on the user’s browser settings and the site’s stylesheet settings
• ad units respond to clicks anywhere within the fixed ad unit space
• displayed URLs do not wrap
• ads shown at larger text sizes (possible in non-IE browsers) do not overlap one another

All the example code we’ve seen published for mimicking the AdSense look and feel falls down when it comes to at least one, if not more, of these key features.

Our example code provides each of these features, in addition to the obvious requirements like individually specified colors for ad title, text, and URL.

AdSense Replacement Code, Valid XHTML 1.0 Transitional and CSS

First, let’s look at the code (valid XHTML 1.0 transitional) for a 120×600 pixel skyscraper:

<div class="adblock120x600">
<div class="tagline"><a href="/path/to/ad-information.html" target="_top">Ads by Whooooo?</a></div>
<div class="adtext">
<a href="http://www.destination1.com" target="_top">
<span class="title">Ad Title 1</span>
<span class="text">Promotional text for ad unit 1</span>
<span class="url">www.destination1.com</span>
</a>
</div>
<div class="adtext">
<a href="http://www.destination2.com" target="_top">
<span class="title">Ad Title 2</span>
<span class="text">Promotional text for ad unit 2</span>
<span class="url">www.destination2.com</span>
</a>
</div>
<div class="adtext">
<a href="http://www.destination3.com" target="_top">
<span class="title">Ad Title 3</span>
<span class="text">Promotional text for ad unit 3</span>
<span class="url">www.destination3.com</span>
</a>
</div>
<div class="adtext">
<a href="http://www.destination4.com" target="_top">
<span class="title">Ad Title 4</span>
<span class="text">Promotional text for ad unit 4</span>
<span class="url">www.destination4.com</span>
</a>
</div>
</div>

And here is the CSS which goes with it:

.adblock120x600
{
	width: 120px;
	height: 600px;
	text-align: left;
	border: none;
	font-family: Verdana, Arial, sans-serif;
	font-size: 12px;
	overflow: hidden;
}

.adblock120x600 .tagline
{
	display: block;
	background-color: white;
	color: black;
	height: 17px;
	font-size: 11px;
}

.adblock120x600 .tagline a
{
	text-decoration: underline;
	color: black;
}

.adtext
{
	height: 140px;
	padding: 0px 2px;
	display: block;
	overflow: hidden;
	border: solid white;
	border-width: 2px 1px 4px;
}

.adtext a
{
	display: block;
	text-decoration: none;
}

.adtext .title
{
	color: #0033cc;
	display: block;
	text-decoration: underline;
	padding-top: 8px;
	font-weight: bold;
	line-height: 14px;
}

.adtext .text
{
	color: #333333;
	display: block;
	font-weight: normal;
}

.adtext .url
{
	color: #999999;
	display: block;
	font-size: 10px;
	font-weight: normal;
	padding-bottom: 8px;
	white-space: nowrap;
	overflow: hidden;
}

How Does This AdSense Replacement Code Work?

So what’s going on here? What does all this CSS actually do?

The style declarations for the .adblock120x600 <div> ensure that it maintains the correct size and does not overflow any text outside the ad unit.

Those for the .adtext <div> ensure that each individual ad in the unit occupies the correct space, does not overflow, and responds to clicks over the entire area of that individual ad.

The declaration for the .title, .text, and .url <span> set text properties and spacing and ensure that URLs don’t wrap or run outside the individual unit.

Finally, the use of fixed point sizes ensures that Internet Explorer fails to resize the text in the ad units, while every modern standards-compliant browser will resize it, depending on the text size specified by the user. (If you thought AdSense ads always appeared at the same size, you’ve been spending too much time with decrepit browsers like Internet Explorer!)

How Can I Use This Code for AdSense Alternative Ads?

Using the code is very straightforward.

First, place your version of the ad code itself in a basic XHTML page, and drop the CSS code above into its own file; then, link the CSS to the XHTML page with the usual link syntax (or an @import):

<link href="/path/to/styles.css" rel="stylesheet" type="text/css" media="all" />

Why not just include the CSS inside the XHTML file itself? Well, you can do that, but you’ll save a bit of bandwidth and load time if you separate it out, because the user’s browser will cache the CSS, rather than retrieving the code over and over each time the replacement ad code gets called by Google.

Unless you’re particularly attached to the ad colors used in the example above, you’ll want to change them to suit your color scheme. You can set the border color and background colors where you see border: and background-color:; don’t alter the border-width: settings for .adtext, however, as these should be left exactly as they are to match the Google look and feel. Finally, the text color for each part of the unit can be set where you see color:. If you decide to set a border around the whole ad unit, you’ll also need to set a matching background-color: for the .tagline; be sure to choose an appropriate color for the text itself, so it still shows up!

Last but not least, just specify the URL to your new alternative ad in the “alternative ad URL” setting of your AdSense unit, and you’re all set.

This code can be modified very straightforwardly for other ad unit sizes and orientations, so have fun!

(And yo, Brian — see, there’s a much better way to do this!)