Advanced Concepts - Showing Ads in Windows Phone 7 apps

Now that you have the basic ads being displayed in your one pager app, it’s time to delve into some advanced concepts. As I had mentioned in the previous post, Microsoft Ads system has made it extremely easy to monetize your Windows Phone 7 Silverlight or XNA apps. In just a few simple steps, you can start displaying contextual ads in your app. In addition, the documentation team has done a tremendous job in writing very detailed and great information. This post has a lot of content copy-pasted from the help file that came with the Ad Control SDK. The purpose of this post is to quickly highlight the major steps you need to follow without going through all the documentation and get up and running as fast as possible. (Thank you again for writing such great content).

Topics that we will be discussing in this post are:

1. Integrating the AdControl into an Application Programmatically (C#).
2. Test Values for Windows Phone 7 Silverlight Applications
3. How to display ads on multiple pages
4. Disable auto rotation

Now that we have understood how to use the Visual designer to integrate the ads, let’s focus on Integrating the AdControl into an Application Programmatically (C#). The following steps are a guide for using the Microsoft Advertising SDK for Windows Phone 7 to integrate advertising into Windows Phone 7 applications programmatically.

Prerequisites

1. Microsoft Visual Studio 2010 (or Microsoft Visual Studio Express 2010)
2. Windows Phone 7 Developer Tools
3. Microsoft Advertising Ad Control SDK for Windows Phone 7

Steps

1. In Visual Studio Solution Explorer, right-click References under your project and click Add Reference… .

2. In the Add Reference dialog box, click the Browse tab. Navigate to the location where you installed the Microsoft.Advertising.Mobile.UI.dll previously. Click the Microsoft.Advertising.Mobile.UI.dll to select it, and click OK.

3. In the Solution Explorer panel, you will see Microsoft.Advertising.Mobile.UI.dll listed in the References folder of your project.

4. Let us assume you are displaying your ad on MainPage.xaml. Open MainPage.xaml.cs and add the following code in the using section of your code.

using Microsoft.Advertising.Mobile.UI;

5. Add a Page Loaded Event Handler

6. Modify MainPage.xaml to create a place for the ad

         <!--Main ContentPanel -->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>            
            <StackPanel x:Name="spAd" Grid.Row="0">
                <!--Ad will be placed here via the code-->
            </StackPanel>   
        </Grid>

7. In your code, create an instance of the AdControl Class and set the properties of the AdControl Class.

This example uses the default main page of the project MainPage.xaml.cs. The following code creates the AdControl Class in the MainPage PhoneApplicationPage_Loaded event handler.

 private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
{
    AdControl _adControl = new AdControl("test_client",      // ApplicationID
                                         "Image480_80",      // AdUnitID
                                         AdModel.Contextual, // AdModel
                                         true);              // RotationEnabled

    // Make the AdControl size large enough that it can contain the image.
    _adControl.Width = 480;
    _adControl.Height = 80;

    // Add the AdControl Class to your application page layout 
    //add the control to a specially created StackPanel
   spAd.Children.Add(_adControl);
}

8. Run your application and you will see a sample test ad.

Before programming ads on multiple pages, let us take a minute to review the test values for Windows Phone 7 Silverlight Applications. Test values for ApplicationId and AdUnitId must be used during development to test how the AdControl Class is receiving and rendering advertisements. This testing allows the developer to determine how ad integration will work in the mobile application. Test mode should be enabled during the application development phase.

The size of ads delivered to the Microsoft Advertising Mobile AdControl Class by the Microsoft ad servers is defined for the ad unit in Microsoft pubCenter. For best results, make sure that the AdControl Class size matches the ad unit size specified in Microsoft pubCenter.

The following table lists the test values to use during development.

To display ads on multiple pages, we need to make sure to unload the Ad Control when the page unloads. Otherwise, your application may run into memory issues. The code sample below shows how to subscribe to this event and handle it.

 private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
{
    AdControl _adControl = new AdControl("test_client",      // ApplicationID
                                         "Image480_80",      // AdUnitID
                                         AdModel.Contextual, // AdModel
                                         true);         // RotationEnabled
    // Make the AdControl size large enough that it can contain the image.
    _adControl.Width = 480;
    _adControl.Height = 80;

 
    // add the control to a specially created StackPanel
    spAd.Children.Add(_adControl);

 
    // Subscribe to this event if your application has multiple pages.
    // Single page applications do not need this code.

 this.Unloaded += new RoutedEventHandler(AdControlPage_Unloaded);

 }
// Event handler necessary for multiple page applications
// Failure to unload the AdControl with multiple pages will cause a memory leak.
void AdControlPage_Unloaded(object sender, RoutedEventArgs e)
{
    if (spAd.Children.Contains(_adControl))
        spAd.Children.Remove(_adControl);

    this.Unloaded -= new RoutedEventHandler(AdControlPage_Unloaded);

    _adControl = null;
}

By default, the ad changes (rotates) every 60 seconds. For some applications, this time may not be acceptable. If you want to change the displayed ad on a different schedule, Ad Control provides a very simple and clean way to handle this. In the constructor for Ad Control, set the RotationEnabled property to false. When you need to change the Ad, just call this._adControl.RequestNextAd(). In the example below, the DoNextOp() function calls RequestNextAd() to change the ad.

 private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
{
    AdControl _adControl = new AdControl("test_client",      // ApplicationID
                                         "Image480_80",      // AdUnitID
                                         AdModel.Contextual, // AdModel

                                           false);         // RotationEnabled

 ……
}

//if the Ad Control is initialized with RotationEnabled = false, 
//then use RequestNextAd() to get the next ad
private void DoNextOp(object sender, RoutedEventArgs e)
{

 this._adControl.RequestNextAd();

 }

This should bring you up to speed with displaying ads in your application both via visual designer and programmatically. 

Important Note:

Before you submit your application to the app store, make sure to set the TestMode to false (it’s true by default) and set the correct values for ApplicationId and AdUnitId’s.