Mar 12th, 2007
Blending Google Adsense Into Your Website
This is a very basic but important step in improving the click thru rates of your Google Adsense advertisements on your website. Essentially what we want to achieve is a more natural blending of the advertisements into your existing color scheme. Many webmasters are content to use the default Blue/Green color scheme that Google uses by default. In my opinion this is a huge mistake for three reasons.
1. Surfers are already banner blind and if your Google Adsense block is comprised of markedly different colors than the other areas of your site it makes there default shapes (728×90, 468×60 etc) more apparent to the eye and thus easily overlooked.
2. The Blue / Green color scheme already screams “Google Ads” to the surfer by the fact that many webmasters out of ignorance or laziness simply donut take the time to modify the color scheme. This instant recognition of the Google ad color scheme only exacerbates the banner blindness of your users.
3. We have found through countless tests that advertisements that appear to be part of a sites content as apposed to a advertisement both attract more visual attention as well as drive significantly higher click thru rates.
So how do we blend these ads more effectively into our site? This is what I will answer below.
First lets get aquatinted with the interface.
You can see on the right the default Adsense colors. Many webmasters are content to click no the color box and select from the limited amount of alternates available. This (while better than nothing) is still not what we want.
Here is what to look for in HTML.
View the source of the page these ads are going to appear. You will see something like the following if your site uses HTML tags to control color schemes.
<body bgcolor=”#330066″ link=”#ffff66″ vlink=”#ff9900″ alink=”#ffffff” text=”#ffffff”>
In CSS you would look for something similar to this:
A:link {color: #ffff66;}
A:visited {color: #ff99900;}
body {background-color: #f330066;}
The code above is essentially telling the page how to display the colors of the pages background, links and text. Lets now apply this to our Adsense.
Simply copy the following variable from the code on your page and apply it as follows to the Adsense.
| bgcolor | = | Background |
| link | = | Title |
| bgcolor | = | Border (this prevents a box around your ads) |
| text | = | text |
| vlink | = | URL |
Be sure to check the preview on the left side of the Google Adsense interface to ensure that the colors are looking correct.
Once that is done apply the new Adsense code to your done. Please send your feedback if you found this information helpful.
One Response to “Blending Google Adsense Into Your Website”
Leave a Reply
You must be logged in to post a comment.
[…] border and included an “ads by Google” graphic. While the ability to remove borders and modify AdSense design was always possible via their interface, the ability to modify the “ads by Google” […]