Make Easy Money with Google: Using the AdSense Advertising Program By Eric Giguère ............................................... Publisher: Peachpit Press Pub Date: June 13, 2005 ISBN: 0-321-32114-6 Pages: 272

 

Get your Web site to "show you the money" by using Google to draw more eyes--and wallets--to your content. In this friendly, four-color guide from veteran author and Web developer Eric Giguere, you'll learn all about Google's AdSense program and how you can use it to make your Web site or blog more profitable. Written in an easy-to-read, non-technical style, this book follows three average people--Claude, Stef, and Anita--as they learn to create money-making blogs and Web sites. Through their experiences, you'll learn: basic Web terminology; the Google Adsense nuts and bolts; how to host, build, and publish targeted ads and Google search boxes to your Web site; filter out inappropriate ads; track page performance; drive traffic to your site; and more. A four-part companion Web site features a blog, includes reader resources, and details the techniques discussed in the book. Online marketers agree that AdSense is one of the best tools you can use to draw dollars to your site. Let Giguere show you how to make the most of Google and have fun doing it! Acknowledgements The book-writing process is such an individually oriented task that it's easy to forget that there are others involved. I'd like to take this opportunity to thank the people who've helped get this book off the ground. First, of course, are Lisa and Victoria, who put up with some long hours on my part. Especially little Victoria, who often wondered why I was spending so much time in front of my computer. Then there are the early reviewers, who gave of their time to look over what I'd written: Jean-Claude Giguère, Anik Giguère-Biollo, Robert Kao, John Gilhuly, and especially C. Enrique Ortiz. My agent, Carole McClendon at Waterside Productions, was excited to read a book of mine she could truly understand. Finally, there are the Peachpit people to thank: Cheryl England, the patient and prodding editor who liked my pitch for this book; Steve Anzovin and Janet Podell, for developing and copyediting it; and of course all the others involved in getting it into its final printed form. Introduction Sometimes it's the small events that are the most exciting. Like the day I made three cents. Not three dollars. Not thirty dollars. Just three cents. And yet it was a very exciting event because of what those three cents represented. I made those three cents the first time someone clicked an advertisement on one of my Web pages. And it was just the beginning. Every time an ad was clicked, I'd make money. The more visitors I had, the more money I'd make. The pages that I had created purely out of interest and paid for out of my own pocket could pay for themselves, or possibly even turn a profit. That's what was so exciting about those three cents. The great thing was that it was really easy, because Google was doing all the hard work for me, through their free AdSense program. All I had to do was give them space on my pages to display the ads. They chose the ads, tracked the clicks, and charged the advertisers. Even better, they analyzed my pages and selected ads that were relevant to the topic of each page. All I had to do was keep my pages updated and do my best to attract a steady stream of visitors, which I was already doing. The truth was, anyone could do what I was doing! Just as exciting was the day a few months later when the first check from Google arrived in my mailbox. It was a small check, but it was real. I almost framed it instead of cashing it! That's what this book is all aboutthe excitement of making money with Google without having to be a computer expert. You'll need some Web pages, but I'll show you how to build those. Don't worry, there's no programming required! All you need is a computer and a connection to the Internet. Chapter one. Making Money with Google > Claude: Is it easy to build a Web site?              > Eric: Sure. You can find instructions on the Web. There are                      lots of books about building Web sites, too. > Claude: But can you make money with a Web site?              > Eric: Absolutely. And you don't even need anything to sell. I                      do it with my own site. Claude was visiting me one day. As an early retiree with two grown children, Claude has a lot of free time, and he spends a good chunk of it at his computer, talking to friends and acquaintances and trying all kinds of software. He isn't technical, but he's an expert computer userhe knows the applications he uses regularly far better than I do. He likes to buy electronic gadgets and computer accessories. When he has questions, though, he calls me up for help. On this day, we were talking about Web pages and Web sites. "Is it easy to build a Web site?" he asked me. "Sure," I said, "you can find instructions on the Web. There are lots of books about building Web sites, too." I offered to lend him some of the books I had. "But can you make money with a Web site?" he shot back. Now we were getting to what he really wanted to know. "Absolutely," I said. "And you don't even need anything to sell. I do it with my own site." Which was the truth. "Is that why you have ads on your pages?" he wondered. (If you go to www.EricGiguere.com, you'll see text ads on the right side of most pages. See Figure 1.1). Figure 1.1. The EricGiguere.com Web site.   "That's how I make money with my site," I agreed. Now I knew what he wanted, but he was probably afraid to ask the obvious question: Can I do it, too? The Elevator Pitch It was time for my elevator pitch about making money with Google. Maybe you're unfamiliar with the term elevator pitch. An elevator pitch is a very short talk or presentation designed to drum up interest in an idea or concept. It traditionally refers to an on-the-spot idea description made by an entrepreneur to grab the attention of a potential investor cornered in an elevator. We weren't in an elevator, but I wanted to grab Claude's attention. "Claude," I pitched, "anyone can make money with Google using a four-step process with no programming required. If you can surf the Web, you can learn the process." He was interested. "What's the catch? Do I have to buy one of those get-rich-quick systems?" "No," I said, "there's no 'system' to buy, and only a few small expenses." And then a caution on my part: "I can't guarantee that you'll make money by following the process, but the chances are good that you'll make some money." "Some money's better than no money," Claude said, and I had to agree. The Four Steps Since Claude seemed eager to continue, I sat down next to him and sketched the process for him on a pad of paper. "Like most things," I explained, "the amount of money you make will probably be in direct proportion to the amount of thought and effort you put into the process." Here are the steps I described to Claude. Web Stats Many sites offer statistics on Internet usage; a site that covers worldwide Internet usage patterns and trends is www.internetworldstats.com/.   Step 1: Create Some Web Pages The first step is to create some Web pages. Don't look so dubiousWeb page creation is not as mysterious as it seems. The basics are easy to understand, and there are many tools (both free and commercial) available to help you. What's hard is coming up with the content for those pages. When you think about it, the Web is all about contentsurfing the Web is just looking for stuff. With billions of pages out there, the competition for a surfer's attention is very stiff. The better your content, the more unique and useful it is, the better your chances that others will find it. That's why I'll be discussing creating good contentfinding something to say and saying it wellbefore getting into the mechanics of actually creating Web pages. Step 2: Show Ads on the Pages The second step is to show ads on those Web pages. Viewing Web pages doesn't usually cost the reader anything. Few sites can get away with charging for access to their materialthere's simply too much competing material already freely available on the Web. If you can't charge for access to the material, how do you make money? It depends on the nature of your pages. If you're running a business that sells products or services, then the pages are indirect moneymakers. They're a marketing expense, a cost of doing business. But you don't have anything to sell. Or do you? Well, actually, you doyou have space on your Web site. You can make money by selling parts of your Web pages as advertising space. This is the same way that newspapers and magazinesthe classic pre-Web content servicesmake most of their money. Sample AdSense Ads If you'd like to see sample AdSense ads based on any URL or keyword, try Digital Point Solution's handy Sandbox utility at www.digitalpoint.com/tools/adsense-sandbox/.   Google makes this step easy. Once you've created your Web pagesor at least some of themyou join Google's AdSense program. Google will read the pages you made, analyze the content that's on them, and use that analysis to select ads that are relevant to the content of the page. All you need to do is insert some Google-supplied codedon't worry, there's no programming involved, just cutting and pastinginto the pages. If someone clicks an ad on one of your pages, Google gives you a cut of the per-click fee they charge advertisers. And it's all automated, even the ad selection (Figure 1.2). Figure 1.2. Sample AdSense ads generated by Digital Point Solution's Sandbox tool.   Step 3: Drive Traffic to the Pages The third step is to increase the number of visitors, or traffic, to your pages. Just showing ads isn't enough: in most cases, you only make money when visitors click on the ads, and the ads will be clicked by only a small percentage of your page visitors. Increase the number of visitors, and you'll increase the number of clicks. Why AdSense? While it's true that AdSense is just one advertising system, it offers a number of advantages over most of the others. Not only is there no cost to join it, it's also available to almost anyone with content on the Web. The ads are primarily text-based (image-based ads are also available as an option) and come in a wide variety of formats for placement on your pages. The ads are also drawn from the same large pool of advertisements shown by Google on its own search pages. Finally, the automated page analysis ensures that the ads displayed on your pages are relevant to the content of those pages.   Find Your Rank Google rankings are available at www.googlerankings.com/.   This step sounds simple, but it's not. In fact, driving traffic to your pages is the hardest step of the process. With so many Web pages out there, the chances that someone will stumble upon yours by accident are small. Your best bets for traffic are to generate good word of mouth and to get your pages higher in Google's page rankings (Figure 1.3). Figure 1.3. Google page rankings. [View full size image]   Step 4: Monitor and Update the Pages The final step is to monitor and update your Web pages on a regular basis. This is the easiest step to perform, but it's an important oneyou want your visitors to keep coming back. If they see that your pages are current, that the content changes in regular and interesting ways, they're more likely to come back. You want them to come back. You want them to link to your pages from their own pages. You want them to tell others about your pages. Making sure your pages are always available and are always up-to-date will make this possible. Monitoring your pages can also help you create new content. With a bit of work, you can usually figure out which search terms visitors are using to find your site. These termsand some of them may surprise youwill suggest topics to focus on when creating new pages or updating existing pages. Who Cares about My Pages? After I had described the process, Claude expressed doubts about it. "I don't know," he said. "It seems too easy. I can see why popular sites like CNN.com and Forbes.com make money by selling advertising space, but why would any advertiser want to rent space on my pages?" About AdWords See Chapter 2 for more on Google's AdWords program.   Claude's question wasn't unreasonable. Why would an advertiser deal with anyone other than the big sites? There are a few good reasons, in fact: Not everyone visits the big sites. The big sites are expensive advertising venues. Ads on big sites are aimed at broad segments. But no advertiser can afford to place ads on millions of small Web sitesit's just too much work. Even dealing with the big sites is a hassle. That's why advertisers use advertising services like Google's AdWords or Yahoo!'s Overture. "It's all about finding the right audience," I explained to Claude. "If your pages attract a segment of the population that advertisers want to target, even if it's a small segment, they'll be interested. But they want the advertising service to find that segment for them. That's where Google's AdSense program comes in." Perhaps an analogy would help my case. "Look at the economy," I continued. "There are many more small businesses than big businesses, but big business gets all the press and publicity. Yet small businesses employ as many people as big businesses and account for most of the long-term job gains, according to government statistics. You don't have to be big to make a difference. Most sites on the Web are small. That doesn't make them unimportant or uninteresting." A Case in Point Claude was still dubious. "So how much money can I make?" he asked me. "I bet it's not much." "It depends on two factors," I answered. "How many visitors does your site get? How much are the advertisers willing to pay you? Multiply the two together and you'll know how much money you'll make." Claude was direct: "So how much money do you make?" Vioxx Merck's official Vioxx withdrawal announcement is at www.memwg.com/vioxx-withdrawal/.   I was expecting this question. "It varies from month to month, really. When I first displayed the ads, I made on average less than a dollar every day. Some days it was just a few cents, some days it was over a dollar." He wasn't impressed. "That's not a lot!" "No, it's not," I allowed, "but considering that it costs me only $10 a month to run my Web site, it was already covering my expenses. It also encouraged me to add more content to my site in order to attract more visitors. After a few months, I was making between $20 and $60 a month. Again, I wasn't getting rich, but I was making money. I think it's a realistic range for a lot of sites." "But then," I continued, "I got lucky." And I told Claude my Vioxx story. The Vioxx Recall In September of 2004, the pharmaceutical giant Merck & Co., Inc., announced that it was voluntarily withdrawing Vioxx, one of its star drugs, from the market. (Note that Vioxx is a registered trademark of Merck & Co., Inc.) They did this because of a study that showed that long-term users of Vioxx, a pain reliever popular with arthritis sufferers, had an increased risk of strokes and heart attacks. The recall generated a media frenzyit was front-page news on most major newspapers the next day. As it happens, I had been using Vioxx myself at that time for pain relief, but I wasn't a long-term user. So although I wasn't in dangerthe risks were only apparent after at least 18 months of usethe recall still gave me pause. The day after the recall, I had a funny thought. I had actually heard about Vioxx well before my doctor prescribed it. Why? Because Vioxx was prominently featured in many of the unsolicited emailspopularly known as spamthat I receive. Wouldn't it be funny if there were a noticeable drop in spam worldwide as spammers scrambled to find an alternative drug to promote? Spam, Spam, Spam Try www.memwg.com/about-spam for a good overview of what spam is and what you can do about it.   A Parody Is Born The Vioxx Parody The full text of my Vioxx parody is available online from the book's Web site at www.memwg.com/vioxx.   What started out as a funny thought quickly became a full-fledged humor piece. A couple of hours later, I had transformed the initial joke into a fake press release and placed it on my Web site. Here's how it starts: Pharmaceutical giant Merck's surprise withdrawal yesterday of its anti-arthritis drug Vioxx (also known as rofecoxib) caught more than just Wall Street by surprise. Although most media attention was focused on arthritis sufferers and other patients who were taking Vioxx for general pain relief, spammerswho prefer to call themselves "bulk email providers"were dealing with their own anxiety issues. "Vioxx is an important drug for us," says acknowledged spam king Pone Leray. "There are literally millions of people out there with arthritis and similar conditions who have been able to find relief using Vioxx. Now we can't market it to them anymore. We've had to temporarily suspend many of our mailings while we figure out how to best deal with the problem." After the parody was up on my site, I sent a link to it to a few of my friends and turned my attention to other things. As I explained to Claude, that's when the excitement really started. The Ads I routinely check my AdSense account, even on weekends, because one of the great features about AdSense is that revenue is tracked by the system as it happens, with very little delay. That Saturdaytwo days after the Vioxx recall and one day after I had written the parodyI made just over $26 from the ads on my site (Figure 1.4). This was a much higher value than normal for my site. What had happened? Figure 1.4. First-day earnings from my Vioxx parody.     As it turns out, one of the tongue-in-cheek "predictions" I had made had come true. In the parody, I had a so-called "industry analyst" (whose name is actually an anagram for what do I know) talk about the impact of the Vioxx recall on Google's revenues: "Google's revenues might actually increase because now a lot of lawyers and consumer advocacy groups will start buying ads urging people to sue Merck. Lawyers are willing to pay a lot to find the right people to file for class action suits. This could actually be a short-term bonanza for Google." This particular prediction was right on the money. Almost overnight, law firms had started placing Vioxx-related advertisements. They smelled opportunity (expensive litigation) and were looking for potential clients. And they were willing to pay to get to them. As I discovered, the lawyers were paying Google several dollars per click, an unusually high amountper-click fees of between 5 and 50 cents are the norm. The Vioxx recall was definitely good for Google, and, by extension, good for me! The Response Once I realized what had happened, I knew I had to act quickly in order to capitalize on my good fortune, because interest in Vioxxand hence the number of available advertisementswould surely wane as time passed. Over the next few days, I worked to make more money from my parody by doing these things: Fine-tuning the text of the page. Experimenting with the number of ads on the page and their layout. Directly telling more people about the page. Indirectly telling others about the page by including a link to it as part of my signature in emails and forum postings. Adding related pages and linking to them from the orig inal page. In the end, I made over $350 that month from Vioxx-related content, almost all profit. And it was fun to do.

