Getting the HTML Code for an Ad
If you've been approved automatically, you should see several new buttons at the bottom of the Link Detail window (see Figure 20). The most important button at this point is the one labeled Get HTML. Clicking this button opens the Get HTML window (see Figure 21).
){kind=link}
){kind=link}
Figure 20 Link Detail window after approval.
Figure 21 The Get HTML pop-up window.
The text box in this window contains HTML code for the ad. You need to copy and paste this code into the file for the web page where you want to display the ad. Before we do that, however, let's get the web page ready to receive the new ad copy.
NOTE
Don't close the Commission Junction window. We're not done with it yet.
TIP
If you're one of those highly efficient types who never gets sidetracked, you can copy the HTML code to the Windows Clipboard right now and then paste it into your web page later on. However, the more steps you place between copying the code and pasting it into place, the more likely that you'll forget what you were doing, go get a cup of coffee or answer the phone, and then end up saving something else to the Clipboard, accidentally replacing your temporarily stored HTML code. This isn't a drastic problem, because you can copy the code again, but it's wasted effort.
Prepping Your Web Page for the New Ad
Each web page on your site has a corresponding source file (HTML, Active Server Pages, or other script file). To use the ad's HTML code, you simply have to open the page's source file in some kind of editing software such as Notepad, and then paste the ad code into an appropriate location—that is, at the attention-flow interrupt point(s) you identified as part of your homework for the previous article.
For this article, we'll simply position the ad at the top of the page, in place of the current ad. The relevant section of the file containing the old ad is shown in Figure 22.
){kind=link}
Figure 22 Source file for the web page where the ad goes.
The code we'll be pasting is quite long, and later on we'll probably replace this ad with a better-paying ad. (Remember that penny per click-through?) If we just paste the code for the new ad right over that single line of code for the current ad (see the highlighted line in Figure 22), it might be hard later on to figure out where the new ad code begins and ends—after all, it's right in the middle of our own web page code. Let's add some comments to the web page code to make it easy to distinguish where the ad begins and ends.
An HTML comment begins with a starting symbol (<!--) and finishes with an ending symbol (-->). You can put anything you want between the beginning and ending symbol. I like putting START AD ... and END AD ..., respectively (see Figure 25). In this example, I also gave the ad a number (1) to indicate that it's the first ad on the page. Later ads will be numbered 2, 3, etc., obviously.
){kind=link}
Figure 23 Ad beginning and ending markers.
){kind=link}
With your markers in place, it's time to copy and paste the ad code.
Copying the Code to Temporary Memory
Follow these steps to copy the code (we'll paste it in place in the next section):
-
Go back to the Commission Junction window, which should still be displaying the HTML code for the ad you selected. Click the Highlight All button to select all of the HTML code (see Figure 24).
With the code highlighted, it's time to copy the code to temporary memory (in Windows, this is called the Clipboard). Press Ctrl+C on your keyboard to copy the code to the Windows Clipboard. Listing 1 shows the HTML code for my selected Ask Jeeves Blackjack ad.
){kind=link}
Figure 24 Highlighted HTML code.
Listing 1 Advertisement Code
<TABLE bgColor=#ffffcc border=0 cellPadding=0
cellSpacing=0 height=60 width=468><TBODY>
<TR>
<TD rowSpan=3>
<IMG height=60 hspace=2
src="http://affiliates.ask.com/cj/images/asklogo.gif" width=131>
</TD>
<TD colSpan=4><FONT face="Verdana, Arial, Helvetica, Sans-Serif"
size=-2><B>Have a Question? Just type it in and click Ask!
</B></FONT></TD></TR>
<TR>
<TD>
<FORM ACTION="http://www.qksrv.net/interactive" method=get>
</TD>
<TD><INPUT name=ask size=38 MAXSIZE="255">
<INPUT name=origin type=hidden value=0>
<INPUT name=site_name type=hidden value=Jeeves>
<INPUT name=metasearch type=hidden value=yes>
<INPUT name=ads type=hidden></TD>
<TD><INPUT border=0 height=23 hspace=4 name=Ask
src="http://affiliates.ask.com/cj/images/asknew.gif"
type=image width=35></TD>
<TD>
<input type="hidden" name="pid" value="814820">
<input type="hidden" name="url"
value="http://www.ask.com/main/askjeeves.asp">
<input type="hidden" name="aid" value="1934751">
</FORM></TD></TR>
<TR>
<TD colSpan=4 vAlign=center><FONT color=#cc0000
face="Verdana, Arial, Helvetica, Sans-Serif" size=-2><B>For
example</B></FONT>:
<FONT face="Verdana, Arial, Helvetica, Sans-Serif"
size=-2>Where can I play Blackjack online?
</FONT></TD></TR></TBODY></TABLE>
<img src="http://www.qksrv.net/image-814820-1934751" width="1"
height="1" border="0">
Usually the code for banner ads isn't this long—it's typically one or two lines of HTML. The code for this ad is long because it's an interactive banner; instead of just clicking the banner, the user can type a search phrase into a text box in the banner.
Pasting the Ad Code into the Web Page
I'm assuming that you've copied the ad code to the Windows Clipboard as described in the preceding section, and you're ready to paste the code into the web page. This is the easy part!
-
Highlight the line where you want to paste the ad code. Your display should look similar to Figure 25.
-
Paste the code by pressing Ctrl+V or selecting Edit, Paste from the menu in your editing software. After pasting, you should see something similar to Figure 26.
Save the edited file.
Figure 25 Highlighting the line where the ad will go.
){kind=link}
Figure 26 After pasting the ad code.
Now, aren't you glad you put in those starting and ending markers for that ad code? When you want to replace this code with yet another advertiser's code, you'll simply highlight everything between the starting and ending markers and paste the new ad code.
Okay, we're ready to make sure that the ad code works correctly. First, let's take a look at the sample web site with the old ad (see Figure 27).
){kind=link}
Figure 27 Our sample web site (http://www.ProfessorF.com).
In your browser, open the web page in which you just placed the new ad. In our sample site, the web page with the new ad looks like Figure 28.
){kind=link}
Figure 28 Web page with new ad.
That's it! You now know how to sign up with an Internet ad broker, sign up with advertisers, and place those advertisers' ads on your web page. You're ready to start making money! However, selecting good ads and properly placing them on your web pages is only the first step to making money through advertising. You still need to instrument your site to increase the chance that users will actually click the ads—within the restrictions set forth by your advertisers, which usually means no bots and no artificial incentives. We'll examine the issue of information payments in next week's article. In terms of the autonomous business model, this looks like Figure 29, steps [3] and [4].
){kind=link}
Figure 29 What we'll cover next.
Until then, have fun looking for and placing good ads in the pages for your personal web business.