ASP.NET

Examples of AdRotator Control in ASP.NET

Today I will explain how to include advertisements in a web application by providing Examples of AdRotator Control in ASP.NET.

To begin with, the AdRotator control displays an advertisement banner on a web page of a website. For this purpose, ASP.NET provides a class known asAdRotator in the namespace System.Web.UI.WebControls.

Hoe Does AdRotator Control Displays Advertisements

In order to display advertisement banners, the AdRotator control needs a collection of advertisements. This collection of Ads is stored in an XML file called the Advertisement file. Once, we create an Advertisement File, the AdRotator control picks an advertisement randomly for displaying on the web page.

What’s more, you can use the same advertisement file in several instances of the AdRotator control. Also, you can use the same file on any of the web page in your application. Hence, the Advertisement File provides you a centralized way of maintaining the advertisements that you want to display on your website.

Format of the Advertisement File

The following listing specifies the format of the Advertisement file.

<Advertisements>  
  <Ad>  
    <ImageUrl></ImageUrl>  
    <NavigateUrl></NavigateUrl>  
    <AlternateText></AlternateText>  
    <Keyword></Keyword>  
    <Impressions></Impressions>  
    <Width></Width>
    <Height></Height>
  </Ad>  
</Advertisements>  

As shown above, the advertisement file begins with the <Advertisements> tag that encloses all advertisement entries. Further, each Ad starts with the <Ad> tag and contains several other tags that describe a particular advertisement.

The <ImageUrl> and <NavigateUrl> tags are mandatory and specify the image of the advertisement and the navigation link to the Ad website respectively. Similarly, the <AlternateText> tag describes the text in case the image doesn’t show. Also, you can filter the Ads on the basis of a keyword using the <Keyword> tag. Furthermore, you can also control how frequently an advertisement should display using the <Impressions> tag. Finally, the <Width>, and <Height> tags can be used to set the dimensions of Ad being displayed.

Examples of AdRotator Control in ASP.NET

The following example shows how an AdRotator control displays the advertisements by picking them randomly from the Advertisement file. As shown below the Ad file contains six Ads of categories – Watch, and Smart Phone. However, the KeywordFilter attribute is not used in this example and used in the next example to filter Ads.

The Advertisement File (AdFile.xml)

<?xml version="1.0" encoding="utf-8" ?>
<Advertisements>
	<Ad>
		<ImageUrl>ad4.jpg</ImageUrl>
		<NavigateUrl>https://www.popularmechanics.com/technology/gear/g19863873/best-cheap-watches/</NavigateUrl>
		<AlternateText>Low Cost Watches</AlternateText>
		<Keyword>Watch</Keyword>
		<Impressions>50</Impressions>
		<Width>900</Width>
		<Height>300</Height>
	</Ad>
	<Ad>
		<ImageUrl>ad5.jpg</ImageUrl>
		<NavigateUrl>https://www.thetrendspotter.net/20-top-luxury-watch-brands-know/</NavigateUrl>
		<AlternateText>Luxury Watches</AlternateText>
		<Keyword>Watch</Keyword>
		<Impressions>5</Impressions>
		<Width>900</Width>
		<Height>300</Height>
	</Ad>
	<Ad>
		<ImageUrl>ad1.jpg</ImageUrl>
		<NavigateUrl>https://www.theverge.com/2013/4/26/4268982/idc-q1-2013-smartphone-market-data</NavigateUrl>
		<AlternateText>Smart Phones</AlternateText>
		<Keyword>Smart Phone</Keyword>
		<Impressions>5</Impressions>
		<Width>900</Width>
		<Height>300</Height>
	</Ad>
	<Ad>
		<ImageUrl>ad2.jpg</ImageUrl>
		<NavigateUrl>https://in.pcmag.com/smartphones/38003/the-best-android-phones-for-2020</NavigateUrl>
		<AlternateText>Best Android Phones</AlternateText>
		<Keyword>Smart Phone</Keyword>
		<Impressions>50</Impressions>
		<Width>900</Width>
		<Height>300</Height>
	</Ad>
	<Ad>
		<ImageUrl>ad6.jpg</ImageUrl>
		<NavigateUrl>https://www.techradar.com/in/news/best-apple-watch</NavigateUrl>
		<AlternateText>Best Apple Watches</AlternateText>
		<Keyword>Watch</Keyword>
		<Impressions>50</Impressions>
		<Width>900</Width>
		<Height>300</Height>
	</Ad>
	<Ad>
		<ImageUrl>ad3.jpg</ImageUrl>
		<NavigateUrl>https://www.bajajfinserv.in/insights/8gb-ram-mobile-phone</NavigateUrl>
		<AlternateText>8GB RAM Mobile Phones</AlternateText>
		<Keyword>Smart Phone</Keyword>
		<Impressions>50</Impressions>
		<Width>900</Width>
		<Height>300</Height>
	</Ad>
