Creating a Banner Ad System

  • Article

This content is no longer actively maintained. It is provided as is, for anyone who may still be using these technologies, with no warranties or claims of accuracy with regard to the most recent product version or service release.

 

David Berry

March 2003

Applies to:
    Microsoft® Internet Information Services
    Microsoft FrontPage®
    Microsoft ASP.NET

Summary: Learn how to create a banner ad system using a database and Active Server Pages (ASP); and how to use Microsoft ASP.NET and XML to create a banner. This article will briefly introduce the Microsoft Internet Information Services (IIS) Ad Rotator component, the Microsoft FrontPage Banner Ad Manager component, and the Microsoft bCentral Banner Network ad service. (12 printed pages)

Contents

Introduction
IIS Ad Rotator Component
Creating the Rotation Schedule File
Creating the Banner ASP Page
FrontPage Banner Ad Manager
bCentral Banner Network Ad Service
Data-driven Ad Banner Systems Using Active Server Pages
ASP.NET AdRotator
Conclusion

Introduction

One of the most popular forms of advertising on the Internet is rotating banner advertisements. A rotating banner system, as opposed to a static one, allows you to sell many more banner ads on your site. Another major advantage of using a banner rotation system is that you do not need to manually edit each page once a customer's contract has expired or a new contract begins. And the system can be spanned over multiple pages.

A well-designed banner ad system helps you easily supply your advertisers with information about their advertising campaigns and makes banner management on your site easier and more efficient. There are several ways to create a banner ad system. This article will briefly introduce three of the most common ways of creating banner ad systems: the Microsoft® Internet Information Services (IIS) Ad Rotator component, the Microsoft FrontPage® Banner Ad Manager component, and the Microsoft bCentral™ Banner Network ad service. We then will focus on how to create a banner ad system using a database and Active Server Pages (ASP). We'll follow up with a look at how to use Microsoft ASP.NET and XML to create a banner.

**Note   **For security information about working with Web sites and Web servers, see FrontPage Security Best Practices.

IIS Ad Rotator Component

The Ad Rotator is an ActiveX®-based DLL component included in Microsoft Internet Information Services, the Web server built into Windows 2000 Server. This Component Object Model (COM) component provides the functionality to load banners and banner definitions from a text file, including the alternate text, image size, and image location.

Although the Ad Rotator is very easy to use, it can't do everything that most banner ad systems need to do. While the Ad Rotator is very good at providing a basic means for rotating ads, it lacks the ability to track statistics such as the number of impressions and click-throughs. To get these functions, you will need to implement a more complex banner ad system like the one that will be discussed later in the section "Data-driven Ad Banner Systems Using Active Server Pages."

The Ad Rotator component has only a few properties and one method. These are outlined below, with a brief description of their usage and functionality.

Ad Rotator Properties

Border Specifies the border attribute of the image tag that is displayed
Clickable Specifies if the banner has a link to a URL
TargetFrame Specifies the location where the advertisement will be displayed, such as in a frame or a new window

Ad Rotator Method

GetAdvertisement This method is passed the location of the banner definition file and creates the Image tag and Target tag (if applicable)

Creating the Rotation Schedule File

The first step in creating an ad banner system using the Ad Rotator component is creating the Ad Rotator rotation schedule file, a text file that stores all your banner ad information. Because the data is stored in one text file, when changes need to be made, you need to change the data in only one location. You then can create an ASP page to send the data in the rotation schedule file to the Ad Rotator component. The component then selects an ad for display.

The Ad Rotator rotation schedule file is divided into two sections that are separated by an asterisk (*). The first section provides information common to all the ads to be displayed. The second section lists data relevant to each ad.

The following is an example of the structure of an Ad Rotator rotation schedule file. Placeholder copy is italic:

REDIRECT url
WIDTH integer
HEIGHT integer
BORDER integer
*
imageURL
linkURL
alternate text
impressions

The first four lines of the file are optional. These parameters affect all the banners listed in this text file. So, if you set WIDTH to 460, all the banners in this text file will be shown at a width of 460 pixels. The REDIRECT parameter, if set, indicates where the user will be sent when the banners are clicked.

The next line in the file is mandatory and must be present even if the above four lines are not. The line consists of a single asterisk (*), and it must appear on a line by itself.

After the asterisk, you will need four lines for each banner in your rotation. The first line is the location of the banner ad image (imageURL); the second line is the URL that you want visitors to be sent to once they click the banner (linkURL); the third line is the alternate text that you want for the banner (the text that will show when the user moves the pointer over the banner); the fourth line is a numeric value indicating the "weight" of the ad (how often you want the banner to be displayed). For example, if you put 10, the banner is shown 100 percent of the time; if the value is 5, it's shown 50 percent of the time).

