Ad Appeal

You’re smart, you know the score: For site visitors to even consider clicking your
ads, the ads have to be appealing. The way to make those ads appealing is
to integrate them into the content that’s situated around them. Fortunately,
AdSense gives you some good tools for matching your ads with the surrounding
content. Remember, though, that what you’re creating here is just the
container for the ad — its outside appearance. The actual ad text — or if the
ad includes pictures, the images — are designed by the advertiser.
Customizing ads to work on your Web site begins when you create your ads.
To create a new ad, simply log in to your AdSense account and then click
AdSense Setup. From that page, select the type of ad you want to create.
In this topic, I walk you through setting up AdSense
for Content (in other words, a content ad) because it’s the type of ad that
you’ll use most often. The principles that follow, however, work when you’re
designing other types of ads, as well.
Text matching
Text ads need to be just as appealing as any other kind of ad. So, the natural
inclination might be to dress up your text ad by making the text all kinds of
pretty colors. Big mistake: Dressing up your text ads only makes them look
more like ads.
One of the reasons that text ads are so appealing — and certainly the main
reason they perform so well when compared to the other types of ads that
AdSense makes available — is because text ads can be made to blend well
into your Web page. Notice my use of can be here — they really only blend
well if they look like their surroundings.
Keep in mind that you can’t change the font styles for the ads that you build
with AdSense. You can, however, change the fonts on your Web site to help
blend your ads better. If there’s a significant difference between the fonts of
your ads and your Web site, that’s just what you’ll want to do.
Did I mention that making your ads appear to be part of your Web site is
essential? Well, it bears repeating over and over again because this one little
factor can completely change the success of your ads. Try to keep font styles
similar between your ads and the text on your Web site. They don’t have to be
an exact match. As great as that would be, it’s not always possible, especially
because Google has decided not to make the font it uses in their ads available
to normal mortals like us. (Okay, it kind of looks like several common fonts out
there, but any typographer — someone who designs typefaces or fonts — will
tell you that even subtle differences like spacing are very noticeable.)
Back to text design. What you do have control over with AdSense is the color
of the text that you use for your ads. When you’re creating an ad, you have
several preset options for color designs as well as the ability to create your
own palette of colors for your ads. The next section shows you how you can
put these options to good use.
Color or camouflage?
Google provides its AdSense users with a set of preset palettes offering what
Google considers your best design options for your ads. You call up these
palettes using the drop-down menu in the Style area as you’re creating your
ads. Be aware though, that the preset palettes may or may not work on your
pages — it really depends on the design of the page.
Here are the palettes that are available:
Default Google: This palette includes a white background, white border,
black text, blue title, and green URL.
Open Air: This palette is exactly the same as the Google default. I’m
not even sure why it’s included in the list, but it is. It’s a clone of the
default — absolutely nothing’s changed.
Seaside: In the Seaside palette, the only change involves the border.
Instead of having a white border, this palette includes a seafoam-colored
(yes, seafoam is actually a color) border.
Shadow: With this palette, the colors begin to get progressively more
noticeable. The title (which, by the way is also a link) is still blue, the
text of the ad is black, and the URL is green, but the border is black and
the background is pale blue. Drop this ad onto a white background, and
it screams advertisement.
Blue Mix: This ad style is significantly different from all the other styles.
A light blue border, white title, light blue text and URL, and dark blue
background make this one stand out. The only page that might be able
to pull this ad off is one that’s designed in exactly the same colors. I recommend
that you change your page if it’s built like this, unless you have
a very strong reason to leave it alone (like hundreds of thousands of visitors),
because it’s hard on the eyes.
Ink: The Ink style comes with a black background and border, and a
white title, text, and URL. In other words, it’s similar to the Blue Mix
style, but instead of being blue and white, this one is black and white. I
admit it’s a little easier on the eyes, but only for short periods of time.
Graphite: In my opinion, this is a boring ad style because it’s gray. Yuck. But
on the right Web site, the black title, dark gray text, light gray URL, and pale
gray background and border might work. I don’t think I’ve ever encountered
a Web site it would work on, but stranger things have happened.
These styles are the ones that Google’s created. Although Google says they’re
the most effective ad styles, people who really are making great money with
AdSense will tell you that the defaults aren’t usually your best option. That’s
okay though because Google gives you decent customization features for
designing ads that are good options.
Tweaking the wizard
I cover the AdSense wizard in some , but there I’m more
interested in showing you how to generate the HTML you need to insert a
default AdSense ad in your Web site. Now I want to show you how you can
stray a bit from the beaten path so that you can come up with stuff other
than the default settings.
As you might expect, you start out with the very same wizard Here’s how you call it up:
1. Point your browser to http://www.adsense.com and log on to your AdSense
account.
2. Click the AdSense Setup tab.
3. Select AdSense for Content.
4. In the new screen that appears, choose the type of ad you want
to create — Ad Unit, Text only, in this case — and then click the
Continue button.
5. In the Colors section of the screen, choose one of the pre-designed
color palettes from the drop-down menu on the right.
The Default Google palette is just as easy to work with as any other, but
if you prefer one of the others over the default, that’s okay.
All the colors that you can alter in the palette are shown below the palette
name, . Note that each color has a number to
the left of it. This is the hexadecimal number that represents the color
to Web browsers. (See the sidebar, “Decoding hexadecimal numbers,”
for more on hexadecimal numbers.)
6. Use the Color Picker to the right of each ad element — Border, Title,
Background, Text, and URL — to choose a new color for an element.
when you click the Color Picker the nice colored
square — a color palette opens from which you can choose other colors.
Note that after you make the change, the sample ad in the lower-left
corner of the wizard screen changes to reflect the new color.
Play with your Color Picker just a little so you can get a feel for how wild
you can make your ads. I don’t recommend making them wild for actual
use, though. My strong advice to you will always be the simpler, the
better. It’s still kind of neat though to see how you can change your ads
just by changing the color of different elements of the ad.
Here’s another neat hint. If you place your pointer over one of the colors,
the sample ad in the lower-left side of the screen temporarily changes to
that color. Move the pointer over a different color, and the color changes
again. Take it away, and the color reverts back to the original.
7. Just below the Color Picker, use the Select Corner Style drop-down
menu to specify how you want the corners of your ads to look: square,
slightly rounded, or very rounded.
These options only actually appear on your ad if you’re using a contrasting
border color. If you match your border to your background, you
have this option, but the corners will blend into the background like the
rest of the border.
8. Select the channel you want to use to track your ad and then click
Continue.
Remember that channels are categories that you create so you can keep
up with how specific ads perform.
9. On the next page, enter a new name for your ad (if desired) and then
click the Submit and Get Code button to generate the code for the ad.
10. Copy and paste the ad code generated into the HTML on your Web site.
These steps are okay for most situations, but I admit there’s one little problem
with using the Color Picker to determine colors for your ad elements: Your
color choices are somewhat limited. The palette that Google makes available
to you shows only about 60 colors out of the hundreds that a browser can display.
You’re not limited to those 60, though. You can further customize your
colors by entering the hexadecimal number for the color you want displayed.
What’s a hexadecimal?” you ask. I point you to the handy “Decoding hexadecimal
numbers” sidebar for the full scoop, but the short answer is that
hexadecimal numbers — the number/letter combinations you see to the left
of the Color Pickers — are part of a system for telling computer
monitors how to display certain colors. Every color has been assigned a
hexadecimal number, and if you enter that number into the appropriate box
, your ad element takes on that color.
You may be thinking to yourself that hexadecimals look like Greek to you and
you could never figure out what numbers correspond to what colors. The
thing is that you don’t have to keep all those number/color correspondences
in your head. The idea here is that you want the colors of your AdSense ads
to blend in with colors already found on your Web site — meaning that if you
can figure out the hexadecimal numbers of colors already on your Web site,
you can then plug those numbers into your AdSense wizard then have the wizard generate code for ads that match your Web
site colors to a T.
How does one determine the hexadecimal numbers of colors already on your
Web site? I’m glad you asked:
1. Point your Web browser to your very own Web page.
2. After your page loads, choose View➪Source from your browser’s
main menu.
Note that you may have to choose View➪Source Code or View➪Page
Source. Different Web browsers have different menus — the exact
phrase is determined by the browser that you’re using.
A new page appears, showing the source code for your Web site.
3. On this new page of source code, look for a line that starts something
like this:
style id=”’page-skin-1’” type=”’text/css’”><!– body
{background:#ffffff;margin:0;color:#333333;
font:x-small Georgia Serif;font-size:small;
font-size: small;text-align:
This is just the beginning of this line. If you actually copy and paste the
whole line into a blank document, you’ll see that it’s a large block of
code. This code tells you the style of your Web site. Notice that throughout
the code, there are different snippets that read
Color:#XXXXXX
Those numbers represent the hexadecimal numbers you’re looking for.
If you look closely at your style id code, you’ll find all kinds of tags for the
colors that are used in the design of your site. For example, in the code snippet
I highlight in the steps list before, the information
body {background:#ffffff;margin:0;color:#333333
tells you that in the body of the Web site, the background color is #ffffff
(which in this case is white), the margin of the body is zero — which means
there’s no margin), and the color of text is #333333 (which is a very dark
gray).
If you look through the formatting for the body (that’s the information you
copied from that one line of source code in the steps above), you’ll find the
colors that you need. Aside from the background and text colors, you also
need the color number for links (represented as a:link #XXXXXX). Simple
enough to come by.
Notice that I didn’t say you need the numbers for border colors and for URLs.
There’s a reason for that, which I expand on in the next couple sections.
First, what do you do with the color numbers when you have them? You use
them to help create ads that are a perfect match for your Web site.
Use the numbers you’ve collected to fill in the Title, Background, and Text
fields of your AdSense ad design page of the AdSense wizard. All you have to
do is delete the number that’s there — and key in the
numbers you’ve collected in the correct space. In the sample ad in the lowerleft
corner of the wizard screen, you should see the colors displayed after
you click away from the color box you’re editing.
The borders are open . . .
Borders are made to keep people out or sometimes to keep them in. Either
way, a border is like a fence. Even on paper, a border surrounds print and
pictures to keep everything cohesive. So, why in the world would you want to
(metaphorically, at least) fence in people by putting a border around your ads?
Borders scream, Hey, I’m over here. I’m an advertisement. Run! Really. I’m not
even trying to be funny. Borders make ads even more ad-like than the Ad by
Google logo that AdSense places on your ads — and you don’t want ad-like,
trust me.
The best option is to blend your ads into the background of your Web site.
That means using no borders at all. There’s one problem with that theory
though — there isn’t a No Borders option.
What you have to do instead is make the border color the same color as the
ad background. Your ad background is the same color as your Web page
background, right? If it’s not, it should be.
Remember the Golden Rule: Blend your ads into your Web pages so they look
like they belong there. That means blending the border and the background
of the ad with the background color of your Web site. Use the techniques
outlined in the previous section to determine the hexadecimal number of the
background color of your Web site and then use the AdSense wizard to set
your ad background and ad border to that color.
The easiest way to keep everything straight is to keep your Web site simple.
You’ll never go wrong with a white background and black text.
Camouflaging URLs
I want to move on to another topic as much as the next guy, but I need to
cover one more thing about ad placement. AdSense ads consist of three
zones: the title link, the text, and the URL. The title link is the title of the ad,
and it’s obvious that the text is the text of the ad. No rocket science here, so
we can safely pass them by. The URL is what I’m concerned with here.
The URL of the Web site that the ad belongs to can be a real problem. The
URL isn’t hyperlinked — made into a link that leads to the Web address
shown in the URL — because visitors are supposed to click the ad’s (linked)
title, not the ad’s URL. The thing is that having a URL that doesn’t transport
you to a new place on the Web when clicked can confuse a visitor, especially
if you’ve chosen not to make the (linked) title of the ad blue.
Visitors see the URL and may click it, expecting to actually go somewhere.
When they don’t go anywhere, that could alert them to the fact that they’re
about to click an ad. After visitors think about that fact, however briefly,
they’re less likely to mess with your ad at all by making those clicks.
For that reason, it’s best if the URL doesn’t in any way invite a site visitor
to click it — and the best way to stifle that click impulse is to make the URL
the same color as the text in the ad. It’s usually best to have ad text black, or
whatever color the surrounding text is.
My preference is to have the title linked and colored blue and have the URL
black. Site visitors (at least to my site) seem to like that configuration better,
and I have more success when I stylize my ads this way. Will that hold true
for you? Probably, but you can always switch things around and see.
The cool thing about AdSense is that it’s easy and costs nothing to tweak
your ads until you find the style that works best for your visitors. So, give it
a shot; change it up. Keep track of what you’re doing though so that when
you’re done testing, there’s no doubt what works best in each different area
of your Web site.

Using Multiple Ads

More dessert is a good thing. More money is a good thing. Sometimes, even
more people is a good thing. And guess what? More ads can be a good thing, too.
Wow. I’m channeling Martha Stewart. But unlike Ms. Stewart, I won’t get all
crafty on you, and I won’t tell you that multiple ads are a good thing, when
in fact, sometimes they’re not. I just want to convey that adding multiple ad
blocks to your Web pages can work well — if it’s done properly.
The appeal of multiples
Having multiple ads means more chances for site visitors to click your ads.
With that reasoning, many Web site owners who add AdSense to their pages
automatically put as many ads as they can on their Web site. Sometimes that
works for them; other times, it doesn’t.
When it does work, multiple ads may improve your AdSense revenue significantly
or maybe just a little. But what makes multiples work? In a word:
audience.
There are no hard and fast guidelines for what works and what doesn’t with
multiples. In every instance, it comes down to how your audience uses your
Web site and what kind of value they find in the ads that are displayed on
your page.
For example, I’ve played with a lot of different settings for the ads on my blog
in the process of putting this book together. One thing I did early on was to
increase the number of ads that were shown on my blog by tweaking the blog
template with code and by adding additional ad blocks using the widgets
provided by my blogging application provider, Blogger. (Widgets are like
mini-programs or additional capabilities within a program that you can add
or remove at will.)
Before those changes, I was generating a few dollars each day with my
AdSense ads. After the changes, the revenues dropped by a few cents each
day, and I even had a few days where I generated no income at all.
In my case, it seemed that adding more ads made visitors less likely to click
them. It may be the number of ads I chose to use, or it’s possible that I just
chose the wrong combination of ads. That’s what makes testing different
types, numbers, and configurations of ads so vitally important.
Using multiple ads — more than one ad unit per page — is usually a recommended
practice. Having multiples gives you the opportunity to catch your
site visitors in more than one location. It also allows you to include ads on
your site that may appeal to different audiences. For example, the site visitors
who are likely to click video ads may be a different set of visitors than
those who’ll click links or text ads. Figuring out the right configuration of
these ads just requires testing to see how your audience responds to each
type of ad.
Getting in the zone
In watching the revenue numbers for my site — in this case, the actual
earnings — I could see the results of the changes I made. Those results
reflected different zones that were successful for ads on my pages.
A zone is an area of your Web site that draws readers’ eyes. Most Web sites
have a header zone, a content zone, and a sidebar zone. Visitors focus on
each of those areas for a different reason.
The header zone is where visitors look to confirm what site they’re on. Later,
a visitor might look to the header zone to see if there are interesting or useful
links for them to follow.
The content zone is where visitors focus most of their attention. This is where
the main content of your site is found, and that’s what your visitors are looking
for. Content is first, links are secondary. Don’t get fooled, though. Links
may be secondary, but they’re still an important part of the site.
And that’s exactly why there’s also a sidebar zone. Sidebar zones are where
the cool stuff is usually found. Sidebars usually feature additional information
or links to other resources.
Multiple ads need to appear in one of these zones. Which zones, you ask?
I can’t tell you that. Try different configurations for all three zones to see
what works. Test, test, test. You know your visitors, and you can deduce
some facts about them and create theories for what will work. But until you
actually try a specific configuration, you’ll never know.
Avoiding overkill
One problem with using multiple ad blocks on your Web pages is that you
can quickly overdo it. A few ads can enhance the content on your page. Too
many make it look crowded and confusing. Visitors won’t know what to look
at first or which links to click.
If you have a blog service, you may be limited in the number of ads you can
show on a page for this very reason. Blogger, for example, limits publishers
to three instances of AdSense. You can place those three instances anywhere
on the page, but if you place more than three ads, something won’t show up.
So should you limit each of your pages to three or fewer ads? That depends on
your page and how well the ads integrate into the content and surrounding
elements of the page. Remember, the rule is still to make your ads as invisible
as possible. By making them invisible as ads, you’re making them visible as
content, meaning they’re more likely to attract the attention of visitors.
You don’t literally want to make your ads invisible. You could, too. Changing
the ads to make them blend completely into your background would certainly
do the trick. But then, how would visitors click the ads? No, the invisibility
superpower isn’t a good one to use in this instance. Just make your ads less
obviously ads.
Multiples don’t have to be identical
I’ve already alluded to this fact, but let me come right out and say it: Multiple
ads do not have to be identical. You can have one ad in your text and a different
kind of ad at the top of your page and another kind of ad in a sidebar, if
that’s what works for your Web site.
In fact, that combination — one in each zone — is probably the most successful
way to have multiple ad blocks on most pages. It won’t work with
every single Web site or even every single page on a Web site though.
When you’re configuring the ads for your site or blog, you may find that ads
work better on some pages and not others. That’s okay. If you have a page
where ads don’t perform well (or even at all), remove the ads from that page
and find a way to work in links to pages where ads do perform.
Play with the configuration of your ads. For my Google-Geek blog, what works
best are ads between the posts. In fact, ads at the top of the page and in the
sidebar don’t work at all — I’ve never been able to generate income from them.
Ads inside the posts also didn’t work for that blog, so I took them out. Ads
between the posts do work, though — but not all ads. A banner doesn’t perform
as well as link units do. It took a lot of testing for me to figure out these
facts about what ads work, where they work at, and how well they work.
When you’re testing your ads, be sure to try different configurations, but keep
in mind that you do have to keep track of what you’re trying and how well it
works. Keep a journal or a spreadsheet, or notes on a napkin if you have to.
But keep track of what you’re doing so that when it comes time, you can set
up your ads in a way that works best for you.
Also remember that with any kind of testing, what works today may fail you
tomorrow. Your site visitors may change, the topic of your site may expand
or narrow over time to suit your site visitors, and designs may get boring,
so you’ll need to re-do them. All I mean is that your ads might work really
well right now and not work at all two weeks from now or a year from now or
whatever timeframe you choose. It’s not that you’re doing anything wrong.
It’s just that things change. (You know the saying — there’s nothing constant
in this world except constant change.)
Testing isn’t a do-it-once-and-forget-it proposition. You do it again and again
and again, if necessary. Just remember, content gets stale, but so do ads.
AdSense helps with this because the ads that are shown on your page change
often. As your site matures, you may have to make more changes, so always
be watching your revenue levels to see when the tried-and-true ways start
becoming less effective.

Designing the Per fect Content Ad

Just in case you haven’t gotten this by now — AdSense success is all
about the ads. Ad design and ad placement are crucial when it comes to
AdSense, but the most important thing is that your ads don’t appear to be
ads — as counterintuitive as that may sound.
I know; it’s nearly impossible to completely remove the advertising element
from AdSense ads. No matter how well you integrate the ads into your content,
the Ads by Google label is still there. Even so, the more your ads look
like ads, the less likely it is that site visitors will bother to click them.
That means you should integrate your ads into your site content as well as
you possibly can. That’s accomplished by changing the style of the ad — the
text styles, colors, shapes, and borders — until the ads and your content flow
together as one.
“Easier said than done,” you might say, but here’s where this chapter comes
into play. Success with AdSense is all about knowing what works and what
doesn’t. By the end of this chapter, you’ll have a whole slew of tips and techniques
under your belt that you can use to make your AdSense strategy work
for you.

Ad Appeal

You’re smart, you know the score: For site visitors to even consider clicking your
ads, the ads have to be appealing. The way to make those ads appealing is
to integrate them into the content that’s situated around them. Fortunately,
AdSense gives you some good tools for matching your ads with the surrounding
content. Remember, though, that what you’re creating here is just the
container for the ad — its outside appearance. The actual ad text — or if the
ad includes pictures, the images — are designed by the advertiser.
Customizing ads to work on your Web site begins when you create your ads.
To create a new ad, simply log in to your AdSense account and then click
AdSense Setup. From that page, select the type of ad you want to create.
(If you need a refresher, the process of creating ads is covered in greater
detail in Chapter 5.) In this chapter, I walk you through setting up AdSense
for Content (in other words, a content ad) because it’s the type of ad that
you’ll use most often. The principles that follow, however, work when you’re
designing other types of ads, as well.
Text matching
Text ads need to be just as appealing as any other kind of ad. So, the natural
inclination might be to dress up your text ad by making the text all kinds of
pretty colors. Big mistake: Dressing up your text ads only makes them look
more like ads.
One of the reasons that text ads are so appealing — and certainly the main
reason they perform so well when compared to the other types of ads that
AdSense makes available — is because text ads can be made to blend well
into your Web page. Notice my use of can be here — they really only blend
well if they look like their surroundings.
Keep in mind that you can’t change the font styles for the ads that you build
with AdSense. You can, however, change the fonts on your Web site to help
blend your ads better. If there’s a significant difference between the fonts of
your ads and your Web site, that’s just what you’ll want to do.
Did I mention that making your ads appear to be part of your Web site is
essential? Well, it bears repeating over and over again because this one little
factor can completely change the success of your ads. Try to keep font styles
similar between your ads and the text on your Web site. They don’t have to be
an exact match. As great as that would be, it’s not always possible, especially
because Google has decided not to make the font it uses in their ads available
to normal mortals like us. (Okay, it kind of looks like several common fonts out
there, but any typographer — someone who designs typefaces or fonts — will
tell you that even subtle differences like spacing are very noticeable.)
Back to text design. What you do have control over with AdSense is the color
of the text that you use for your ads. When you’re creating an ad, you have
several preset options for color designs as well as the ability to create your
own palette of colors for your ads. The next section shows you how you can
put these options to good use.
Color or camouflage?
Google provides its AdSense users with a set of preset palettes offering what
Google considers your best design options for your ads. You call up these
palettes using the drop-down menu in the Style area as you’re creating your
ads. Be aware though, that the preset palettes may or may not work on your
pages — it really depends on the design of the page.
Here are the palettes that are available:
Default Google: This palette includes a white background, white border,
black text, blue title, and green URL.
Open Air: This palette is exactly the same as the Google default. I’m
not even sure why it’s included in the list, but it is. It’s a clone of the
default — absolutely nothing’s changed.
Seaside: In the Seaside palette, the only change involves the border.
Instead of having a white border, this palette includes a seafoam-colored
(yes, seafoam is actually a color) border.
Shadow: With this palette, the colors begin to get progressively more
noticeable. The title (which, by the way is also a link) is still blue, the
text of the ad is black, and the URL is green, but the border is black and
the background is pale blue. Drop this ad onto a white background, and
it screams advertisement.
Blue Mix: This ad style is significantly different from all the other styles.
A light blue border, white title, light blue text and URL, and dark blue
background make this one stand out. The only page that might be able
to pull this ad off is one that’s designed in exactly the same colors. I recommend
that you change your page if it’s built like this, unless you have
a very strong reason to leave it alone (like hundreds of thousands of visitors),
because it’s hard on the eyes.
Ink: The Ink style comes with a black background and border, and a
white title, text, and URL. In other words, it’s similar to the Blue Mix
style, but instead of being blue and white, this one is black and white. I
admit it’s a little easier on the eyes, but only for short periods of time.
Graphite: In my opinion, this is a boring ad style because it’s gray. Yuck. But
on the right Web site, the black title, dark gray text, light gray URL, and pale
gray background and border might work. I don’t think I’ve ever encountered
a Web site it would work on, but stranger things have happened.
These styles are the ones that Google’s created. Although Google says they’re
the most effective ad styles, people who really are making great money with
AdSense will tell you that the defaults aren’t usually your best option. That’s
okay though because Google gives you decent customization features for
designing ads that are good options.
Tweaking the wizard
I cover the AdSense wizard in some detail in Chapter 5, but there I’m more
interested in showing you how to generate the HTML you need to insert a
default AdSense ad in your Web site. Now I want to show you how you can
stray a bit from the beaten path so that you can come up with stuff other
than the default settings.
As you might expect, you start out with the very same wizard I show you in
Chapter 5. Here’s how you call it up:
1. Point your browser to http://www.adsense.com and log on to your AdSense
account.
2. Click the AdSense Setup tab.
3. Select AdSense for Content.
4. In the new screen that appears, choose the type of ad you want
to create — Ad Unit, Text only, in this case — and then click the
Continue button.
5. In the Colors section of the screen, choose one of the pre-designed
color palettes from the drop-down menu on the right.
The Default Google palette is just as easy to work with as any other, but
if you prefer one of the others over the default, that’s okay.
All the colors that you can alter in the palette are shown below the palette
name, . Note that each color has a number to
the left of it. This is the hexadecimal number that represents the color
to Web browsers. (See the sidebar, “Decoding hexadecimal numbers,”
for more on hexadecimal numbers.)
6. Use the Color Picker to the right of each ad element — Border, Title,
Background, Text, and URL — to choose a new color for an element.
, when you click the Color Picker the nice colored
square — a color palette opens from which you can choose other colors.
Note that after you make the change, the sample ad in the lower-left
corner of the wizard screen changes to reflect the new color.
Play with your Color Picker just a little so you can get a feel for how wild
you can make your ads. I don’t recommend making them wild for actual
use, though. My strong advice to you will always be the simpler, the
better. It’s still kind of neat though to see how you can change your ads
just by changing the color of different elements of the ad.
Here’s another neat hint. If you place your pointer over one of the colors,
the sample ad in the lower-left side of the screen temporarily changes to
that color. Move the pointer over a different color, and the color changes
again. Take it away, and the color reverts back to the original.
7. Just below the Color Picker, use the Select Corner Style drop-down
menu to specify how you want the corners of your ads to look: square,
slightly rounded, or very rounded.
These options only actually appear on your ad if you’re using a contrasting
border color. If you match your border to your background, you
have this option, but the corners will blend into the background like the
rest of the border.
8. Select the channel you want to use to track your ad and then click
Continue.
Remember that channels are categories that you create so you can keep
up with how specific ads perform.
9. On the next page, enter a new name for your ad (if desired) and then
click the Submit and Get Code button to generate the code for the ad.
10. Copy and paste the ad code generated into the HTML on your Web site.
These steps are okay for most situations, but I admit there’s one little problem
with using the Color Picker to determine colors for your ad elements: Your
color choices are somewhat limited. The palette that Google makes available
to you shows only about 60 colors out of the hundreds that a browser can display.
You’re not limited to those 60, though. You can further customize your
colors by entering the hexadecimal number for the color you want displayed.
“What’s a hexadecimal?” you ask. I point you to the handy “Decoding hexadecimal
numbers” sidebar for the full scoop, but the short answer is that
hexadecimal numbers — the number/letter combinations you see to the left
of the Color Pickers in Figure 7-2 — are part of a system for telling computer
monitors how to display certain colors. Every color has been assigned a
hexadecimal number, and if you enter that number into the appropriate box
in Figure 7-2, your ad element takes on that color.
You may be thinking to yourself that hexadecimals look like Greek to you and
you could never figure out what numbers correspond to what colors. The
thing is that you don’t have to keep all those number/color correspondences
in your head. The idea here is that you want the colors of your AdSense ads
to blend in with colors already found on your Web site — meaning that if you
can figure out the hexadecimal numbers of colors already on your Web site,
you can then plug those numbers into your AdSense wizard (refer to Figure
7-2) and then have the wizard generate code for ads that match your Web
site colors to a T.
Decoding hexadecimal numbers
Hexadecimal has its roots in both the Latin and
Greek languages. Hex is a Greek term meaning
six and decimal is a Latin term meaning tenth.
Literally translated, hexadecimal could mean
either six to the tenth or six times ten. Either
translation is correct because hexadecimal is
a computer term used to mean grouped by 16
or base 60.
If all that math stuff really interests you, I invite
you to google hexadecimal to your heart’s
content and read all the complicated theory
behind hex and deci. I cut to the chase and let
you know that hexadecimal numbers are used
to specify the amount of red, green, and blue
present in a color.
I’m sure your 2nd-grade art teacher told you
that all colors could be broken down into the
component parts of red, green, and blue. This
insight is what drove computer-types into using
the RGB/hexadecimal number model to represent
colors using the following shortcut:
#RRGGBB
where RR tells your Web browser how much
red to use, GG tells how much green to use, and
BB tells how much blue.
So, to get that nice seafoam-colored border you
see in Figure 7-2 (oops, I forgot — black-andwhite
illustrations don’t show color . . . trust me,
it’s a nice, foamy shade of blue) you’d use the
following hexadecimal number:
#336699
For a computer to read this hexadecimal
number as a color, the number sign (#) must be
displayed immediately before the color code.
Without the number sign, the hexadecimal
code looks just like any other number, and with
other symbols in front of the six-digit number,
the code is read as a different type of indicator
because hexadecimal code is used extensively
in programming.
None of that really concerns you, though. What
you really need to understand here is that hexadecimal
numbers can be used by AdSense to
help build ads that match your Web site perfectly.
You may have to do a little experimenting
or investigating to find the exact hexadecimal
numbers that you need, but after you do, the
results are perfectly rendered ads that look as
if they belong on your Web site.
How does one determine the hexadecimal numbers of colors already on your
Web site? I’m glad you asked:
1. Point your Web browser to your very own Web page.
2. After your page loads, choose View➪Source from your browser’s
main menu.
Note that you may have to choose View➪Source Code or View➪Page
Source. Different Web browsers have different menus — the exact
phrase is determined by the browser that you’re using.
A new page appears, showing the source code for your Web site.
3. On this new page of source code, look for a line that starts something
like this:
style id=’page-skin-1’ type=’text/css’>!– body
{background:#ffffff;margin:0;color:#333333;
font:x-small Georgia Serif;font-size:small;
font-size: small;text-align:
This is just the beginning of this line. If you actually copy and paste the
whole line into a blank document, you’ll see that it’s a large block of
code. This code tells you the style of your Web site. Notice that throughout
the code, there are different snippets that read
Color:#XXXXXX
Those numbers represent the hexadecimal numbers you’re looking for.
If you look closely at your style id code, you’ll find all kinds of tags for the
colors that are used in the design of your site. For example, in the code snippet
I highlight in the steps list before, the information
body {background:#ffffff;margin:0;color:#333333
tells you that in the body of the Web site, the background color is #ffffff
(which in this case is white), the margin of the body is zero — which means
there’s no margin), and the color of text is #333333 (which is a very dark
gray).
If you look through the formatting for the body (that’s the information you
copied from that one line of source code in the steps above), you’ll find the
colors that you need. Aside from the background and text colors, you also
need the color number for links (represented as a:link #XXXXXX). Simple
enough to come by.
Notice that I didn’t say you need the numbers for border colors and for URLs.
There’s a reason for that, which I expand on in the next couple sections.
First, what do you do with the color numbers when you have them? You use
them to help create ads that are a perfect match for your Web site.
Use the numbers you’ve collected to fill in the Title, Background, and Text
fields of your AdSense ad design page of the AdSense wizard. All you have to
do is delete the number that’s there — refer to Figure 7-2 — and key in the
numbers you’ve collected in the correct space. In the sample ad in the lowerleft
corner of the wizard screen, you should see the colors displayed after
you click away from the color box you’re editing.
What’s in a color?
Surf the Internet for a while and you’ll soon
notice that nearly every Web page uses blue as
the color for its hyperlinks. Why is that?
Answering that question requires a little background
history. When the Internet first came into
being, there was little you could do about page
displays. The screens (or monitors) on which the
pages were displayed were monochrome —
basically black and green. Then color monitors
came along, but the number of colors that could
be displayed was limited.
If you wanted someone to know there was link
on your Web site that led to another Web site,
you had to do something that would alert the
visitor to the link; thus the advent of blue links.
Color limitation made it difficult to read text that
wasn’t black or blue, and because black was
the color of most text, blue became the choice
for links.
It didn’t take technology long to mature to the
point we’re at now, with technological capabilities
that allow us to generate thousands of
amazing colors on a screen. There’s one small
glitch though — Internet users have become
accustomed to seeing links in blue, so often, if
a link is another color, they don’t recognize it.
Fascinating, I know, but there’s a point to all
this. When you’re designing your Web site, the
most effective method of alerting users to links
in your text is to make them blue. Now, your
navigational links (on the left side or top of the
page) don’t necessarily have to be blue. They
can blend with your page design, but text links
should always be blue. That means that it’s also
a good idea to use blue for the links on AdSense
ads that are integrated into your text. The color
blue makes them more clickable and helps site
visitors to see there’s something interesting
behind those words.
The borders are open . . .
Borders are made to keep people out or sometimes to keep them in. Either
way, a border is like a fence. Even on paper, a border surrounds print and
pictures to keep everything cohesive. So, why in the world would you want to
(metaphorically, at least) fence in people by putting a border around your ads?
Borders scream, Hey, I’m over here. I’m an advertisement. Run! Really. I’m not
even trying to be funny. Borders make ads even more ad-like than the Ad by
Google logo that AdSense places on your ads — and you don’t want ad-like,
trust me.
The best option is to blend your ads into the background of your Web site.
That means using no borders at all. There’s one problem with that theory
though — there isn’t a No Borders option.
What you have to do instead is make the border color the same color as the
ad background. Your ad background is the same color as your Web page
background, right? If it’s not, it should be.
Remember the Golden Rule: Blend your ads into your Web pages so they look
like they belong there. That means blending the border and the background
of the ad with the background color of your Web site. Use the techniques
outlined in the previous section to determine the hexadecimal number of the
background color of your Web site and then use the AdSense wizard to set
your ad background and ad border to that color.
The easiest way to keep everything straight is to keep your Web site simple.
You’ll never go wrong with a white background and black text.
Camouflaging URLs
I want to move on to another topic as much as the next guy, but I need to
cover one more thing about ad placement. AdSense ads consist of three
zones: the title link, the text, and the URL. The title link is the title of the ad,
and it’s obvious that the text is the text of the ad. No rocket science here, so
we can safely pass them by. The URL is what I’m concerned with here.
The URL of the Web site that the ad belongs to can be a real problem. The
URL isn’t hyperlinked — made into a link that leads to the Web address
shown in the URL — because visitors are supposed to click the ad’s (linked)
title, not the ad’s URL. The thing is that having a URL that doesn’t transport
you to a new place on the Web when clicked can confuse a visitor, especially
if you’ve chosen not to make the (linked) title of the ad blue.
Visitors see the URL and may click it, expecting to actually go somewhere.
When they don’t go anywhere, that could alert them to the fact that they’re
about to click an ad. After visitors think about that fact, however briefly,
they’re less likely to mess with your ad at all by making those clicks.
For that reason, it’s best if the URL doesn’t in any way invite a site visitor
to click it — and the best way to stifle that click impulse is to make the URL
the same color as the text in the ad. It’s usually best to have ad text black, or
whatever color the surrounding text is.
My preference is to have the title linked and colored blue and have the URL
black. Site visitors (at least to my site) seem to like that configuration better,
and I have more success when I stylize my ads this way. Will that hold true
for you? Probably, but you can always switch things around and see.
The cool thing about AdSense is that it’s easy and costs nothing to tweak
your ads until you find the style that works best for your visitors. So, give it
a shot; change it up. Keep track of what you’re doing though so that when
you’re done testing, there’s no doubt what works best in each different area
of your Web site.