Building an In-Text Advertising System Under ASP.NET 3.5

What is In-Text Advertising?

In general, contextual advertising refers to the inclusion of advertisements adjacent to relevant online context (e.g., Google AdSense). In-text advertising, however, places hyperlinks directly into the text of the web page. On the whole, most in-text advertising bears the following characteristics:

1. The text associated with an advertisement is identified by a double underline to differentiate it from regular hyperlinks.

2. An in-page window containing advertising content appears when the cursor is positioned over the corresponding text.

Figure 1 below shows a typical in-text ad in use.

Figure 1-the cursor moves over a double underlined keyword and then pops up a related window to give more details

To a more extensive degree, in-text advertising related techniques can give advertisers the ability to target consumers through keywords and deliver text, image, and video- or flash-animated advertisements. Publishers can monetize the content of their site without sacrificing additional space. To gain an intuitive impression, you can browse networks such as Vibrant Media or Kontera to see what  real in-text ads look like.

In this article, we are going to construct a simple in-text advertising application, through which website owners can register accounts and apply for advertisements inside their websites to obtain extra income. In this application, the administrator can control the contents of the in-text advertisements, as well as count and charge the advertising data.

Author's Note: To follow along with the sample in this article, you're assumed to have installed the following environments: Windows XP Professional and Visual Studio 2008 (with the built-in support for SQL Server 2005 Express Edition).

Requirements

On the whole, a network advertising system mainly deals with the following three types of users:

1. The website owner, who bears the responsibility of placing ads on his website and obtains income when surfers browse or click the related in-text ads.

2. The advertiser, who pays the ad fee and offers related content to propagandize for some project or product.

3. The system administrator, who takes charge of maintaining the normal running of the advertising system, and distributes the advertiser's ad rate to all of the website owners according to the factual effects of the ads.

Figure 2 below illustrates the relationships between the above three types of users.

Figure 2-the relationships between the website owner, advertising host and administrator

Next, let's detail our system requirements and related information.

In-Text Advertising System Requirements

In general, the in-text ads are placed around the center of web pages, and come with a double underline to differentiate them from normal links. Once the user rolls the mouse over the link, the ad will pop. Should the user click on it, the site owner will make some money. Therefore, the core data of the in-text ad system are the ad key words and concrete contents.

The users of this sample system are similar to most ad systems, with the users divided into three types, i.e. website owners, advertisers, and the administrator. Accordingly, this ad system is composed of three parts: the user center for the website owners, the user center for the advertisers, and the core of the system.

Above all, as the most important part of the system, the core, seeks to maintain the ad keyword and contents, to generate the ad code, record the ad data and related fees, distribute various resources reasonably, and supervise the actions of various users. Since this is the crucial part of the sample application, the core code lies herein.

Second, the user center of the website owner's related tasks let the site host get the ad code freely, consult the achievements of his own ad system, apply for an ad rate, modify his personal profiles, and so on.

Third, the user center of the advertiser's related tasks enable them to pay the ad rate for their own advertisements; choose and apply for new ad keywords to place; add, edit, and remove their own ad contents; consult their own ad data, and so forth.

To make things easy to understand, in this application we tried to simplify the design of the in-text advertising system to the greatest degree. In this case, we put the advertiser user center and system administration together, and only provided support for the two parts of the ad keywords and contents. Moreover, the user center for the website owners also provided support for getting the ad-related code and viewing the ad data.

Next, let's take a look at the general situation of the system, the basic usage of the system, and the final in-text ad effect.

The General Situation

To gain the aim of embedding an in-text ad inside a special web page, you just need to insert the following code at the far bottom of the page:

<script type ="text/javascript" >var username='222'; </script>

<script type="text/javascript" src="js/getad.js"></script>

Here, the variable "username" is the unique identifier used by the website owner to make ad-related statistics.

Then why select to put the above code at the far bottom of the page? This mainly prevents the possibility of the ad code deferring the loading of the page. Suppose that you put the above code at the top of the page; when the current web page is loading, the first item to load is the ad code, and only when the ad- related code is loaded can the page be rendered. Obviously, this should be avoided, or it may make the page seem slow to load and even "dead," which is of course converse of the original idea of the website owner. Thus, it's highly suggested that the ad code be put at the far bottom of the page, which will not tamper with the normal loading and rendering of the page even if the ad code cannot be shown.

