Putting It into Practice

Well, I can't wait to put all this into practice!" said Claude. He did seem pretty excited. "I should be able to get ads up on my pages in no time. I think I'll go for the standard vertical ones-I left some room for those already. But those ad links also look interesting. Maybe I'll throw them into a corner of the page…."

"I'm not sure I'm going to do anything different from what I'm already doing," said Stef. "Except maybe put in some channels-it'd be nice to know which of my pages are making me money. I have such a variety of topics in my blog. Do channels work with blogs, too?"

"Sure, URL channels can work quite well," I said. "It really depends on how your blogging software stores the entries. Just remember to define the channels based on the permanent pages-the permalink ones-and not the blog's main page."

I looked at my watch. "Look how late it is again!" I said. "I think we should wrap it up for now, but we need at least one more session to address Stef's concern about your site, Claude-getting it to show up in the index. And consequently getting some traffic to the site. It's a bit of a black art, but it's an interesting topic."

Tips and Tricks

Stef looked closely at the search-results page. "But it says that the search didn't match any documents," Stef asked. "Why not? Every page on his site should match that search phrase-it's a site about voice-over-IP, after all."

"That's because his site's not in Google's search index yet," I said. "We'll have to fix that, but let's leave that for our next session. Instead, I'd like to give you some tips and tricks about using AdSense on your Web pages."

Only Put Ads on Finished Pages

AdSense is notified whenever AdSense code runs on a page. If AdSense has never seen a page before, it dispatches the AdSense Web crawler to fetch and analyze the page's content. If the page is unfinished, the crawler may not accurately determine the page's topic, though it can infer things based on its analysis of other pages on the same site. Worse still, if the page is full of dummy or otherwise off-topic content, the crawler may get the topic completely wrong.

The moral of this story? Don't put ads on unfinished pages.

Rename Pages to Solve Ad Problems

What if you have a page and the ads aren't relevant because you had poor or empty content on the page when the crawler first came along? While the initial crawling occurs pretty quickly, it may be days or weeks before the AdSense crawler revisits a page and notices that the content is different. In the meantime, you're stuck with irrelevant ads.

The solution is to move the content to another Web page entirely. Make sure the new page is named properly and that its content is correct. Keep the old page around, but have it redirect browsers to the new page. A redirect tells the browser that the page has "moved" to a new Web address. Here's a very simple Web page that redirects the browser to another page:

This page has moved to newpage.html.

 

The redirection is actually done by the meta tag. The body of the HTML page is there in case the user's browser doesn't automatically follow redirects and has a direct link to the new page as well.

Redirection can also be done automatically by the Web server. Talk to your hosting service provider about how to do this.

Move Ads Above the Fold

Ads that are not shown "above the fold" (in the top part of the page) won't be seen by visitors unless and until they scroll the page. Placing a single ad unit at the bottom of the page will not generate much revenue. Unless you're using multiple ad units, keep the ads above the fold as much as possible.

Avoid Empty Ad Units

When using multiple ad units on a page, be sure to specify alternate ads or colors for the second and/or third units. The less popular topics don't always have enough ads available to fill two or three units. An empty ad unit is worse than a partially filled one, so always specify a background color or an alternate ad to display in its place. This is a good strategy with all your ad units, in fact, even if they're the only ones on the page.

Don't Use Too Many Ads

The presence of too many ads on a page detracts from the page content and may cause visitors to ignore the page entirely, especially if they're looking for objective sources of information. This is particularly a problem if the page is being forced out of its natural shape in order to display as many ads as possible.

Ad Unit Order Matters

The order in which ad units are declared in the underlying HTML determines the order that AdSense uses to fill them. The primary ad unit is the first one declared in your HTML. You want it to be located in the most effective spot on your page, because it's the one that AdSense always fills first and that you expect to always show at least one ad. If you're not careful, the primary ad unit might end up in an ineffective position on your page.