Web Basics

"That's a great story," said Claude after I had finished, "but you got lucky. It doesn't help me make money."

"On the contrary," I replied. "Luck played a part, but so did know-how. By fine-tuning and updating the page and directing traffic to the site, I probably doubled my profit."

Claude was still unconvinced. "Sure, but doing all that techie stuff is easy for you. Even if I wrote something good, I still couldn't make a Web page out of it. I'm not a geek, so there's no way that I could build a Web site."

"That, my friend, is where you're wrong," I said. It was time to correct his misconceptions about some basic Web terminology.

Web Pages Are Documents

HTML for Newbies

Learn the basics of hypertext markup language using the tutorials listed at www.memwg.com/html-tutorials/.

 

A Web page is just a document. You can even use a word processor to create it, like any other document. You don't believe me? Launch your word processor and look through its menus. Look for a menu or option like "Save as Web page" or "Export as HTML." (HTML, short for hypertext markup language, is the standard Web page document format.) You're already capable of creating Web pages and you probably didn't know it!

Web Authoring for Free

Find a list of quality Web page authoring freeware at www.memwg.com/html-freeware/.

 

A Web page is a very simple document. That's one of its strengths. In fact, a word processor is usually too complicated a tool to use for creating and editing Web pages. A specialized Web page editor is a much better tool for this purpose, and there are many free ones to choose from (Figure 1.5). With a bit of experience, you can even tweak the documents by handwhich sometimes is useful.

