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 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’">