The position of a text ad depends on how much the advertiser is willing to pay when someone clicks it. The ads in the first ad unit-the topmost ads in towers and rectangles and the leftmost ads in banners-pay you more than the other ads, and those in the last ad unit (at the bottom or the extreme right) pay the least.

Use Channels to Track Performance

Channels allow you to see which pages are generating revenue and which aren't. For a small site of less than 100 pages, you can use individual channels (URL channels are simplest) to track performance at the page level. Beyond that, you'll need to group pages together for tracking, probably using custom channels. Once you know which pages are working best, try to figure out why they are and how you can extend that success to other pages.

Don't Put Ads on Private Pages

You can easily create private Web pages on your site that are accessible only by password. There's no point in putting ads on private pages, because the AdSense crawler can read only public pages that anyone can access.

Adding Search Code

"Speaking of search," Stef said, "how do you add a Google search box to a page?"

"It's just as easy as adding the ads," I said. "You go to the Search Settings tab and then the Search code page." I logged back into the AdSense console and went to the Search code page (Figure 8.33). "As you can see, it's similar to the Ad layout code page we just saw."

Figure 8.33. Part of the Search code page.

[View full size image]

"There seem to be more options," Stef said.

"There are," I agreed, "because the search box must be customized for your site. You have to tell it what language to use for searching and which Google search engine to use, among other things."

"I thought there was only one Google search engine?" Claude asked.

¿Se habla Google?

Search specific languages and countries in Google from www.google.com/language_tools.

"Google actually runs country-specific search sites like www.google.ca or www.google.fr," I explained. "The search engine technology is the same, but the country-specific search sites rank sites differently."

"The 'Select a search box' section looks pretty complicated," Anita suggested.

"It's not that bad," I assured her. "Basically, you're telling Google how the search box should look and what domains it should search. Besides doing a general Web search, the search box can restrict itself to searching just your own site." I clicked on the Google SiteSearch radio button (Figure 8.34). "See how you can enter a domain name? Let's create a search box to search Claude's site."

Figure 8.34. Creating a site-specific search box.

[View full size image]

"All we do now is select a style palette for the results window," I continued. "Basically, this controls the look of the search-results window-the window you get after clicking the search box's Search button. You can tailor the window to match your own site's color scheme and even include a logo. You use the Styles page to manage the style palettes, but we'll just use one of the predefined ones for this example. There. Now you do just like before with the ads-you select the code at the bottom, copy it to the clipboard, and paste it into a Web page."

After copying the code, I used Nvu to create a new page and pasted the code into the page body. After publishing the page to Claude's site, I loaded it into the browser (Figure 8.35).

Figure 8.35. The finished search box.

[View full size image]

"There's the search box," I said. "It works immediately." I typed the phrase "voip" into the box and clicked the Search button. A search-results page was displayed (Figure 8.36).

Figure 8.36. The search-results page.

[View full size image]

"So I'll make money if someone clicks on those ads?" Claude asked.

"Just like you would with ads on your site, yes," I said. "And the same warning applies: Don't click the ads yourself!"

Placing the Ads

"Wow," said Anita, "there are a lot of ad formats to choose from. I count, what, eleven of them?"

"So far, yes," I said. "When I first started using AdSense, there were only four. And the ad links are much more recent additions. Definitely lots to choose from."

"Do they all get used?" Stef asked. "All the blogs I've seen with ads put them on the side, like I did."

"I think they all get used, yes," I answered, "but I think certain formats are much more popular than others. Certainly the tower formats-especially the original skyscraper layout-are popular. They fit naturally on the left or right side of a page. Of course, the banners work well at the top or bottom of the page, in the header or footer."

"The button format would work well in a corner," Anita said.

"And the others can be inserted right into the middle of your content," I said.

"Is that a good idea?" Claude asked. "Doesn't it interfere with the flow of the text?"

"I see it all the time on some sites," Anita said. "Not necessarily AdSense ads, but other kinds of ads. Sometimes they do interfere."