Figure 1.5. Nvu, available at www.nvu.com, is one of many free Web page editors.

[View full size image]

 

From Web Page to Web Site

Once you have a Web page, you can build a Web site. Let me repeat this point, because I want to emphasize it: If you can build a Web page, you can build a Web site. A Web site is just a set of pages that share a common Web address. In other words, the Web site is where the Web page "lives," so to speak, on the Internet.

Although single-page Web sites definitely exist, most sites have multiple pages, often hundreds or thousands of them. But such sites are built one page at a time, so don't feel overwhelmed by the task ahead of you. If you can find time to create one or two pages a week, you'll have 50 to 100 pages on your site in a matter of months. Not that you have to wait that longyou can start making money with your site with just a few pages.

No Programming Required The kind of Web site you're going to build doesn't require any programming. In technical terms, it's called a static site because the Web pages hardly ever change. By contrast, a dynamic site has pages that change, either because the content is updated from a database or because the content is generated by small computer programs that vary the material depending on the viewer. Sites like www.amazon.com make extensive use of dynamic page generation.

 

The Web Server Makes It Public

The Web server is a software application that exposes a Web site for others to see. You can't have a Web site without a Web server, because the server is what a browser communicates with in order to fetch Web pages. Without the server, your Web site is just a bunch of files sitting in your computer that only you can access.

Unlike a Web site, a Web server is complicated to set up and (especially) to maintain. In fact, there are all kinds of reasons not to run the Web server software yourself, even if you're technically inclined. I'll get to that later, but consider this: If I don't run a Web server, why should you? Let someone else run the Web server for you on their own computer. This is called Web hosting and it'll get your site up and running a lot faster than setting up your own Web server.

Web Server Confusion Sometimes Web server refers to the physical computer that the Web server software runs on, as opposed to the software itself. To avoid this confusion, I always say Web server to refer to the software and server computer to refer to the computer on which the Web server runs.

 

The Web Address

Every public Web site has a Web address that distinguishes it from other sites. The address includes a host name and a domain name. The host name is the name of the computer on which the Web server software runs. The domain name is the public name for a group of computers.

For example, the Web address www.EricGiguere.com has the host name www (for World Wide Web) and the domain name EricGiguere.com. In some cases, the address includes additional information after the domain name, but usually the host name and domain name together are enough to locate a Web site. The host name is important when there are two or more Web servers in a domain, but can normally be dropped otherwise. By convention, the primary Web site in a domain uses the special host name www.

Your site will need a Web address, so you'll need to obtain a domain name. Finding the right name is harder than it seems. Ideally, the domain name will directly relate to your site's content, because AdSense uses the Web address as one of its inputs when it tries to figure out what your site is really aboutso choosing a good name is important.

History of the Web

An excellent and authoritative history of the Internet and the World Wide Web can be found on the Internet Society's site, www.isoc.org/internet/history/.

Blogging for Money

Basic Blogging

The blog portal www.blogger.com has a good section on basic blogging. A brief but interesting history of blogging by Dave Winer, author of the longest-running weblog on the Net, is at http://newhome.weblogs.com/historyOfWeblogs.

 

"OK," said Claude, "I think I understand the basics. It does seem pretty simple."

"Absolutely," I told him. "The Web was able to grow quickly because it was built on simple standards. A moderately technical person could download, install, and configure the necessary software in a matter of hours. Web browser software is now bundled with every new computer. Operating systems like Linux and Mac OS X even include built-in Web server software."

"One more thing, then," Claude continued. "Can you tell me the difference between a Web site and a blog? Stef's been telling me that I should 'get with it' and create a blog since I spend so much time on the computer anyhow." Stef is Claude's daughter, who attends a local college.

"When it comes right down to it," I continued, "a blog is just a set of frequently and easily updated pages on a Web site. The term blog is short for weblog, a type of online diary or journal. For some people, their blog is their entire Web site. For others, a blog is just one component of the Web site. Does Stef have a blog?" Claude indicated that she did. "Then I'd love to talk to her about it. The more advanced features of a blogletting readers post comments, tracking references by other blogsrequire the installation of special software on the Web server, so many bloggers let blogging services like LiveJournal or Bloggerwhich, incidentally, is owned by Googlehandle the technical details for them (Figure 1.6). These services can host a blog for you on their own Web sites, but most can also publish the blog over to a Web site that you control. I'd be curious to know how she set up her blog."

Figure 1.6. Google's Blogger weblog service.

[View full size image]

 

Claude wasn't sure. "I think she had someone set it up for her. But I know she adds to it herself."

"That's exactly why blogging services are so popularthey make it easy for anyone to create and maintain a blog."

"So should I create a blog or a regular Web site?" he asked me.

"Or maybe both?" I countered. "There's no right answerit depends if the blog format makes sense for what you want to do or not."

"Can you make money with a blog, too?" I'm not sure if Claude was thinking about himself or his daughter!

"You can display AdSense ads in your blog, yes," I told him. "It's not really any different; you just have to paste the AdSense code into the right spot. I'd be happy to show you or Stef how to do it."

"That would be great," he said. "Let me set something up. I'm sure she'd appreciate your help."

Moving Forward

"You know," Claude continued, "I think Anita would also be interested in learning this stuff." Anita was Claude's eldest daughter. She stayed at home to look after her two young children. "She's always wishing she could do something to make a bit of money while the kids are at school."

"Then she should definitely try making money with Google," I said, "because it doesn't cost anything to join the AdSense program and the costs of setting up a blog or Web site are pretty minimal. Why don't you call her and Stef over to your place sometime? I'll join you and we'll go over how the AdSense program works and you can all decide if you want to try it out or not."

"Perfect!" Claude said. And we agreed to meet in a week or two to talk about AdSense. Which is the topic of the next chapter, of course.

Chapter six. Building Your Site

> Anita: Today we're going to learn about HTML. Isn't that
         programming?


             > Eric: HTML isn't a programming lan
                     guage, it's a markup language. The term comes from the publishing industry,
                     where instructions for things like fonts, spacing, and
                     margins were added to book manuscripts to tell the
                     printers what to do.


> Anita: Wouldn't you do that with a word processor?


             > Eric: Exactly! Except that Word's hiding the markup from you.


> Anita: So can I use Word to create my Web pages?


             > Eric: You can because Word has an option to save a document as
                     HTML. But I wouldn't recommend it, because the HTML it
                     creates isn't that great. You're better off using proper
                     Web-page editing software.

When the three returned to my house for our next session, I could tell that Anita was a bit wary. Stef and Claude seemed eager, however, so I asked Anita what was wrong.

HTML

HTML is an abbreviation for HyperText Markup Language. Hypertext is the original term for electronic documents connected by instantaneous links. For more on the first hypertext project, see http://xanadu.com/

 

"Well," Anita began, "I'm wondering how technical this session's going to be. Dad may like this stuff, but I don't think either of us"she glanced over at Stef"finds it very interesting."

"Actually," Stef said, "I'm more interested than you think. I didn't like the way my blog looked, so I got my friend to show me enough so I could change it. It was easier than I thought it'd be."

As I motioned for the three of them to sit down, I tried to allay Anita's fears. "Well, Stef, you're ahead of the other two, but it won't take them long to catch up," I said. "I promised you at the beginning that there would be no programming involved, and I'm not changing that promise. You can build a Web site without doing any coding."

Anita spoke up. "But today we're going to learn about HTML. Isn't that programming?"

