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 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.