"You have to strike a balance," I said. "You want the ads noticed, otherwise nobody will click on them. That's why many sites use contrasting colors for the ads. But if you have a page full of ads and very little content, your visitors won't be happy and they're just as likely to leave by hitting the browser's Back button."

"How many ads should you place on the page, then?" Anita asked.

"I know!" Claude said. "Put them in the header and the footer and on each side. That won't interfere with the reading."

"You can't, Claude," I told him, "because Google limits you to using no more than three ad or ad links units per page. You also can't place ads on certain pages, like pages that have no real content. Error pages, such as the 'page not found' errors you get when you mistype a page address, have no real content, for example."

"I think a page surrounded by ads would be ugly anyhow, Dad," Anita said. "And there'd be no room for anything else!"

"All right, but how do you put multiple units on a single page?" Claude asked.

"You just copy the generated code into two or three different spots on the page," I said. "It's not a big deal."

"Can we see sample ad placements?" Anita asked.

"Yes," I said, "there are two ways to do that. Google has some samples up on its site, available from www.google.com/adsense/adformats. However, if you want to see actual examples on real Web sites, there's a trick you can do with Google." I pointed to the generated code in the browser window. "If you look in the generated code, you'll see a line that starts with 'google_ad_format,' followed by a value in quotes. That's the internal name that AdSense uses for the ad format you've chosen. Just search for that string using Google and you'll get a list of sites that are displaying those kinds of ads."

"Ah! That's because the code is in the Web pages and Google indexes them, too!" Stef said.

"Right," I agreed. "And if you ever find a site that looks really good and you want to see how they're doing it, use the View source or Page source option on your browser to see the raw HTML for the page." I browsed to my personal site and showed them the source HTML of the home page (Figure 8.32).

Figure 8.32. Viewing the HTML of a Web page from within the browser.

[View full size image]

Tweaking the Code

After the break, I took control of the computer. "As you just saw, publishing ads on your site is actually very simple," I began. "And the basics never change: Set the options you want, copy the generated code to the clipboard, paste the code into your Web pages. All we're going to do now is tweak the code."

"What do you mean?" Claude asked.

"I mean, I'm going to change some of the options on the Ad layout code page," I said, "and see how it affects the code and the ads that are displayed."

"So every time you want to make a change," Anita asked, "you have to go and repaste the code into all your pages?"

"Yes," I admitted, "unless your Web server supports some kind of template feature the way blogs do. This is usually called server-side includes, and it lets you place the AdSense code in a separate file and have it included automatically in all your Web pages."

"Like the style sheet," Stef said.

"Yes, the same idea," I agreed. "But how it's done really depends on what Web server you're using-you need to talk to your hosting service provider to get the details. The end result is the same, but whenever you want to update the AdSense code, you just change one file on your site instead of changing each Web page."

"So let's see you do some tweaking," Claude said.

"OK, we'll go through each section of the Ad layout code page, starting at the top."

Ad Type

You specify what kind of ad you want to use with the Ad type section (Figure 8.12). There are two basic types of ads to choose:

• Ad units, for conventional text or image ads

• Ad links units, for links to a page of text ads

Figure 8.12. Selecting the ad type.

[View full size image]

The standard ad unit can display either text or image ads or both (though images can be displayed only in certain ad formats), so you must indicate which kinds of ads to display.

If you're using an ad link unit, select how many links you want displayed in each unit.

Ad Layout

The Ad layout section selects the ad format (Figure 8.13). The available formats vary depending on the ad type. Standard ad units support the formats pictured in Figures 8.14 to 8.24.

Figure 8.13. Selecting the ad format.

[View full size image]

Figure 8.14. The leaderboard (728 x 90) format.

[View full size image]

Figure 8.24. The large rectangle (336 x 280) format.

Figure 8.15. The banner (468 x 60) format.

Figure 8.16. The half banner (234 x 60) format.

Figure 8.17. The button (125 x 125) format.

Figure 8.18. The skyscraper (120 x 600) format.