"A fair question," I answered, "but the answer is no. HTML isn't a programming language, it's a markup languagethat's what the ML in HTML stands for, in fact."

"Still sounds geeky to me," Anita said with a grimace.

"It's not that geeky," I assured her. "The term comes from the publishing industry, where instructions were added to the margins of book manuscripts to tell the printers what to do. This was called marking up the document."

"What kind of instructions?" Claude asked.

"Fonts, spacing, marginsthe things that affect the look of a book," I explained.

"Wouldn't you do that with a word processor?" Anita said.

"Exactly!" I said, glad she had made the connection. "Publishers usually don't mark up paper documents anymore; they use word processors, document formatters, and other software tools. Instead of being on paper, the markup is stored electronically in the document files along with the actual document."

"So when I use Word, I'm using a markup language?" Stef asked.

"Yes," I said, "except that Word's hiding the markup from you. But when you bold a word in a paragraph, for example, Word inserts markup around the text you bolded. When Word goes to display or print the text, it sees the markup and turns on bolding until more markup turns the bolding off."

"And styles are markup too?" she asked, referring to Word's name for collections of formatting instructions.

"Uh-huh," I nodded, "they're just sequences of markup instructions labeled with descriptive names like Heading 1 or Bullet List. You can do similar things with Web pages, too."

"My friend showed me some of that when we customized my blog," Stef said, "but I don't have to worry too much about this stuff because there's a Web page on my blog that lets me add new entries. It lets me do bolding, links, and images, so I guess it adds all the markup automatically." I nodded agreement.

"Well," Anita said, "I don't have a blog…so can I use Word to create my Web pages? I know how to use Word."

"You can," I admitted, "because Word has an option to save a document as HTML. But I wouldn't recommend it, because the HTML it creates isn't that great. You're better off using proper Web-page editing software."

"What software do you recommend?" Claude asked.

"Funny you asked," I said, "because I spent some time the other day looking at what's currently available in preparation for this meeting. I was looking for something free that was simple enough for nonexperts to use. The best one I found is an application called Nvu. There's even a version of it for the Mac, Stef, in case you want to do more than just blog. Let's take a look at it and see how easy it is to build Web pages."

Get Nvu

The Nvu open-source page layout application is available at www.nvu.com.

Creating Web Pages with Nvu

"Is Nvu free the way Firefox is free?" Stef asked.

"Yes," I said, "it's what us techies call open source software, which means that it's developed and supported by a community of programmers, not just a single company. Here's what the Nvu Web site says about the software."

Nvu (pronounced N-view, for a "new view") makes managing a web site a snap. Now anyone can create web pages and manage a web site with no technical expertise or knowledge of HTML.

"Sounds perfect!" Claude said.

"It's actually quite good," I agreed, "and the price is certainly perfect for our needs. When you get home, I want you all to go to the Nvu Web site and download the latest version of Nvu. Now, let me start the editor and show you what I mean. And Claude, you're going to be my guinea pig. Did you bring me the information I requested?"

"Yeah," he said, "I signed up for hosting and I printed out the email they sent me."

"Great," I said, "because we're going to build some pages and place them on your VoIP-at-Home.com site. You're about to create a Web presence! So let's get cracking."

Getting Started with Nvu

Making Room

If you need extra room when working with Nvu, close the site manageryou can reopen it when needed.

 

Launch Nvu for the first time and you'll see a window like the one shown in Figure 6.1. At the top are toolbars similar to a word processor's. On the left side is the Nvu Site Manager, and on the right is the page editor. The page editor is where you create and edit the page.

Figure 6.1. The Nvu application window.

[View full size image]

 

Before proceeding, select Preferences from the Tools menu to bring up the Nvu Options dialog. Uncheck the checkbox labeled "Use CSS styles instead of HTML elements and attributes." This will simplify the HTML that the editor creates. We'll discuss what CSS is later, when we talk about styles.

Nvu automatically creates a blank Web page for you when it starts. Before going any further, select Page Title and Properties from the Format menu to display the Page Properties dialog (Figure 6.2). You can set basic information about the Web page from this dialog, including:

• The title displayed in the browser's title bar when the page is viewed
  
• The page's author
  
• A short description of the page
  
• The language in which the page is written
  

Figure 6.2. The Page Properties dialog.

 

Every page needs a title. In this case, it's "VoIP-at-Home.com: Internet Telephoning at Home" because we're building the home page for Claude's site. Nvu will refuse to save the page until you set its title, so you might as well do it first. Most of the other properties can be left as is except for the description and the language. The page description is shown by Google and other search engines on its search-results page, so take the time to write a short phrase that describes what the page (and the site) is about and that will attract searchers to your site. The language should be set to "en" (short for "English") unless you're writing your page in a different language.

Your Preference

Note that default values for most of Nvu's properties can be set from the Nvu Options dialog.

 

Now save the page by selecting Save As from the File menuit's always a good idea to save the page as soon as you set its title. Create a folder for the site and save the page there. Nvu will suggest a name for you based on the title, but remember to follow the page title rules from Chapter 5 and use lowercase letters and no spaces. Since we're creating the home page for Claude's site, the File name should be the standard "index.html."

Title Chop-Chop

If a title is too long to fit in the title bar, the browser will truncate it (cut the last part off) to make it fit. Make sure the title is readable if it's shortened.

 

You're ready to add content to the body, the part of the page that is shown by the browser when it loads the page. The body is currently empty, but the page itself isn't empty: The information you entered in the Page Properties dialog is stored in the head of the page, which isn't shown by the browser. To see the head, switch Nvu to the Source view, either by selecting HTML Source from the View menu or by clicking the Source tab at the bottom of the window (Figure 6.3). The source view shows the raw HTML that Nvu stores when you save the file. You don't need to use this, so switch back to the Normal view by clicking the Normal tab. The Normal view is where you do most of your work.

Figure 6.3. The Nvu Source view.

[View full size image]

 

A Web page is built out of page elements and styles. Page elements describe the structure of the page: This is a heading, this is a paragraph, this is a link to another page, and so on. Page elements are edited in the Normal view, which looks and behaves a lot like a word processor. Styles establish how the page elements are to be displayed: Bold the headings, use an eleven-point font for paragraphs, color links blue, and so on. In other words, page elements are like nouns (things) and styles are like verbs (actions). Styles are edited in a separate view, which we'll discuss later.

To create new page elements, type directly into the Normal view as you would with a word processor. For Claude's home page, I entered a heading, a subheading, an introductory paragraph, and a copyright line (Figure 6.4).

Figure 6.4. The initial text for Claude's home page.

[View full size image]

 

By default, each paragraph you enter is created as a page element called Body Text. You can change a paragraph from one type of element to another by first selecting it with the mouse and then choosing an option from the Paragraph submenu of the Format menu (Figure 6.5). For the heading, select the Heading 1 page element. The subheading should be changed to Heading 2. Change the two remaining paragraphs to the Paragraph type. The page now looks different: The headings are in larger, bolded fonts and the paragraphs are farther apart than they were before (Figure 6.6).

Figure 6.5. Changing the type of a paragraph.

[View full size image]

 

Figure 6.6. Claude's home page with the new page elements.

[View full size image]

 

Quicker Page Elements

To make page element changes more quickly, use the leftmost drop-down list in the toolbar.

 

Text within a paragraph can also be formatted, just as with a word processor, by using the toolbar icons to bold and italicize text or even change its size. Don't forget to save the page after changing it.

Peeking Under the Hood

Since we were working on his site, Claude was extremely interested in what I was doing. He wanted more details, though. "Can I see the Source view again?" Claude asked.

"Sure," I said, "in fact, why don't you take control. This is your site we're building, after all." I moved my chair over so Claude could sit in front of the computer. Once he was settled, he switched Nvu back to the Source view to see the raw HTML that the editor had generated (Figure 6.7).

Figure 6.7. Viewing the raw HTML in the Source view.

[View full size image]

 

"Very interesting," he said. "This is actually pretty readable. Those words in angle brackets are the page elements, right?"

"Right," I said. "They're called tags. They usually come in pairsone to start a markup command, one to end it."