Figure 3 indicates one of the run time snapshots of the in-text advertising application in use.

Figure 3-the in-text advertising application in use

Next, let's start to resolve the architecture of the application system.

System Architecture

In this case, for readers to gain a clearer insight into the system, we'll first illustrate the related architecture diagram, as shown in Figure 4 below.

Figure 4-the rough architecture of the system

As you've seen, the in-text ad application is a typical three-tier system. Moreover, it's a client-centric  application with lots of client-side JavaScript programming.

Next, it's also necessary to look at the folder structure of the website, as shown in Figure 5 below.

Figure 5-the file and folder structure of the website

For more details about the roles and functions of each of the files in Figure 5, please refer to the Table 1 listed below.

Table 1-the detailed explanation of the system files

Next, we'll shift our attention to the database design.

Database Design

As introduced above, the main data contained in the in-text ad system includes: ad keywords, the ad contents associated with the special keyword, the ad hitting record, and the website owner's information. Therefore, the database (in this case named 'ad.mdf') mainly involves four tables, i.e.keyArray,ad,hit, andsiteUser, respectively.

Table Structure Definitions

Next, let's delve into the above four tables one by one.

1. keyArray

The keyArray table is used to persist all the ad keywords. Note, for simplicity, we've not classified the keywords, while in real-life scenarios you must. Here are the descriptions of each of the fields defined in thekeyArray table:

• Id: the id of the ad keyword

• Name: the name of the ad keyword

• Notes: remarks on the ad keyword

More detailed information on the above fields is shown in Figure 6.

Figure 6-the structure for the keyArray table 

2. ad

The ad table is used to persist all of the ad keyword related contents. In this case, per ad content will be rendered in a double-underlined hyperlink form. Here are the descriptions of each of the fields defined in the keyArray table:

• Id: the id of the ad keyword related content

• Keyid: the id of the corresponding keyword

• Description: the link text of the ad content

• url: the link address of the ad content

More detailed information on the fields is shown in Figure 7.

Figure 7-the structure for the ad table

3. hit

The hit table is used to record information related to ad clicks. Here are the descriptions of each of the fields defined in thehit table:

• Id: the id of the record clicked

• UserName: the account of the website owner

• url: the advertiser's website address

• Datetime: the date and time of the ad click

More detailed information on the fields is shown in Figure 8.

Figure 8-the structure for the hit table

4. siteUser

The siteUser tableis used to save the information related to the website owner. For simplicity, we've only provided a few fields defined in the siteUser table:

• Id: the id of the special website owner related information

• UserName: the login account of the website owner

• Userpass: the login password

More detailed information on the fields is shown in Figure 9.

Figure 9-the structure for the siteUser table

Procedures

Finally, let's take a quick look at the stored procedures used in this system.

Stored Procedure Definitions

In the ad.mdf database in our system, we've only defined one stored procedure nameduserlogin. For simplicity, we've merged the website owner related registration and login into one module. In detail, when the website owners enter their accounts and passwords, then their accounts will be checked out. If the account already exists in the database, then the user will be allowed to log in; otherwise, this account will be registered.

So, as you've seen, the above functions mainly rest upon the userlogin stored procedure. The following gives its related script code:

/*return 1, if register successfully; return 2, if login successfully;return 3, if the password is invalid*/

ALTER PROCEDURE userLogin

(

@username nvarchar(50),

@userpass nvarchar(100)

)

AS

declare @pass nvarchar(100)

set @pass='0'

select @pass=userpass from siteuser where username=@username/*query the password*/

if @@rowCount=0 begin/*not found the account, then add it*/

insert into siteuser(username,userpass)values(@username,@userpass)

return 1

end

else if @pass=@userpass /* the password is correct, and login successfully*/

begin

return 2

end

else return 3/*the password is invalid*/

Since we've provided detailed explanations between the lines, it's unnecessary to waste any more words here.

-DOWNLOAD SOURCE-

Summary

In this installment, we first explained the concept of in-text advertising, and then learned the general requirements of the sample system we will develop. Next, we introduced the architecture of the whole sample system. Lastly, we gave detailed explanations for each of the tables defined in the sample database ad.mdf.

As you've probably figured out, the in-text advertising system is surely an interesting and useful application. In the next installment, we'll start to delve into core code programming.