Figure 8.19. The wide skyscraper (160 x 600) format.

Figure 8.20. The vertical banner (120 x 240) format.

Figure 8.21. The small rectangle (180 x 150) format.

New Ad Formats

New ad formats are added from time to time, so check www.memwg.com/ad-formats for updates.

Figure 8.22. The square (250 x 250) format.

Figure 8.23. The medium rectangle (300 x 250) format.

As you can see, there's a wide variety of ad unit formats to choose from.

Ad links units support four formats: 120 x 90, 160 x 90, 180 x 90, and 200 x 90. A four-line 120 x 90 format is shown in Figure 8.25, and the same size but with five lines is shown in Figure 8.26.

Figure 8.25. A four-line ad links unit.

Figure 8.26. A five-line ad links unit.

Color Palette

The Color palettes section selects the colors used by the text ads from a set of predefined and custom color schemes (Figure 8.27). All palette management (creating, editing, or deleting custom palettes) is done from the Ad colors page.

Figure 8.27. Selecting the color palette.

[View full size image]

Alternate Ad

If you want to avoid displaying PSAs (public service ads), you can use the Alternate ad URL or color section to specify an alternate ad, image, or color (Figure 8.28) which will take their place on the page. For ads or images, enter the Web address and click the Update code button. For example, if Claude were using a banner (468 x 60) format he could avoid PSAs by creating an identically sized image for his Web site and setting the alternate ad URL as follows:

http://www.voip-at-home.com/images/alternate_ad_468_60.gif

Figure 8.28. Specifying an alternate ad.

[View full size image]

Alternate Ads

For more advanced alternate ad and PSA-avoidance techniques, see www.memwg.com/alternate-ads.

Whenever a PSA would otherwise be displayed, the AdSense code would simply display this image. You can even embed small Web pages with links and images or display ads from another (non- competing) ad service.

If you don't have an alternate ad or image, you can still avoid PSAs by clicking the "Choose a color" link and selecting an appropriate background color from the resulting pop-up window (Figure 8.29). Don't forget to click the Update code button after dismissing the pop-up window. The AdSense code is updated to fill the area of the ad unit with the background color you chose whenever PSAs would otherwise be displayed.

Figure 8.29. Choosing an alternate color.

[View full size image]

Channel

More on Frames

Frames aren't used much these days, having been largely replaced by CSS and SSI, so for more information see www.memwg.com/frames.

The Channel section assigns a custom channel to the AdSense code (Figure 8.30). All pages that include the code will have their impressions and clicks recorded under the selected channel.

Figure 8.30. Selecting a custom channel.

[View full size image]

Note that this section of the layout code page deals only with custom channels, since URL channels are defined without changing the AdSense code.

Framing

Finally, the Framed pages section (Figure 8.31) tells AdSense that you're using frames. This is an advanced way to split a Web page into multiple parts (the frames), each of which displays another Web page. If frames are used, the AdSense code needs to change slightly to find the correct content; hence the need for this section.

Figure 8.31. Specifying that frames are used.

[View full size image]

The Code

The Your AdSense code section is where the management console places the generated AdSense code. Don't modify this code; Google checks sites at random to see if the generated code is intact. Once you're done tweaking the options, copy the code to the clipboard and paste it into your Web pages.