Learning HTML

The W3Schools site www.w3schools.com/html offers a very thorough tutorial on HTML. For a quick list of common HTML tags, see www.w3schools.com/html/html_quick.asp.

 

"And the end one has a slash in it?" Claude asked.

"Yep."

"The spacing doesn't matter much, does it?" Stef noticed.

"No," I agreed, "you can pretty much put as many spaces and carriage returns as you want between most things. The browser doesn't care, but it's definitely easier for us to read if there's lots of white space."

"So what's this view all about, then?" Claude asked as he clicked the HTML Tags tab between the Normal and Source tabs. "Hmmm…it's like the Normal view, but it shows you where the tags start." He clicked the H2 tag and the subheading was selected (Figure 6.8).

Figure 6.8. The HTML Tags view.

[View full size image]

 

"It makes it easy to select the text that the tag applies to!" Stef said.

"Can I change the page from this view, too?" Claude wondered. I nodded yes. "OK, I want to add a copyright symbol to the last line." He started looking through the menus. "Let me see, Word lets you insert symbols from a menu. I wonder if this program does.…Ah! There it is, under Insert!" He selected Characters and Symbols from the menu, and a dialog popped up. He found the copyright symbol in the drop-down list, clicked the Insert button, and dismissed the dialog.

"This is pretty easy," he said as he clicked the Preview tab next to the Source tab. "Funny, this view looks just like the Normal viewI thought it'd be different."

"That's because you're not doing anything complicated in the Normal view," I explained. "If you do, the Preview will show you what it should look like in a browser."

"Should?" Anita asked. "Can it be different?"

"Well," I replied, "browsers have different behaviors, yes, so if you're doing complicated layouts, you should definitely see how the page looks in different browsers. There's a Browse icon on the toolbar that displays the page in the Web browser you normally use. But for simple layouts, the built-in Preview should be fine."

Claude switched back to the Normal view. "Can we jazz this page up? It's not very exciting! And there are no links anywhere."

"We'll get to that, but not just yet," I said. "First, let's publish the page to your Web site."

Publishing the Page

"All right, Claude, you stay at the keyboard," I continued, "and let's see if you can figure out what to do."

Claude scanned the Nvu menus and toolbar. "Well," he said, "there's a big button here labeled 'Publish,' so I'm going to click it." He did, and the Publish Page dialog appeared (Figure 6.9). "Huh. OK, what now?" asked Claude.

Figure 6.9. The Publish Page dialog.

 

"Before you can place the HTML file on your Web site, you need to create what Nvu calls a publishing site," I explained. "The publishing site tells Nvu how to connect to the hosting service's computer. The information you need is in the email the hosting service sent you." Claude reached for the printout he'd brought. "Nvu supports multiple publishing sites, so you give them names to tell them apart."

"All right," Claude said, "we'll call the site 'VoIP-at-home,' but I'll drop the .com part. The HTTP address of the homepage is http://www.voip-at-home.com. The publishing address…hmm…the mail from the hosting service says that I should FTP to voip-at-home.com/web. What's FTP?"

Stef jumped in at that point. "I know! It stands for file transfer protocol," she said. "It's for copying files from one computer to another."

"Right," I said. "So type in 'ftp://voip-at-home.com/web' as the publishing address, and then enter the user ID and password that they sent you."

"Dad's FTP address is a lot different than the one my hosting service sent me," Stef said.

"They're not as standard as Web addresses," I explained, "but it shouldn't matter as long as you use the address they supplied you. Now, Claude, you're ready to publish."

Claude hit the Publish button. Another dialog appeared as Nvu copied the index.html file from my computer to Claude's hosting service (Figure 6.10).

Figure 6.10. Publishing the page to the hosting service.

 

"It's done," Claude said, "so can I try my Web page now?" I nodded, and Claude opened a browser window and typed the address of his site, www.voip-at-home.com. "There it is!" he yelled as the home page appeared (Figure 6.11).

Figure 6.11. The Web page is now live on the site.

[View full size image]

 

"Yay Dad!" Stef said, and Anita was smiling, too.

"Great job, Claude," I said. "Now let's add another page to your site and link it to your home page. Anita, will you please take the helm?" I motioned her over and Claude switched seats with her. "I know this is your father's site, but I want each of you to try editing a Web page. All right, we need to create an about page and link it to the home page and vice versa. Why don't you go ahead and show me how to do it?"

Adding and Linking Pages

Adding a page with Nvu is as easy as clicking the New icon on the toolbar, setting its title, and saving it to disk. Anita was able to figure this out in short order. She titled the new page "About VoIP-at-Home.com" and saved it to disk as "about.html." She added a heading and a couple of paragraphs. The home page was still accessible from within Nvu, so she quickly copied the copyright line from the home page to finish the simple about page (Figure 6.12).

Figure 6.12. The newly created about page.

[View full size image]

 

Now it was time to link the two pages. Anita moved the cursor to the top of the about page and inserted a blank paragraph. Then she clicked the Link button to open the Link Properties dialog (Figure 6.13). After entering "Home" for the link text and "index.html" for the link location, she clicked the OK button to create the new link. Pleased with herself, she immediately went to the bottom of the page and highlighted her father's name in the copyright message, then clicked the Link button again. She had noticed the email address option on the Link Properties dialog. She checked the option and entered her father's email address, claude@voip-at-home.com, to create a second link on the about page (Figure 6.14). Clicking this link would send an email to Claude.

Figure 6.13. The Link Properties dialog.

 

Figure 6.14. The about page with its new links.

[View full size image]

 

Feeling very confident, Anita then switched to the home page and added a link to it, a link called "About this site" that referenced the about.html page. She also added an email link. When she was done, she clicked button to update the site.

Testing and More Testing

"Look," Anita said, "here's the updated home page." She activated the browser window and reloaded the page, which now sported two links. "And here's the new about page," she continued, clicking the "About this site" link. Unfortunately, the page didn't show up because the browser couldn't find it.

"You forgot to publish the about page," I explained to her. "What you've got now on the home page is called a broken link, because the page it links to is missing. Don't worry, it's a common mistakeeven professionals do it. That's why you should always check your changes before you publish a page. Check it visually in the Preview view, then use the Browse button to load it into a browser and check the links."

"Like I always proofread my reports before submitting them," Stef said, as Anita clicked the Browse button to check the about page.

"What does this mean?" she asked, pointing to a new dialog on the screen (Figure 6.15).

Figure 6.15. Asking for permission to launch a browser window.

[View full size image]

 

"It's a bit cryptic," I agreed. "Nvu's asking your permission to launch a browser. Click the Launch Application button to continue."

As soon as she did, a new browser window displaying the about page appeared. She clicked the Home link to load the home page. She then clicked "About this site" again to return to the about page. She also tested the email links at the bottom of each page.

"Everything looks good," she said, "so let me publish the about page." She did, and this time when she clicked the "About this site" link on the www.voip-at-home.com home page, the about page was loaded.

"Perfect!" I said. "Two pages up already. Now let's beautify them a bit."

Making Good-Looking Pages

"Hey, I know what to do," Claude said, taking back control from Anita. "You just use the toolbar buttons to change fonts and colors, just like in a word processor." Claude showed us what he meant by selecting a heading and clicking buttons on the toolbar to make the text larger and center it on the page.

"You're right, Claude," I said, "that's the simplest way to do things. But it's not the best way."

"Why not?" he wondered.

"Because you're not letting the browser do the work for you," I explained. "Why change the font size and color for each and every heading? The browser knows it's a heading, so tell the browser how you want the headings displayed and let it worry about the details."

"Huh," he said, "I guess that makes sense. Makes it easier to change your mind, too, right?"

"Exactly!" I answered, glad he understood it. "You tell the browser once how to display all the page elements used by your site. If you don't like something, you just change it in one placethere's no need to edit every single page."

"Those are the styles you mentioned before," Stef said. "Like Word's styles."

"Very much like those," I agreed, "except that Word styles define structure and presentation rules. In a Web page, the two concepts are separate: The page elementsthe tagsdefine the structure, and the styles define how to present that structure. Let me show you what I mean."

Defining Your Own Styles

