Flash Banners and Tracking Ad Clicks with AdRotator Control

October 24th, 2007

ASP.NET developers have an easy out of the box solution to display and manage banner ads, it’s the well known server control AdRotator. AdRotator displays randomly selected advertisement banner on the web page and the displayed advertisement changes when the page is refreshed.

Working with AdRotator is straightforward:

  • Place the control on the web page,
  • Define the list of banners in XML file,
  • Set AdvertisementFile property to the location of the XML file containing advertisement information.

That’s all the work you need to have banners on your web site. It’s nice and simple, but soon you will find some limitations of AdRotator:

  1. It can display only image banners – you cannot use flash banners.
  2. There is not an easy way to track clicks on your ads.

This can be a problem for web site developers, because a significant percent of the ads you find on the web today are flash banners.
The solution is to extend the control, and create an inherited asp.net web control, doing this we retain all the functionality of the AdRotator and we add some new.

A More Powerful AdRotator Control - BannerRotator

BannerRotator is an inherited ASP.NET 2.0 web control, written in C#, which enables you to have flash banners on your page and an easy way of tracking banner clicks. You can download a sample project and start using it now.
To use it on your own web site just copy UIControls.dll to your bin folder, after that you can add this dll to the toolbox in Visual Studio and drag and drop BannerRotator on your page, alternatively you can manually register the control on the page.

Here is a sample code for Default.aspx page.

<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”Default.aspx.cs” Inherits=”_Default” %>
<%@ Register Assembly=”UIControls” Namespace=”Sotirovic.Web.UI.UIControls.Banners”
    TagPrefix=”sotirovic” %>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” >
<head runat=”server”>
    <title>BannerRotator Sample</title>
</head>
<body>
    <form id=”form1″ runat=”server”>
    <div>
        <sotirovic:BannerRotator ID=”BannerRotator1″
        AdvertisementFile=”~/App_Data/banners.xml” runat=”server” />
    </div>
   </form>
</body>
</html>

And this is a sample banners.xml file where you define banners:

<?xml version=”1.0″ encoding=”utf-8″ ?>
<Advertisements>
  <Ad>
    <ImageUrl>~/Banners/blog-misha.swf</ImageUrl>
    <NavigateUrl></NavigateUrl>
    <AlternateText>ASP.NET Blog</AlternateText>
    <Impressions>100</Impressions>
    <Width>468</Width>
    <Height>100</Height>
  </Ad>
</Advertisements>

How does it work?

By using Microsoft .NET documentation for AdRotator functionality and specification we can find the methods we should inherit to achieve desired functionality. In this case it’s the most suitable to override Render and OnAdCreated methods.

Note: Code below is a short version of the code definition and it’s only used to explain the principles how BannerRotator control works. You can find the complete C# code for BannerRotator and code for FlashBanner on my blog. If you are a Visual Basic developer you can also use the control, you can find the precompiled assembly in the sample project

First, to enable a use of flash banners we need to override Render method:

protected override void Render(HtmlTextWriter writer)
{
    if (IsFlashBanner)
    {
        RenderFlashBanner(writer);
        return;
    }
    base.Render(writer);
}

In IsFlashBanner property we check whether the file path provided in ImageUrl tag is a path to the flash file:

protected bool IsFlashBanner
{
    get
    {
        if (selectedAdvertArgs.ImageUrl.EndsWith(flashFileExtension, true, CultureInfo.InvariantCulture))
        {
            return true;
        }
        return false;
    }
}

Tracking Banner Clicks

To achive our second goal, easy tracking banner clicks, we need to override OnAdCreated method:

protected override void OnAdCreated(AdCreatedEventArgs e)
{
    base.OnAdCreated(e);
    selectedAdvertArgs = e;
    ResolveTrackingUrl();
}

ResolveTrackingUrl is a private method used to create tracking url. Tracking url is defined in NavigateUrlBase property, for example, NavigateUrlBase = “~/ban-click.aspx?url={0}”. Of course, this is not mandatory. If you don’t want to use it, just don’t specify NavigateUrlBase.

private void ResolveTrackingUrl()
{
    if (String.IsNullOrEmpty(navigateUrlBase)) { return; }
    if (selectedAdvertArgs == null) { return; }
    if (String.IsNullOrEmpty(selectedAdvertArgs.NavigateUrl)) { return; }
    if (IsFlashBanner) { return; }

    selectedAdvertArgs.NavigateUrl = String.Format(navigateUrlBase, HttpContext.Current.Server.UrlEncode(selectedAdvertArgs.NavigateUrl));
}

You can define your own logic in ban-click.aspx page to save clicks to a log file, database or any other persistent media.

Conclusion

In this article we looked how to extend AdRotator control and get some new functionality. With BannerRotator web server control you can take full control over your ad management, use image and flash banners and track user’s clicks.

Entry Filed under: Web Controls

4 Comments

  • 1. matt  |  October 25th, 2007 at 16:45

    Nice job, the control works well,
    there is one thing I’d like to mention.
    For flash files with embedded links you must include tracking url in the flash link to track clicks. For example, here it would be /ban-click.aspx?url=ad’s url

  • 2. Dexter  |  November 28th, 2007 at 21:59

    Very nice. Applying SQL was very easy too. The only improvement I could suggest would be to add an ActiveX fix.
    Thank you!

  • 3. Tush  |  December 1st, 2007 at 0:24

    Its not working. please give some advise why its not working. I do whatever you say but cant display flash file only displayed jpg file…

    plese give reply……..
    thanks

  • 4. misha  |  December 2nd, 2007 at 4:21

    Tush, I’ll try to give you some tips, check whether the paths to flash files are correct. Also, as with AdRotator, ads are displayed randomly and there is Impression property to control how often an advertisement is selected relative to the other advertisements in the advertisement file.
    You can try the sample project I provided in my blog, it’s tested and it works.

Recent Posts

Recent Comments

Tags