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.

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

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

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

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

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

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.

Figure 8.8. The wrong place to paste the code.

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

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

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

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