"As you might already guess," I said as I took control of the computer again, "your browser comes with a set of predefined styles for displaying page elements. You can usually change these styles to suit your own needs, such as making the default fonts larger or using different colors for links. As a Web page designer, however, you can define new styles to control how your pages look in the browser. In most cases, your styles take precedence."

"But visitors can always force the browser to use their preferences, right?" Anita asked.

CSS Ideas

The site http://cssvault.com/ showcases many Web sites that make creative use of cascading style sheets. It's a good place to check for design ideas.

 

"Right," I said. "You're not in total control. If visitors can't read your site because the fonts are too small, they're not going to care how much work you put into the design. They'll make the text bigger so they can read it. That's only fair. But only a very small percentage of your visitors will do that. Most will use the styles you define and see the site the way you meant it to be seen."

"Hey!" Stef said, "can you use the styles to control how a page is printed?"

"Yes, you can," I answered. "Why do you ask?"

"Because sometimes when I print a Web page it doesn't look at all like what it does on the screen," she explained.

"That's the other advantage to using styles," I said. "You can define different rules for displaying the page versus printing the page." Turning to the monitor, I opened Nvu's Tools menu and selected the CSS Editor menu item. "Since styles are different from page elements, you use a different editor to create them. This editor is called a CSS editor. CSS stands for cascading style sheets, which is the geek term for a set of Web-page styles." There was a new window on the screen titled "CSS Stylesheets" (Figure 6.16). "This editor makes it all pretty simple, so don't get caught up with the terminology."

Figure 6.16. Nvu's style editor.

[View full size image]

 

"The first thing you want to do," I continued, "is uncheck the Expert Mode checkbox at the bottom left-hand corner…there. Now you click the Rule button to create a new style rule." I did, and the editor prompted me for some details about the rule (Figure 6.17). "Let's change the way headings are displayed by creating a style that applies to all the Heading 1 page elements. You need the tag name for this, which you can get from either the HTML Tags view or the Source view of the HTML page. The tag for Heading 1 is 'h1.' Now I click the Create Style rule button to create an empty rule for h1 tags. OK, Claude, why don't you take over from here?" I shifted seats with Claude.

Figure 6.17. Creating a new style rule.

[View full size image]

 

"What do I do now?" he asked.

"Look through the tabs on the right-hand side and change some of the properties," I answered.

"OK," he said as he clicked the Text tab, "I want the heading to be a nice green. Can I type the name of a color here?" Claude pointed to the input field labeled "Color."

"Try it," I said.

Safe Colors

Not all colors look the same in every browser. For an explanation of "browser-safe colors," examples of color charts, and more info on Web color, see www.websitetips.com/color/.

 

Claude typed "green" into the field. "Hey! It worked! Look at the heading!" He moved the editor window aside so we could see that the heading had indeed changed to green.

"Click the button next to the color field," I suggested. He did, and a color picker popped up (Figure 6.18). "If you can't name the color you want, just pick it here to create a special code for it."

Figure 6.18. The color picker.

 

"I'm OK with just green for now," Claude said, dismissing the color picker. "But the typeface needs to be altered." Pausing, he looked closely at the options that were available. "What's a predefined font family? Is that what I want?"

"Probably," I answered. "A font family is a font or typeface name. Actually, it's a list of font names. Since not every font is available on all computers, you supply a list of fonts, and the visitor's browser goes through the list, looking for a match. The last name on the list is usually a generic one, like serif, sans-serif, or monospace, that the browser can always match to an existing font on the system." Claude was playing with the drop-down list of predefined font values as I said this (Figure 6.19).

Figure 6.19. Setting text-related properties.

[View full size image]

 

Free Fonts

Need free fonts? There are many places on the Web to look. For starters, try www.fontfreak.com/ or www.fontfile.com/.

 

"All right," he said, "I'll choose one of the predefined values. Looks good. How do I put a line underneath it?" I told him there were two choices: He could underline just the words in the heading or else draw a line from one side of the browser window to the other. He wanted the latter, so he clicked the Borders tab and added a solid bottom border one pixel high. "Great! I think that's enough for the heading, but the subheading also needs to change. So I add a new rule for it, right?" I nodded. "All right…I'll add a rule for h2…change the font…set the color to black for variety…there!"

"You're almost done, I think," I said.

"I'd like a border around the whole page, though."

"OK, you need two rules for that," I said. "The first rule is for the body tag. Set the background color and the font." He set the color to light blue and the font to the same as the headings. "Now click the Rule button, but this time, instead of a page element style, you're going to add a named style called 'content.'" (see Figure 6.20).

Figure 6.20. Creating a named style.

[View full size image]

 

"Now set its background color to white and then move to the Box page. This page is pretty complicated, but basically you're just here to set some margins. Set the margin values to 10px each'px' is the abbreviation for pixel. Set the top and bottom padding values to 2px and the left and right padding to 10px. Then close the CSS editor."

"Nothing's different," he said.

"First you have to add a couple of lines in the Source view," I said. "Here, let me show you." After switching to the Source view, I added a div taga division markerat the start of the body and the matching end tag at the end of the body (Figure 6.21). Then I switched back to the Normal view.

Figure 6.21. Adding a div tag to the page body.

[View full size image]

 

"Hey!" Stef said. "That looks a lot better! What did you do?"

"A named style defines properties that you can apply to all different kinds of tags," I explained, "and the div tag basically just encloses whatever is inside it. By applying the content style to the div tag, we put a white box around and behind all the tags and text contained by the div tag. Now let's save and publish the page." After doing this, I reloaded the www.voip-at-home.com home page in a browser window (Figure 6.22).

Figure 6.22. The ning my head. "We've only fixed one page. The about page is still the same."

[View full size image]

 

"Looks like we're done!" said Claude.

Sharing Styles across Pages

"Not quite," I said, shaking my head. "We've only fixed one page. The about page is still the same."

"So you need to copy the styles to it as well," Anita said.

"Yes, but there's an easier way to do it. Right now the styles we added to the home page are actually commands in the Web page. This is called an embedded or internal style sheet. We need to move them to a separate file, an external style sheet. Then multiple pages can link to it and share the style definitions."

"So the pages will all look the same," Stef concluded.

"Right," I agreed, "and if you want to change things across all pages, there's only one place to go." Turning back to the screen, I brought up the CSS editor again. "Luckily, Nvu makes it really easy to switch from an internal style sheet to an external style sheet. On the left-hand side of the window, click the internal stylesheet button, then click the button on the right-hand side called 'Export stylesheet and switch to exported version.'" The button was rather lengthy and hard to miss (Figure 6.23). "Nvu asks you for a file name, so enter 'styles.css' or something similar, as long as it ends with .cssthat's how the system knows it's a style sheet. And be sure to save the file in the same folder as your HTML pages."

Figure 6.23. Switching to an external style sheet.

[View full size image]

 

"So now you're done?" Claude asked.

"Not yet," I answered, "because the style sheet isn't being referenced properly. Right now it's being loaded as a local file on your hard drive, which won't work after you publish it to the Web site. So we close the CSS editor again and switch to the Source view. Do you see the new link tag? You just need to change the href value in the tag to 'styles.css' by itself." (See Figure 6.24.)

Figure 6.24. Changing the link tag.

[View full size image]

 

"So do you just copy the link tag to the about page?" Stef asked.

"Yes," I said, "but don't forget to add the div tag there too." I made the changes to the about page and then saved both pages. "There. Now we publish the pages. See how the style sheet is being copied up now?" (See Figure 6.25.)

Figure 6.25. The style sheet is published with the page.

 

Moving back to the browser window, I reloaded the about page at www.voip-at-home.com/about.html (Figure 6.26). "There," I said, "now we're done."

Figure 6.26. The style sheet applied to the about page.

[View full size image]

 

Publishing a Blog

Get FTP

There are numerous standalone programs that let you access FTP sites and do file transfers. You can find links to many such utilities for Windows and Macintosh at http://compnetworking.about.com/cs/novellgroupwise/.

 

"I have a question," Stef said. "How do I publish my blog to my own Web site?"

