Implementing AdRotator Control in ASP.NET

This article demonstrates how to use the ASP.NET AdRotator control to display advertisements in an ASP.NET Web site. The attached source code also implements custom "click tracking" logic.

 

1. Introduction 

 

Many e-commerce websites use banner advertisements to promote products and services on behalf of their customers. Websites also need to not only display ads but also need to rotate. 

 

ASP.NET AdRotator control allows developers to place image ads on a Web Form and provides programmatic functionality that enables the development of custom logic to track advertisement clicks. The AdRotator control randomly selects banner ads from a list that is specified in an external XML. The XML also has a click URL.

 

2. ASP.NET Website Project

 

First of all, start Visual Studio and create a new ASP.NET Web Site. I'm using Visual Studio 2008. If you're using a newer version of Visual Studio, just create an ASP.NET Website using a Web Form or MVC.

 

Figure 1.

 

3. Create the Ad XML file 

 

Add a new XML File using Add New Item in Visual Studio. Right click on Visual Studio project name in Solution Explorer, Add New Item, and select XML file.

 

 

Figure 2.

 

Add the following code or similar code in the XML. The root node of the XML file is Advertisement and it has multiple Ad tags. Each Ad tag has an ImageURL, NavigateUrl, AlternateText, Impressions, Keyword, and Category. 

 

Note: You need to replace these values with your own values. 

<?xml version="1.0" encoding="utf-8" ?>
<Advertisements>
       <Ad>
            <ImageUrl>~/Banners/468X60_add.gif</ImageUrl>            
            <NavigateUrl>http://www.Mindcracker.com/Registration/Register.aspx</NavigateUrl>
            <AlternateText>Advertisement</AlternateText>
            <Impressions>100</Impressions>
            <Keyword>Header</Keyword>
            <Category>Script</Category>
      </Ad>
      <Ad>
            <ImageUrl>~/Banners/468X60_Consultant.gif</ImageUrl>
            <NavigateUrl>http://www.mindcracker.com/Consultants/</NavigateUrl>
            <AlternateText>Advertisement</AlternateText>
            <Impressions>100</Impressions>
            <Keyword>Header</Keyword>
            <Category>Script</Category>
      </Ad>
      <Ad>
            <ImageUrl>~/Banners/468X60_Employer.gif</ImageUrl>
            <NavigateUrl>http://www.Mindcracker.com/Registration/Register.aspx</NavigateUrl>
            <AlternateText>Advertisement</AlternateText>
            <Impressions>100</Impressions>
            <Keyword>Header</Keyword>
            <Category>Script</Category>
      </Ad>
      <Ad>
            <ImageUrl>~/Banners/468X60_Jobseeker.gif</ImageUrl>
            <NavigateUrl>http://www.mindcracker.com/Jobs/</NavigateUrl>
            <AlternateText>Advertisement</AlternateText>
            <Impressions>100</Impressions>
            <Keyword>Header</Keyword>
            <Category>Script</Category>
      </Ad>
      <Ad>
            <ImageUrl>~/Banners/468X60_Recruiter.gif</ImageUrl>            
            <NavigateUrl>http://www.Mindcracker.com/Registration/Register.aspx</NavigateUrl>
            <AlternateText>Advertisement</AlternateText>
            <Impressions>100</Impressions>
            <Keyword>Header</Keyword>
            <Category>Script</Category>
      </Ad>
</Advertisements>

 

XML file elements:

• ImageUrl - The image that will be displayed. This can be a relative link or a fully qualified internet URL.
• NavigateUrl - The link that will be followed if the user clicks the banner.
• AlternateText - The text that will be displayed instead of the picture if it cannot be displayed. This text will also be used as a tooltip in
• some newer browsers.
• Impressions - A number that sets how often an advertisement will appear.
• Keyword - A Keyword that identifies a group of advertisement.
• Category - Used when have multiple categories. 

4. Place an AdRotator Control

 

Drag and drop and Ad Rotator control from the Toolbox to the Web Form. The code will look like this without the AdvertisementFile. Set its value to our Ad file.

<asp:AdRotator ID="AdRotator1" runat="server" Target="_blank" />

The actual AdRotator class provides a limited set of properties. You specify both the appropriate advertisement file in the AdvertisementFile property and the type of window that the link shouls follow in the Target property. You can also set the KeywordFilter property so that the banner will be chosen from entries that have a specific keyword.

 

5. Bind XML File 

 

There are two ways to bind the XML file on a page.

 

First is to drag and drop an XML Data Source from the Toolbox to the Web Form and configure it with our Ad XML file we've created earlier. The final code will be added to the page looks like this:

<asp:XmlDataSource ID="XmlDataSourceAd" runat="server"
DataFile="~/Advertise.xml">
</asp:XmlDataSource>
<asp:AdRotator ID="AdRotatorHeader" runat="server" KeywordFilter="Header"
OnAdCreated="AdRotatorHeader_AdCreated" Target="_blank" DataSourceID="XmlDataSourceAd"/>
<asp:Label ID="LabelHeaderScript" runat="server" Visible="False"></asp:Label>
protected void AdRotatorHeader_AdCreated(object sender, AdCreatedEventArgs e)
{
try
{
if (e.AdProperties["Category"].ToString() == "Script")
{
LabelHeaderScript.Text = e.AdProperties["ImageUrl"].ToString();
LabelHeaderScript.Visible = false;
AdRotatorHeader.Visible = true;
}
}
catch (Exception ex)
{
string str = ex.Message;
AdRotatorHeader.Visible = false;
}
}

Alternatively, you could just set the AdvertisementFile property of the AdRotator and the value is our Ad XML file we created earlier. 

<asp:AdRotator ID="AdRotator1" runat="server" AdvertisementFile="~/Advertise.xml" Target="_blank" />

6. Build and run

 

Now build and run your application.

 

The output should be like this. The ads are being displayed in the control.

After refreshing page then you will see a different image. The images are loaded randomly. 

 

Summary

 

In this article, we learned how to use the ASP.NET AdRotator control to display banner ads in a Website.