For each banner that you want in your rotation, you simply repeat the following five lines.

*
imageURL
linkURL
alternate text
impressions

For example, you may call your rotation schedule file myBanners.txt. A sample file might look like this:

REDIRECT adbanners.asp
WIDTH 480
HEIGHT 60
BORDER 0
*
http://www.blueyonderairlines.com/banner.gif
http://www.blueyonderairlines.com
Visit Blue Yonder Airlines's Site
4
http://www.cohovineyard.com/banner.gif
http://www.cohovineyard.com
Take Coho Vineyard's Virtual Tour!
4
http://www.alpineskihouse.com/banner.gif
http://www. alpineskihouse.com
Visit the Alpine Ski House store
2

In the above example, the blueyonderairlines.com and cohovineyard.com banners each will be displayed 40 percent of the time and alpineskihouse.com's banner will be displayed 20 percent of the time.

You can create the Ad Rotator rotation schedule file in Notepad and then import it into your Web site with a .txt extension. You also can create a .txt file in the FrontPage Web site creation and management tool.

To create a .txt file after typing your text in HTML view

  1. On the File menu, click Save As.
  2. In the Save As Type drop-down list, choose All Files.
  3. In the File Name text box, type the name of your file followed by .txt.
  4. Click Save.

Creating the Banner ASP Page

To create a page to display your banner, open FrontPage and create a new page with an .asp file extension. Then switch to HTML view and add the following lines of code. You can insert this code anywhere on the page, but it is good practice to put it before the <HTML> tag.

<% 'Declare our Variable
Dim objAdBanner
 'Create the component
 Set objAdBanner = Server.CreateObject("MSWC.AdRotator")
 'Get the ad from myBanners.txt and write the link
 Response.Write objAd.GetAdvertisement("myBanners.txt")
 'Destroy the object
 Set objAd = Nothing
%>

This code generates the link with the image tag, and then writes it to the page. You then need to create the redirection file that will redirect the user to the link in the linkURL section of the Ad Rotator rotation schedule file:

<% Response.Redirect Request.QueryString("URL") %>

Finally, we need the HTML that will display the ad. We will create an instance of a Microsoft Web class called MSWC.AdRotator and call the GetAdvertisement() method:

<html>
<body>
<H1>AdRotator in Classic ASP</H1>
<%Set ad = Server.CreateObject("MSWC.AdRotator")%>
<%= ad.GetAdvertisement("myBanners.txt") %>
</body>
</html>

That's all there is to it. All the work of randomly selecting a banner ad is done for you by the Ad Rotator component. For more information about how to use the Ad Rotator Component with Microsoft FrontPage, see How to Use the ASP Ad Rotator Installable Component in FrontPage 2002.

FrontPage Banner Ad Manager

Microsoft FrontPage features two types of banner ad management components. The first is the Banner Ad Manager, which uses the FrontPage Server Extensions. The other is an external service from the Microsoft bCentral small-business portal. The key difference between the two is that with bCentral, your banners will be displayed on other member sites that are on the LinkExchange™ Banner Network. You must sign-up for an account with bCentral to take advantage of the bCentral Banner Network Ad service.

The built-in support for banner ads in FrontPage makes it very easy to create a quick advertisement system for your Web site.

Important   The Banner Ad Manager is not a default menu option in FrontPage 2003. To enable the Banner Ad Manager in FrontPage 2003, see About the Banner Ad Manager.

To use the Banner Ad Manager

  1. On the Insert menu, click Web Component.
  2. In the left pane, select Dynamic Effects. In the right pane, select Banner Ad Manager.
  3. Click Finish, and the Banner Ad Manager Properties dialog box will open.

In the Banner Ad Manager Properties dialog box, you can set the size of your banners, add transition effects, specify how you want the ads to alternate on the page, and add the ad images and links. All banners will be shown in the order that they are listed in the Banner Ad Manager Properties dialog box, in a continuous loop. Unfortunately, the Banner Ad Manager does not allow you to define individual links for each image. You can send your visitors to only one URL. You may want to have the link go to a separate page that lists all your advertisers and information about them.

**Note   **When you use this FrontPage component, keep in mind that it is a Java applet and may not display correctly in older browsers. For more information and to install the Banner Ad Manager, see About the Banner Ad Manager.

bCentral Banner Network Ad Service