"You're using Blogger, right?" I asked her. Blogger is Google's free blogging service. She nodded. "Then it's pretty easy. Here, take the keyboard and log into your Blogger account."

Stef went to www.blogger.com and logged in to her account (Figure 6.27).

Figure 6.27. Stef's Blogger dashboard.

[View full size image]

 

"Change to your blog settings," I said, "and move to the Publishing section." (See Figure 6.28).

Figure 6.28. Publishing settings for Stef's blog.

[View full size image]

 

"I click the FTP link, then?" she asked. I nodded, and new settings were displayed (Figure 6.29).

Figure 6.29. Setting the blog to publish via FTP to Stef's Web site.

[View full size image]

 

"I see, I enter the FTP information here," she said. "So when I add an entry to my blog, it'll get copied over to my site?"

"Yep. That's it, you're done. And now," I said, checking my watch, "we're done, too."

 

Now the Real Work Starts

"That was a great sessionI can't wait to get home and try this stuff out," said Claude.

"I'll mail you each the files so you have something to start with," I said. "But now the real work beginsyou have to build some content."

"How soon can we apply for AdSense?" Anita asked.

"As soon as you have some decent content," I said. "Don't do it before then, though, there's no point. Get started on your sitesor work on your blog in your case, Stefand send me regular updates. When you're ready to join, it's just a matter of filling out the form at www.google.com/adsense. It's easy. Then you wait a few days to see if you're accepted."

"What if we're not?" Claude wondered.

"We'll deal with that if it happens," I replied. "If you follow the rules we've already discussed, it shouldn't be a problem. So get to it, and we'll get together again once everyone's in the program." Unless I was mistaken, it would be at least a couple of weeks before we would meet again.

 

Touring the AdSense Console

"Tell you what, Stef," I continued, "since you're an AdSense expert now, why don't you take over? You can demonstrate things with my AdSense account, if you want." She said that was fine, so I opened a browser window to www.google.com/adsense to access the AdSense login page (Figure 7.1).

Figure 7.1. The AdSense login page.

[View full size image]

 

As I logged into my account, I gave them a warning. "Google uses a secure Web connection for AdSense account management, so if the Web address shown in your browser toolbar doesn't start with 'https:' and there's no lock icon in the browser status bar, don't log init's probably some kind of scam site looking to obtain your AdSense password."

Avoid Scams

Want the latest news on Internet scams and how to avoid them? Log on to www.scams.net/.

 

"And always keep the password confidential," Claude added.

"Absolutely!" I said. "You don't want to let anyone access your account. Treat it like an online banking account. There, we're in. Your turn, Stef. Give us a tour."

Stef switched places with me. "OK," she began, "this is the AdSense management console. Right now it's showing the default page, the Ad Performance page." She pointed to the report displayed on the screen (Figure 7.2). "Normally, it shows you how much money you've earned today using AdSense."

Figure 7.2. The Ad Performance page.

[View full size image]

 

"That's what I really want to know!" Claude said.

"And it's updated throughout the day, as you pointed out," Stef continued, glancing at me. "But you can also generate reports for any range of dates. Of course, I only have a couple of weeks of data. How far back does it actually go?"

"To the day you displayed your first ad," I said. "In my case, that's August 8, 2003. Stef, do you see that message just above the report?"

"You mean the one in the box with the little arrow?" she said, pointing to it (Figure 7.3).

Figure 7.3. An AdSense announcement.

[View full size image]

 

"That's how Google makes most of its announcements about AdSense," I explained, "so always be on the lookout for those. New features get added to AdSense all the time, so read them carefully. The management console was actually a lot simpler back when I first started with AdSense."

"Does Google ever send you email?" Anita asked.

"Sometimes," I replied, "for new feature announcements or when there's some kind of problem with your account or your Web sites. But I'll tell you about that later. Stef, please continue with the tour."

"Right," she said. "So at the top of the page are the tabs to switch between the major functions of the console." She clicked each tab in turn (Figure 7.4). "Reports to see how much you're earning. Ad Settings for creating ads, ad channels, and ad filters. Search Settings for creating search boxes, search channels, and search filters. My Account for managing your payment and tax information." Stef paused for a moment. "Huh. The My Account tab is different than it was last week, but I didn't actually notice it until just now."

Figure 7.4. The management console tabs.

[View full size image]

 

"I told you," I said, "AdSense is always changing. Sometimes it's subtlethey add another reporting option. Sometime's it's majorlike when they added AdSense for search. You can usually tell when a major change occurs because Google updates the AdSense Terms and Conditions. When that happens, you're asked to agree to the new terms before Google lets you access your account."

"And if you don't agree?" Claude said.

"You're kicked out," I said, pretending to cut my throat with the side of my hand, "so you don't really have a choice but to agree if you want to stay in the program. But so far it's not been an issuethe Terms and Conditions have actually gotten more flexible as time's gone on. With Yahoo!'s entry into the game, I think you can expect even more features and flexibility."

"Where do I find the Terms and Conditions again?" Claude asked.

"I think there's a link to them in the online help," Stef answered, clicking the Help link at the top of the page and causing a new browser window to pop up (Figure 7.5). She scrolled the help page. "It's there at the bottom of the help page."

Figure 7.5. The AdSense help page.

[View full size image]

 

"Looks like there's a lot of help available," said Anita.

Stef agreed. "I've read through a lot of these items to help me understand AdSense."

"This is also where you can access the AdSense Preview Tool," I pointed out. "The Preview Tool lets you see what kind of ads AdSense would display on any random Web page."

"But only with Internet Explorer on Windows, though," Stef said.

"I couldn't use it on my Mac."

"But I have it installed, Stef," I said, "so why don't you open an Internet Explorer session and go to a random Web site. Now right-click the Web page and select the Google AdSense Preview Tool." A small window popped up. "You can click those ads if you want," I continued, "even if you're using the tool on your own site's pages, because the advertisers don't get charged for them."

"But why would you use this tool?" Anita asked.

"It lets you see what kind of ads will appear on new pages," I explained, "before you actually show ads on those pages. You see, it's a bad idea to add the code prematurely, before the page is finished, because AdSense may mistarget the ads. You can use the Preview Tool to see if the page is correctly targeted."

Stef was playing with the tool. "Or you can use it to see what kind of ads people in other countries see," she said, changing the tool to show us ads for Japanese visitors (Figure 7.6)

Figure 7.6. The AdSense Preview Tool.

[View full size image]

 

"And that," I said, "concludes our initial tour of AdSense. Now we can"

Claude interrupted me.

"What's that 'Invite a Friend' link at the top of the console?" he asked.

"It's for referring AdSense to your friends," I answered. "If you know anyone who has a Web site, you ask Google to send them an invitation to join the program."

"Do you get paid if they do?" Stef asked. "Friends of mine are always trying to get me to join things because they'll make some money if I do."

Google Referrals

For up-to-date information about Google's referral program, see www.memwg.com/google-referrals.

 

"While a lot of commercial Web sites have referral and affiliate programs that pay money, so far Google doesn't," I said. "But who knows? That might change in the future."

Be Proactive

The AdSense customer service representatives are happy to answer any questions you have about the program, so contact them for clarification before you do anything that might contravene the AdSense program policies.

 

"So why didn't you send us referrals?" Anita asked.

I laughed and said, "Because I was dumb! You're right, I should have, in case it's worth something later. Oh well85.The referral program is one of those features that was added later, so I've not paid too much attention to it. I'll certainly keep it in mind from now on."

 

Managing AdSense

"Now let's look more closely at each part of the console," I continued. "Remember, everything about AdSense is automated, so you'll spend a lot of time with the console initially."

"Can you ever talk to a human being?" Anita asked.

"Absolutely," I said, "there's a 'Contact Us' link at the top of the console. Or you can send email directly to adsense-support@google.com and someone will get back to you within one or two business days."

"I've already had contact with them," Stef said, "and they answered my question pretty quickly. The reply was very polite, too, even though they probably get a lot of dumb questions like mine!"

"Well, it's worth their effort to keep the AdSense publishers happy," I replied, "because the more ads get shown by more publishers, the more money Google makes. Remember, this is a partnership between you and Google, so it benefits both of you to treat each other well."