</Advertisements>

AdRotator Control in ASP.NET Web Form

 <asp:AdRotator ID="AdRotator1" runat="server"
                 AdvertisementFile="~/AdFile.xml" BorderColor="DarkOrange"
                 BorderWidth="5" BorderStyle="Double" Target="_blank" Height="300"
                 Width="700" BackColor="LightBlue"
                 />

Output

Example of AdRotator Control
Example of AdRotator Control

AdCreated Event

Basically, the AdCreated event is raised as soon as as advertisement is created by the AdRotator control. The following code shows the count of the advertisements created. Whenever the user reloads the page, the Ad count gets incremented.

WebForm1.aspx

<asp:AdRotator ID="AdRotator1" runat="server"
                 AdvertisementFile="~/AdFile.xml" BorderColor="DarkOrange"
                 BorderWidth="5" BorderStyle="Double" Target="_blank" Height="300"
                 Width="700" BackColor="LightBlue" OnAdCreated="TrackAds"
                 />

Keeping Count of the Ads Created

In the following code, the static variable AdsCreated maintains the count of total advertisements created so far.

WebForm1.aspx.cs

public partial class WebForm1 : System.Web.UI.Page
    {
        static int AdsCreated = 0;
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void TrackAds(object sender, AdCreatedEventArgs e)
        {
            AdsCreated++;
            Response.Write("Ads Created: " + AdsCreated);
        }
    }

Output

Handling AdCreated Event
Handling AdCreated Event

Using Keyword Filter

As shown below, the web page contains two advertisement banners with each banner displaying the Ads of a particular category.

WebForm1.aspx

<form id="form1" runat="server">
        <div style="background-color: orange; text-align:center;">
            <asp:AdRotator ID="AdRotator1" runat="server"
                 AdvertisementFile="~/AdFile.xml" BorderColor="DarkOrange"
                 BorderWidth="5" BorderStyle="Double" Target="_blank" Height="300"
                 Width="700" BackColor="LightBlue" KeywordFilter="Smart Phone"/>

        </div>
         <div style="background-color: lightcoral;  text-align:center;">
            <asp:AdRotator ID="AdRotator2" runat="server"
                 AdvertisementFile="~/AdFile.xml" BorderColor="DarkOrange"
                 BorderWidth="5" BorderStyle="Double" Target="_blank" Height="300"
                 Width="700" BackColor="LightBlue" KeywordFilter="Watch"/>

        </div>
    </form>

Output

Example of Keywords and Keyword Filter
Example of Keywords and Keyword Filter

Summary

Basically, AdRotator control is one of the important Web Form control in ASP.NET that is used to display advertisement banners on a web page. This article demonstrates how we can use this control by providing various Examples of AdRotator Control. Also, it also describes the Advertisement file how an Advertisement file is created. Further, it also shows how the Ad file is used to display and filter Ads.


Related Topics

A Brief Overview of Laravel

Overview of MVC architecture in ASP.NET

Examples of Validation Controls in ASP.NET

Leave a Reply

Your email address will not be published. Required fields are marked *