Customizing AdSense Design – Make Your Ads Perfect

AD

adsenseCustomizing AdSense Design – Make Your Ads Perfect

One of the easiest ways to monetize your website is through contextual advertising and one of the largest companies providing this service is Google with its Google AdSense.

So far nothing new, let’s change that. Most people simply create an AdSense account, put ads on their site and they consider the job done. What’s completely ignored is the “AdSense Setup” button…

Adsense Setup Screen

adsense setup screen

Color Palletes

We’ll be talking about the Color Palletes option. It gives you great possibilities to alter your ads design and make them a perfect complement to your website.

Color Pallete

As you can see, there are several pre-configured layouts for the ads displayed on your site. You can match one of these designs with your own website templates or create a whole new one.

Premade Templates

Let’s shortly describe all templates that’s been made for you:

Open Air - Basic template, white background makes it good for almost any website.

Seaside – A little more distinctive thanks to larger presence of blue, otherwise very similar to Open Air.

Shadow – Gray background makes it an excellent choice for professional looking ads.

Blue Mix – Probably the worst one, mixing together light and dark blue. It doesn’t give a good impression.

Ink – A typical black model, it can be used for better contrast with white website template.

Graphite – Having gray as its main (and pretty much the only one) color, this layout is probably too boring and not enough expressive.

Examples of Premade Templates:

Preview Adsense colors

Create Your Own Layout

The funny part is that you can completely ignore all of the layouts above and create your own. I won’t be telling you what each column does, it’s a simple trial-error method.

However, there are some guidelines, such as:

  • avoid gaudy colors (like pink)
  • test multiple variations before you decide
  • don’t change anything if you are generating the income you want

Customizing Adsense with Code

Now we will try the redesign our AdSense through simple, pre-defined Google code/parameters. These are simple parameters which can be used inside the ad code provided by Google.

It is also called old school, but it can become a real asset to your business. I have personally asked Google if it is against their TOS to use such parameters… Apparently, it is not!

Where and Why Use Code Modification?

It is a good idea to use this type of customization when you are implementing Adsense Revenue Sharing or you have a blog with multiple authors who use their own Publisher and Channel ID.

Every author’s ad can possibly have different colors, types, design and sizes. So to keep all ads on a site alike you can use these codes.

If you have a code ready and you want to make some changes, it is impossible to do it from the AdSense control panel.

You can customize it using these parameters:

Parameters for Customizing Adsense

google_color_border = "FFFFFF"; //Border Color 

google_color_bg = "FFFFFF"; // Background Color

google_color_link = "0000CC"; //Link Color

google_color_url = "333333"; // URL Color

google_color_text = "333333"; // Text Color

google_ad_type = "text_image"; // Ad Type (image or text, in this case it's both)

All these parameters are self explanatory. You can easily embed them in your ad code and change color, border color, link color, ad type etc.

How to Implement it

These parameters are inserted inside the ad code provided by Google.

This is how a simple ad code looks like :

<script type="text/javascript"><!--
google_ad_client = "pub-xxxxxxx";
google_ad_slot = "xxxxxx";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

Adding Parameters in the code:

<script type="text/javascript"><!--
google_ad_client = "pub-xxxxxxx";
google_ad_slot = "xxxxxx";
google_ad_width = 300;
google_ad_height = 250;
google_ad_type = "text_image";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "0000CC";
google_color_url = "333333";
google_color_text = "333333";
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

Each Parameter is added as : Parameter_name = “parameter_value” ; . Make sure to end every parameter with a semicolon ‘;’.
Enjoy your color game and thank you for reading!

PS: Feel free to discuss in comments…

Advertisement

Related Stuff!

Published on: November 6, 2010,

This post is in: Articles, Tutorials

Author

Vogin

24y old visionary Czech.
All Articles by

Leave a Response