Now that you've seen how to use the FrontPage Banner Ad Manager component, I'll briefly describe the bCentral Banner Network. bCentral Web components are shipped with FrontPage and are easily accessed through the Insert menu under Web Components. To take advantage of bCentral's Web components, however, you must already have established an account with bCentral. This banner exchange network is a cooperative advertising program where participants work together to advertise each other's Web sites, products, or services.

The following steps assume that you have already set up an account with bCentral.

To add a bCentral default ad to your site

  1. On the Insert menu, click Web Component.
  2. In the left pane, select bCentral Web Components. In the right pane, select bCentral Banner Ad.
  3. Click Finish, and you will see the bCentral Banner Ad Properties dialog box.
  4. Click Next. On the Account Options page, you will need to create a new account or choose an existing one.
  5. After you have finished this process, you can create your default ad.
  6. Click Next and then click Finish to complete the process.

The bCentral component will add the necessary HTML code to your Web page. You then can log into your account at bCentral to upload a banner ad, change your banner, and check the status of your account and advertisement campaign.

Now that we've looked at how to create simple banner rotation systems using the IIS Ad Rotator component, the FrontPage Banner Ad Manager component, and the bCentral Banner Network ad service, it's time that we look at a more customizable, powerful solution: a custom, data-driven banner rotation application.

Data-driven Ad Banner Systems Using Active Server Pages

This section covers some of the things that you can do when you use a database back end rather than the Ad Rotator component and its text file back end. You also will have more options for customizing the display of banners than you have when you use the FrontPage Banner Ad Manager or bCentral ad service.

Advantages of a Database

There are two primary advantages to using a database to store banner definitions. First, a database is flexible. Second, it is very easy to build a Web-based administration system for the banners. This makes the administration of the system accessible from anywhere in the world.

Database Table Definitions

The banner ad database holds the information, outlined in the table definitions that follow, needed to run the banner ad system. You can use Microsoft Access or SQL Server™ to create your tables, and FrontPage to create your ASP pages.

The first table—let's call it BannerAds—will contain information about the ads, such as the location of the image, the URL for the advertiser's site, and the alt text to display when a user passes the pointer over the ad.

Let's call the next table BannerImpressions. This table contains information about the number of impressions. Every time a banner is shown, a record is added to this table.

The BannerClicks table contains information about each click-through. Each time a visitor clicks an ad, a record will be added to this table with the name of the ad and the time that the ad was clicked.

Each of these tables is related to each other. The BannerAds table and the BannerImpressions table have a one-to-many relationship. Each of the records in the BannerAds table can have more than one record in the BannerImpressions table.

The BannerAds table also is in a one-to-many relationship with the BannerClicks table. Each banner ad can be clicked by more than one visitor.

Database Table Fields

The BannerAds table has the following fields:

Field Name Field Type Length
BannerID AutoNumber  
ImagePath Text 100
URL Text 100
AltText Text 255

The BannerID field is the primary key for the table. The ImagePath field stores the location of the image on your Web site, such as /images/ads/mybanner.gif. The URL field holds the link to the advertiser's page, such as http://www.cohovineyard.com. And the AltText field contains the text that a visitor will see when he or she moves the pointer over the image.

The BannerImpressions table has the following fields:

Field Name Field Type
ImpressionID AutoNumber
BannerID Number
DateClicked DateTime

The ImpressionID field is the primary key for this table. The BannerID field is the foreign key that links this table to the BannerAds table in a one-to-many relationship. The DateClicked field holds the date and time that the ad appeared—was impressed—on your site.

The BannerClicks table has the following fields:

Field Name Field Type
ClickID AutoNumber
BannerID Number
DateClicked DateTime

The ClickID field is the primary key for this table. The BannerID field is the foreign key that links this table to the BannerAds table in a one-to-many relationship. The DateClicked field holds the date and time that a visitor clicked an ad.

ASP Code for the Banner Ad

This section will show, step by step, the code for creating and implementing the ad banner pages. The first piece of code gets an ad to randomly display and also adds a record to the BannerImpressions table for that ad.

