How To Use the AdRotator Control in an ASP.NET Application with Visual Basic .NET (305035)

SUMMARY

This article demonstrates how to use the AdRotator control to display advertisements in an ASP.NET Web site and how to implement custom "click tracking" logic. Many e-commerce sites use banner advertisements to promote products and services on behalf of customers. The AdRotator control allows developers to place graphical advertisements on a Web Form and provides programmatic functionality that enables the development of custom logic to track advertisement clicks.

back to the top

Requirements

This article assumes that you are familiar with the following topics:

• ASP.NET Web application development with Visual Basic .NET
• Extensible Markup Language (XML) syntax

back to the top

Create a New ASP.NET Application

1. Start Visual Studio .NET.
2. Under Project Types, click Visual Basic Projects.
3. Create a new ASP.NET Web Application project named AdvertWeb on your local computer.
4. Rename WebForm1.aspx to Default.aspx.
5. Save the project.

back to the top

Create the Advertisement Images

1. Create a new folder named Images in the AdvertWeb virtual root (which is located at C:\InetPub\WWWRoot\AdvertWeb by default).
2. Open a graphics program such as Paint to create three images. Although this example uses the .bmp format, you can use most graphical formats, such as .bmp, .gif, or .jpg files.
   
   For this example, use the following guidelines to create three images, and save the images in the Images folder that you created in step 1:
   • Microsoft.bmp: 190 x 50 pixels blue rectangle that contains the text "Microsoft".
   • Technet.bmp: 190 x 50 pixels dark blue rectangle that contains the text "Technet".
   • Msdn.bmp: 190 x 50 pixels red rectangle that contains the text "MSDN".

back to the top

Create an Advertisement File

1. Return to the AdvertWeb project in Visual Studio.
2. On the File menu, click Add New Item, and then click XML File to add an .xml file named Adverts.xml.
3. Use the Visual Studio XML editor to edit Adverts.xml so that it reads as follows:

   <?xml version="1.0" encoding="utf-8" ?>
   <Advertisements>
   	<Ad>
   		<!-- The URL for the ad image -->
   		<ImageUrl>images/microsoft.bmp</ImageUrl>
   		<!-- The URL the ad redirects the user to -->
   		<NavigateUrl>http://www.microsoft.com</NavigateUrl>
   		<!-- The alternate text for the image -->
   		<AlternateText>Visit Microsoft's Site</AlternateText>
   		<!-- The relative number of times this ad should appear -->
   		<!-- compared to the others -->
   		<Impressions>80</Impressions>
   		<!-- The topic of this ad (used for filtering) -->
   		<Keyword>ProductInfo</Keyword>
   	</Ad>
   	<Ad>
   		<ImageUrl>images/technet.bmp</ImageUrl>
   		<NavigateUrl>http://www.microsoft.com/technet</NavigateUrl>
   		<AlternateText>Support for IT Professionals</AlternateText>
   		<Impressions>40</Impressions>
   		<Keyword>Support</Keyword>
   	</Ad>
   	<Ad>
   		<ImageUrl>images/msdn.bmp</ImageUrl>
   		<NavigateUrl>http://msdn.microsoft.com</NavigateUrl>
   		<AlternateText>Support for developers</AlternateText>
   		<Impressions>40</Impressions>
   		<Keyword>Support</Keyword>
   	</Ad>
   </Advertisements>
   						

   NOTE: Remember that XML is case-sensitive. Ensure that your document exactly matches the preceding code.
4. Save Adverts.xml

back to the top

Add an AdRotator Control to a Web Form

1. View the Default.aspx Web Form in Visual Studio.
2. Drag an AdRotator control from the Web Forms section of the toolbox onto the Default.aspx Web Form.
3. Position the AdRotator control near the top center of the Web Form, and resize it so that it is the same size as the images that you created earlier. (To control the size more accurately, set the Height and Width properties).
4. Click AdRotator1 (the newly added AdRotator control), and then press the F4 key to view its properties.
5. Set the AdvertisementFile property to Adverts.xml.
6. Save Default.aspx, and build the project.

back to the top

Test the AdRotator Control

1. Start Microsoft Internet Explorer, and browse to http://localhost/AdvertWeb.
2. Refresh the page several times to confirm that the advertisements appear.
3. Click the advertisement, and verify that you are redirected to the appropriate Uniform Resource Locator (URL).

back to the top

Filter the Advertisements

1. View the Default.aspx Web Form in Visual Studio.
2. Click AdRotator1, and view its properties.
3. Set the KeywordFilter property to Support.
4. Save Default.aspx, and build the project.
5. View the page in Internet Explorer. Confirm that only advertisements with the keyword "Support" appear.

back to the top

Add Code to Track Advertisement Clicks

1. Return to Visual Studio.
2. Double-click AdRotator1 on the Default.aspx Web Form to view its AdRotator1_AdCreated event procedure.
3. Add the following Visual Basic code to the procedure:

   'Change the NavigateUrl to a custom page that logs the Ad click.
   e.NavigateUrl = "AdRedirect.aspx?Adpath=" & e.NavigateUrl
   					

4. Save Default.aspx
5. Add a new Web Form named AdRedirect.aspx.
6. Add the following Visual Basic code to the Page_Load event procedure in AdRedirect.aspx:

   Dim strAdPath As String
   
   'Get the URL to navigate to.
   strAdPath = Request.QueryString("Adpath")
   
   'Log the ad click to a text file (you can use a database).
   Dim AdFile As New IO.FileInfo(Server.MapPath("AdResponse.txt"))
   Dim AdData As IO.StreamWriter
   AdData = AdFile.AppendText
   AdData.WriteLine(Now().ToString & ": Ad clicked. Redirect to " & _
   	strAdPath)
   AdData.Close()
   
   'Redirect the user to the ad URL.
   Response.Redirect(strAdPath)
   					

7. Save AdRedirect.aspx, and build the project.

back to the top

Verify That the Click Tracking Code Works

1. Close Internet Explorer to clear the cache.
2. Re-open Internet Explorer, and browse to http://localhost/AdvertWeb.
3. Click the advertisement that appears.
4. After you are redirected, view the contents of the AdvertWeb virtual root. A new text file named AdResponse.txt should have been created.
5. Open AdResponse.txt. Notice that this file is used to record advertisement clicks.

back to the top