The code isn't stored anywhere in the console or on Google's pages (although it is stored on your own pages once you've pasted it in). If you close the console page and you need to regenerate the code at a future point (for instance, if you want to change your ad layout), you'll have to reset all the code layout options. It would be prudent to write down important settings for the future.

Adding the Code

It really wasn't a big deal to do," Stef said. "Blogger's instructions were easy to follow. First you log in to your AdSense account and go to the Ad layout code page." Since we were still logged in to my account, Stef merely clicked on the Ad Settings tab to bring up the Ad layout code page (Figure 8.1). "As you can see, this is a long page with many options. The options don't all fit in the window-you have to scroll down to see them, like this." Stef revealed the rest of the page (Figure 8.2).

Figure 8.1. The top of the Ad layout code page.

[View full size image]

Figure 8.2. The bottom of the Ad layout code page.

[View full size image]

"It looks a bit intimidating when you see it all," Anita said.

Ad Pixels

The dimensions of the ads refer to the ad's width and height in pixels. Many Web pages are designed to be 800 pixels wide by 600 pixels high, so a 120-by-600 vertical banner runs the whole height of a typical site.

"I thought so, too," Stef continued, "but it's not that bad. All you really have to do to get started is choose the ad format-what they call an ad layout-and a color scheme-which they call a color palette. I chose one of the skyscraper layouts because I was putting the ads in the blog sidebar. So let's do that now, too." Stef chose the 120 x 600 Skyscraper format from the drop-down list of ad layouts (Figure 8.3).

Figure 8.3. Choosing an ad layout.

[View full size image]

"The 120 by 600 refers to the size of the ads?" Anita asked.

"Yes, the width and the height of the entire ad block, in that order," Stef answered. "You have to choose the format that fits your page layout, of course. Then I chose the color scheme, one that looked good with my blog's color scheme. I wasn't sure if I should make the ads stand out or not, so I chose something complementary."

"Let's pretend you're working with a light blue background for this, Stef," I said. "What scheme would you choose?"

Stef scrolled through the list of colors. "Hmm…if I wanted the ads to blend in, I could choose this one," she said, selecting Melancholy Blue from the list (Figure 8.4).

Figure 8.4. Choosing a color palette.

[View full size image]

"Hey, the sample ad changed colors!" Claude noticed.

"Or I could choose one that really contrasts with the background," Stef continued, clicking on each color palette in the list. "Looks like I'll have to create my own color scheme," she said as she clicked the "Manage color palettes" link. "You do that on the Ad colors page." Stef had temporarily left the Ad layout page in order to create her new color scheme (Figure 8.5). "I had to create my own palette because I didn't really like Google's color schemes."

Figure 8.5. Creating a custom color palette.

[View full size image]

"They're not very bold for the most part," I agreed.

"And I can be pretty bold sometimes," Stef continued. "So let's create a bright yellow ad with a nice black border….There we go! I'll call it Startling Yellow and save it." Stef clicked the button marked "Save and get code," which returned her to the Ad layout code page. "Now I choose my new custom palette and scroll to the bottom of the page. There's the code to display the ads." Stef clicked in the box labeled "Your AdSense code" to automatically select the code (Figure 8.6).

Figure 8.6. Selecting and copying the AdSense code to the clipboard.

[View full size image]

After copying the code to the clipboard, Stef turned to me. "Do you want me to go to Blogger and show how to add the code to a blog?" she asked.

"No, let's just use a simple Web page," I said. "Start up Nvu and create a page with a light blue background and some text."

"OK," she said, quickly creating a new page called simple.html (Figure 8.7). "So I guess now I can paste the code…oops, that doesn't seem to work!" The code was now showing on the page (Figure 8.8). "Better undo that…."

Figure 8.7. Creating a simple page.

[View full size image]

Figure 8.8. The wrong place to paste the code.

[View full size image]

"Switch to the Source view and paste the code there," I suggested.

"Right!" Stef exclaimed. "That makes sense-that's what I did with my blog. I had to go paste the code between the body tags. I'll add the code to the end of the body." Switching to the Source view, she repasted the code (Figure 8.9).

Figure 8.9. Pasting the code into the Source view.

[View full size image]

"There!" she said. "Now let's preview the page…. Nothing! Where are the ads? The ads on my blog showed up right away!"

"That's because Nvu skips over the JavaScript code," I explained. "Save the file and hit the Browse button instead." She did, and a new browser window opened (Figure 8.10).

Figure 8.10. Testing the ad code.

[View full size image]

"There they are!" said Anita excitedly.

"AdSense is showing an ad for voice-over-IP," Claude said. "How did it figure that out?"

"The code looks at the page's address and sends it along to Google's servers," I said. "Stef saved the file in the same folder we used before: VoIP-at-home. Look at the address bar in the browser."

JavaScript

The JavaScript programming language was designed for adding advanced features, such as interactive games, to Web sites. JSMadeEasy.com (www.jsmadeeasy.com/) is a good source for basic JavaScript tutorials and ready-made scripts. See also the list at www.memwg.com/javascript/.

"And that's how it matched a VoIP ad to the page-clever!" said Claude.

"But most of the time you're not going to see any ads until you place the page up on your Web server," I continued. "Or you may see PSAs."

"What are those again?" Claude asked.

"Public service announcements-ads for charitable causes," I answered. "But you can disable those if you want from the code layout page."

"That page doesn't look very good," Stef said. "I should have used a banner ad instead."

"Oh, I know how to fix that," said Anita. "Can I have the keyboard, Stef? Thanks." Typing quickly, she inserted a table definition right into the HTML code.

"I see you've been practicing!" I said.

"You wouldn't believe how much time I've spent trying to get the layout of my site just right," Anita said. "I learned a few things doing it. This may not be the best way to do it, but if you use a single-row table and place the content in the left cell and the ads in the right cell, you get a two-column effect like this." She saved her changes and reloaded the page (Figure 8.11).

Figure 8.11. Changing the page layout.

[View full size image]

Using Tables

An interesting discussion of when and why to use tables, even in a CSS page, can be found at www.memwg.com/using-tables/.

"Oh, I believe you," I told her. "A good layout can be hard to do. I've often resorted to tables myself. Purists don't like it, but you want your site to look good. Although I must point out that you can do the column effect you want with style sheets. In any case, once the code's pasted into the page, you just place the modified page up on your Web site and load it once into your browser. Shortly after, AdSense will crawl the page to analyze its content-if you don't see relevant ads right away, you'll see them within an hour or so."

"It was very cool," Stef said. "And I had to stop myself from clicking some of the ads."

"That's right, and it bears repeating: Don't click the ads on your site no matter what," I said. "Otherwise, Google may think you're performing click fraud and they could kick you out of the program."

SSI

Server Side Includes (SSI) techniques are covered in more detail at www.memwg.com/server-side-includes.

I stood up. "OK, let's take a quick break," I said, "and then we'll look at the Ad layout code page in more detail."

Publishing Ads on Your Site

Chapter eight. Publishing Ads on Your Site > Claude: This is the part where it gets exciting. It seems like I've waited forever to get to this stage. > Eric: If you were an experienced Web site developer, AdSense ads would be simple to add to your site. Really, they're simple to add no matter what your experience level. The hard part is figuring out what ad formats to use and where to place them on your Web pages. > Stef: And you can help there, right? > Eric: I can help a bit, sure, but ultimately it's up to you to figure out what works best for your site and your audi ence. It may take you a while and some experimentation to do it. "This is the part where it gets exciting," Claude said. "It seems like I've waited forever to get to this stage." "That's because you had to learn a lot of new stuff, Dad," said Anita. "We all had to. We had to crawl before we could run." "That's right," I told Claude, "and if you were an experienced Web site developer, AdSense ads would be simple to add to your site. Really, they're simple to add no matter what your experience level. There's no mystery to becoming an AdSense publisher. The hard part is figuring out what ad formats to use and where to place them on your Web pages." "And you can help there, right?" Stef asked. "The ads were easy to put on my blog, but I didn't do any experimenting. I just followed the instructions that Blogger gave me." "I can help a bit, sure," I said, "but ultimately it's up to you to figure out what works best for your site and your audience. It may take you a while and some experimentation to do it." Claude was eager to get going. "I don't know if I can run yet," he said, "but I'm certainly willing to walk." I turned to Stef. "Let's start with you again, Stef," I said. "Why don't you show us what you did to publish ads on your blog?"