<%@ Language=VBScript %>
<% 
'Declare our Variables
Dim objConn, objRSNumber, objRSImage
'Create a connection to the Database
set objConn = server.createobject ("adodb.connection")
objConn.open - <YOUR CONNNECTION STRING OR DSN STRING>
'Randomly choose an Ad to display
set objRSNumber = conn.Execute("SELECT Max(BannerID) as MaxID 
   FROM BannerAds")
Randomize
RecordNumber = CInt(objRSNumber ("MaxID") * Rnd + 1)
'Use the Random number to get a single record from the BannerAds table
set objRSImage = conn.Execute("SELECT * FROM BannerAds " _
   & "WHERE BannerID = " & RecordNumber)
'Finally, insert a record into the BannerImpressions table to 
      indicate 'that this Ad has been shown
objConn.Execute "INSERT INTO BannerImpressions (BannerID, DateClicked) 
      values (" _
   & RecordNumber & ", '" & Now & "')"
%>

The information about this ad is contained in the HTML portion of our page:

<a href="ShowAd.asp?BannerID=<%=objRSImage("BannerID")%>">
   <img src=<%=Trim(objRSImage("ImagePath"))%> border="0", 
      Alt="<%=Trim(objRSImage("AltText"))%>"</a>

In the above code, BannerID is being passed to the ShowAd.asp page when a visitor clicks the ad. The image tag is also being generated from the information in our database.

The ShowAd ASP Page

The ShowAd.asp page has no HTML output. The code on this page adds a record to the BannerClicks table and then sends the visitor to the advertiser's Web site:

<%@ Language=VBScript %>
<%
'Declare our Variables
Dim objConn, objRS
'Create a connection to the Database
set objConn = server.createobject ("adodb.connection")
objConn.open - <YOUR CONNNECTION STRING OR DSN STRING>
'Add a record to the BannerClicks table to indicate that this Ad has 'been clicked
objConn.Execute "INSERT INTO BannerClicks (BannerID, DateClicked) values (" _
   & Request.QueryString("BannerID") & ", '" & Now & "')"
'Get the URL of the Web site for this Ad
set objRS = objConn.Execute("SELECT URL from BannerAds " _
   & "WHERE BannerID = " & Request.QueryString("BannerID"))
'Redirect the visitor to the Advertiser's Web site
Response.Redirect objRS("URL")
%>

As you can see, creating a banner ad system can be quite easy. In addition, the system is flexible enough that you can easily expand it. For example, you may want to create a page for your advertisers to see how many times their ad has been shown and how many people clicked it.

ASP.NET AdRotator

The final example that we will talk about is the new ASP.NET AdRotator, which is one of the rich controls that is a part of ASP.NET. Using this control is very easy. Like the IIS Ad Rotator component, it requires a rotation schedule, but it's in the form of an XML file (like many things in ASP.NET). The benefit of this new design is that it is easy to extend the functionality of the control by adding new elements to the XML file.

The first step is to build the XML file that the AdRotator will use to determine the ads to display. The root element of the XML file is called Advertisements. This element has one or more child elements called Ad. Each Ad element contains a number of child elements that define the ad.

**Note   **XML is case sensitive.

An example file—let's call it MyAds.xml—would look like this:

<Advertisements>
   <Ad>
      <ImageUrl>images/banner1.gif</ImageUrl>
      <href>http://www.xyz.com</href>
      <AlternateText>Our first ad banner</AlternateText>
      <Impressions>5</Impressions>
   </Ad>

   <Ad>
      <ImageUrl>images/banner2.gif</ImageUrl>
      <href>http://www.microsoft.com/FrontPage</href>
      <AlternateText>Get FrontPage Now!</AlternateText>
      <Impressions>5</Impressions>
   </Ad>
</Advertisements>

Each ad is a child of the Advertisements root element. Each ad contains the following child elements that describe the ad:

  • ImageUrl—the URL path to the image to display
  • href—the URL to link to
  • AlternateText—the text to use in the ALT attribute of the HTML IMG tag
  • Impressions—which indicates the relative weighting for the ad

There also is an optional element called Keyword, which is used to specify a category for an ad. Adding the code to generate your ads is very easy. The code for this page—let's call it MyBannerAds.aspx—is as follows:

<%@ Page Language="VB" %>
<html>
<body>
<H1>AdRotator in ASP.NET</H1>
<asp:AdRotator id=myAdRotator runat=server
   AdvertisementFile="MyAds.xml"
   BorderWidth=2
   />
</body>
</html>

As you can see, you simply place the Ad Rotator control on the page and specify a couple of properties. The AdvertisementFile property points to the XML file that we created above. The control randomly chooses an ad from the XML file and renders it in HTML output according to the ad elements.

The new ASP.NET AdRotator is very easy to use and requires less overhead than the classic ASP AdRotator. By listing the ads in an XML file, you can easily add more elements to extend the functionality of the Ad Rotator Control.

Conclusion

There are many ways to create a banner ad system, and there are advantages and disadvantages to each. By developing your own custom system, you can manage your advertising campaign more easily and offer your advertisers more features and a better value for their money.