"So what part of the console should we start with?" Stef asked. "I haven't explored it all in detail."

"That's OK," I said, "we'll figure it out as we go along. Start with the ad reports and we'll go from there."

Stef then went on to describe (with my help) each page in the console.

Reports

The Reports tab consists of two pages: Ad Performance and Search Performance. The former reports on AdSense for content earnings, the latter on AdSense for search earnings. The pages are otherwise identical.

The controls at the top of the report page define what kind of report is generated. The actual report is shown immediately below the report controls. There are two basic types of report available:

• an aggregate data report summarizing each day's data
  
• a channel data report displaying channel-specific data
  

With the aggregate data report, you see how much you're actually earning. With the channel data report, you see how well pages or groups of pages are performing.

Overlapping Channels Pages that are simultaneously in custom channels and URL channels get their clicks and earnings double-counted in channel data reports. When overlapping channels are used, then, the total earnings shown in the channel data report may exceed those shown in the aggregate data report. The aggregate data report is always correct.

 

A report shows the data between two dates. A number of predefined date ranges are provided (Figure 7.7). The "today" and "this month" ranges are usually the most interesting ranges to look at (remember that Google pays AdSense earnings on a monthly basis, providing you earn at least $100 each month). Other ranges can be specified manually using the date controls immediately below the list of predefined ranges.

Figure 7.7. Predefined date ranges for easy report generation.

 

Aggregate reports can show total page impressions or total ad unit impressions. Channel reports are more flexible, allowing you to select precisely which channels you're interested in and how the data for those channels is to be shownper-date totals, per-channel totals, or a detailed list of channel earnings per day.

After changing the report controls, click the Display Report button below the controls to generate the new report. A typical two-day aggregate report for page impressions is shown in Figure 7.8. The data are initially sorted by date, but you can click any column heading to sort by that column. The columns are:

• Date the reporting date
  
• Channel the channel (channel reports only)
  
• Page impressions the number of times ads have been shown on a page
  
• Clicks the number of valid ad clicks
  
• Page CTR the page clickthrough rate, the number of clicks divided by the number of impressions
  
• Page eCPM the effective cost per 1000 impressions, how much money on average each page is earning based on a standard industry unit
  
• Your earnings the amount earned
  

Figure 7.8. A typical aggregate report.

[View full size image]

 

If you choose to view aggregate data for ad unit impressions instead of pages, you will see equivalent column headings (Ad unit impressions, Ad unit CTR, and Ad unit eCPM), with all calculations done using ad units.

Search Earnings Treated Differently At the bottom of the search report, you'll see this statement: "Revenue from AdSense for search may be offset at the end of the month by costs associated with performing searches." If a site's visitors do a lot of searching but don't click many ads, the publisher may find that Google has adjusted the site's AdSense for search earnings to recover some of the costs of providing the search service. (AdSense for content earnings are not affected.) This only occurs for a few sites, and the chargeback never exceeds the AdSense for search earnings for that month.

 

You can download any report to your computer by clicking the Download CSV file link in the top right-hand corner of the report. The downloaded report can then be opened with any spreadsheet application (CSV is a universally supported spreadsheet file format) for further analysis.

Ad Settings

The Ad Settings tab consists of four pages: Ad layout code, Ad colors, Channels, and Competitive Ad Filter. The Ad layout code and Ad colors pages are described in detail in the next chapter, so only the Channels and Competitive Ad Filter pages are described here.

You manage your custom and URL channels from the Channels page. At the top of the page are the URL channel controls (Figure 7.9). The custom channel controls are at the bottom (Figure 7.10). Creating new channels is simple: Just type the URL or the channel name into the appropriate input field and click the "Create new channel" button.

Figure 7.9. Managing URL channels.

[View full size image]

 

Figure 7.10. Managing custom channels.

[View full size image]

 

Channels

You can have up to 100 active channels at any timethat's more than adequate for most sites.

 

Ad Filters

For more details on competitive ad filters, see www.memwg.com/ad-filters.

 

A channel can be active or inactive. AdSense tracks only active channels for reporting.

Ad filtering is done from the Competitive Ad Filter page (Figure 7.11). Just list the Web addresses you want filtered. Up to 200 addresses can be filtered at any time. This is one area where the AdSense Preview Tool comes in handy: If you see an ad you'd like to filter while using the tool, you can just select the ad and click the Show Selected URLs link on the tool to see the ad's destination address. Copy the address to the clipboard and then paste it right into the ad filter list.

Figure 7.11. Filtering competitive ads.

[View full size image]

 

Search Settings

The Search Settings tab is very similar to the Ad Settings tab and consists of four pages: Search code, Styles, Channels, and Competitive Ad Filter. The Search code and Styles pages are described in the next chapter. The other two pages are basically identical to their counterparts on the Ad Settings tab. Note that AdSense for search supports only custom channels, not URL channels.

Separate Channel and Filter Lists The AdSense for search channel and filter lists are separate from the AdSense for content channel and filter lists, so changes to one do not affect the other. If you're blocking sites and using both AdSense services, remember to update both lists.

 

My Account

The My Accounts tab consists of three pages: Account Settings, Payment History, and Tax information.

The Account Settings page manages general account settings:

• Login Information email address (which can't be changed), password, language choice (the AdSense console is available in different languages), and whether Google has permission to mail you anything other than routine service announcements
  
• Payee Information the name and address to use for payment
  
• Payment Details how the payment is to be made
  
• Payment Holding temporarily suspends payments
  
• Ad Type Preference whether or not image ads are allowed on pages by default (this can be changed on a page-by-page basis)
  
• Product Subscriptions whether you're signed up for both AdSense for content and AdSense for search or just AdSense for content
  

A typical Accounts Settings page, with important details blurred out, is shown in Figure 7.12. Note that edit links are available to change most of the information.

Figure 7.12. Viewing account settings.

[View full size image]

 

The Payment History page summarizes your monthly earnings and the payments you've been sent (Figure 7.13). There is one entry per month for earnings, but payments may occur less frequently if you haven't reached the minimum payment threshold ($100) or you've temporarily suspended payment. Clicking any Earnings or Payment link shows you more details about that month's earnings or payment. Details of earnings for both AdSense for content and AdSense for search are included under Earnings (Figure 7.14).

Figure 7.13. Payment history.

[View full size image]

 

Figure 7.14. Earnings details.

[View full size image]

 

Tax Help

Consult a tax professional for clarification if you have any questions about which Google Tax Information form to use or about any other tax issue related to AdSense.

 

The Tax Information page is where Google collects the tax-related information required by the United States government (Figure 7.15). The form you use depends on your citizenship, your country of residence, and other factors. A wizard is available to help you select the correct form.

Figure 7.15. Supplying Google with tax-related information.

[View full size image]

 

Tax Information Is Required for Payment You won't receive any payment from Google until you supply them with your tax information. Even foreign publishers not subject to U.S. taxes must supply some basic informationthere are no exceptions.

 

Getting Paid

"If you only get paid when your earnings reach $100," Claude asked, "how many months does a new AdSense publisher have to wait to be paid?"

"There aren't any statistics available," I answered, "and it really depends on how much traffic the site is getting and how much money you're getting per click. My first site had pretty low traffic initially, so it took me a few months to get my first payment. And back then, Google always paid out accounts at the end of the calendar year, even if they had accumulated earnings less than $100. I don't think Stef will earn $100 this month, but $10 in a couple of weeks is a good start."

"When do you actually get paid?" Stef asked.

"Google sends the payments about a month after you've earned them," I said. "They're very consistent with their schedule."

"They send you a check?" Claude said.

"Yes," I said. "International publishers can even get paid in other currencies. You can get the check sent by courier to you if you're in a hurry. Alternatively, you can now sign up for EFTelectronic fund transfer."

"And have the money deposited directly into your bank account," Claude said.

"You choose your payment type from the Account Settings page," I said. "It's really easy. I still get checksit's nice to physically receive them. But if I were making several thousand dollars a month from AdSense, I'd probably want to get the money more quickly, and I'd either get the check by courier or use EFT."

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

 

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.

 

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.