Using the AdRotator Control

Expression Web Designer offers an easy way to add rotating ads (or any images).  In this tutorial, we'll be creating an ASP.NET web page that uses an AdRotator control to randomly display ads.  This page will use an XML file to define the ads that will rotate. 

With an ".aspx" page open in design mode, find the AdRotator control in the ASP.NET Controls section of the Toolbar, and drag and drop the control to the area of your page where you'd like the ad to appear.

 

Click the dropdown arrow for "Choose Data Source" and pick "<New data source...>".  On the next display, choose "XML File". 

You can change the name of the ID if you like (optional), otherwise, click OK.  In the next window, enter the name of the xml file (and path if necessary) which contains the AdRotator information and click OK.

For the AdRotator control to work with an XML file, the XML file will need to include several attributes.  In this example, the XML file (ads.xml) looks like below: 

<?xml version="1.0" encoding="utf-8" ?>

<Advertisements> 
  <Ad>
      <ImageUrl>ads/ad1.jpg</ImageUrl>
      <NavigateUrl>http://www.mysite.com/url1</NavigateUrl>
      <AlternateText>
         My site ad1
       </AlternateText>
      <Impressions>1</Impressions>
   </Ad>
  <Ad>
      <ImageUrl>ads/ad2.jpg</ImageUrl>
      <NavigateUrl>http://www.mysite.com/url2</NavigateUrl>
      <AlternateText>
         My site ad2
       </AlternateText>
      <Impressions>3</Impressions>
   </Ad>
</Advertisements>

The Root element, "Advertisements" contains the other tags: "Ad", "ImageUrl", "NavigateUrl", and "AlternateText", and "Impressions".  Each "Ad" tag represents a unique ad (or image).  In the fist "Ad" tag above, the "ImageUrl" tag points to "ads/ad1.jpg".  This defines the first rotating ad as being the "ad1.jpg" file located in the "ads" directory. 

The next tag, "NavigateUrl" defines what URL the user will go to if the ad is clicked on.  In this case, if a user clicks on the "ad1.jpg" image, then the browser will navigate to http://www.mysite.com/url1   The "AlternateText" tag behaves just like the HTML "alt" tag for images and will display the listed text when the cursor is over the image.

The "Impressions" tag is a weighted number which defines how frequently the ad will appear in the rotation of ads. For instance, in the example above, "ad2.jpg" is weighted with "3" and will appear three times more often than "ad1.jpg" which is only weighted at "1".   After saving this XML file and your aspx web page, your page should now display a random ad image whenever the browser is refreshed.

For security reasons, the XML file should reside in a hidden directory (like "_private") and the file does not need to have an ".xml" extension.   The functionality of the AdRotator Control can be expanded by tracking advertising clicks and using the "Keyword" tag.  More information on these features can be found at the following Microsoft link: http://support.microsoft.com/kb/305035