Banner ads

  • Article

[ This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation ]

This walkthrough shows how to use the AdControl class to display banner ads in a Windows 8.1 or Windows Phone 8.1 XAML app.

Note  For instructions about Windows Phone Silverlight apps, see Banner ads in Windows Phone Silverlight projects.

 

Prerequisites

Install the Microsoft Advertising SDK for Windows and Windows Phone 8.x with Visual Studio 2015 or Visual Studio 2013.

Code development

  1. In Visual Studio, open your project or create a new project.

  2. If your project targets Any CPU, update your project to use an architecture-specific build output (for example, x86). If your project targets Any CPU, you will not be able to successfully add a reference to the Microsoft advertising library in the following steps.

  3. From the Solution Explorer window, right click References, and select Add Reference....

  4. In Reference Manager, select one of the following references depending on your project type:

    • For a Windows 8.1 project: Expand Windows 8.1, click Extensions, and then select the check box next to Ad Mediator SDK for Windows 8.1 XAML.
    • For a Windows Phone 8.1 project: Expand Windows Phone 8.1, click Extensions, and then select the check box next to Ad Mediator SDK for Windows Phone 8.1 XAML.

  5. In Reference Manager, click OK.

  6. Modify the XAML for the page where you are embedding advertising to include the Microsoft.Advertising.WinRT.UI namespace. For example, assume your MainPage.xaml file has the following code by default.

    <Page
    x:Class="MyAdFundedWindowsAppXAML.MainPage"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MyAdFundedWindows10AppXAML"
    xmlns:d="https://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    </Grid>
 </Page>

    Add the Microsoft.Advertising.WinRT.UI namespace reference so the Page section has the following code.

    <Page
    x:Class="MyAdFundedWindowsAppXAML.MainPage"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MyAdFundedWindows10AppXAML"
    xmlns:d="https://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:UI="using:Microsoft.Advertising.WinRT.UI"    
    mc:Ignorable="d">
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    </Grid>
 </Page>

  7. In the Grid tag, add the code for the AdControl. Assign the AdUnitId and ApplicationId properties in the Page to the test values provided in Set up ad units in your app. Also adjust the height and width of the control so it is one of the supported ad sizes for banner ads (listed at the end of this article).

    Note  Every AdControl has a corresponding ad unit that is used by our services to serve ads to the control, and every ad unit consists of an ad unit ID and application ID. In these steps, you assign test ad unit ID and application ID values to your control. These test values can only be used in a test version of your app. Before you publish your app to the Store, you must replace these test values with live values from Windows Dev Center.

     

    The complete Grid tag looks like this code.

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <UI:AdControl ApplicationId="3f83fe91-d6be-434d-a0ae-7351c5a997f1"
        AdUnitId="test"
        HorizontalAlignment="Left"
        Height="250"
        VerticalAlignment="Top"
        Width="300"/>
</Grid>

    The complete code for the MainPage.xaml file should look like this.

    <Page
    x:Class="MyAdFundedWindowsAppXAML.MainPage"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MyAdFundedWindows10AppXAML"
    xmlns:d="https://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:UI="using:Microsoft.Advertising.WinRT.UI"    
    mc:Ignorable="d">
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <UI:AdControl ApplicationId="3f83fe91-d6be-434d-a0ae-7351c5a997f1"
            AdUnitId="test"
            HorizontalAlignment="Left"
            Height="250"
            VerticalAlignment="Top"
            Width="300"/>
    </Grid>
</Page>

  8. Compile and run the app to see it with a test ad.

Release your app with live ads using Windows Dev Center

  1. In the Dev Center dashboard, go to the Monetize with ads page for your app and create an ad unit. For the ad unit type, specify Banner. Make note of both the ad unit ID and the application ID.
  2. In your code, replace the test ad unit values (ApplicationId and AdUnitId) with the live values you generated in Dev Center.
  3. Submit your app to the Store using the Dev Center dashboard.
  4. Review your advertising performance reports in the Dev Center dashboard.

Supported banner ad sizes

We support the following banner ad sizes in Windows 8.1 and Windows Phone 8.1 XAML apps.

Windows 8.1:

  • 300x250
  • 728x90
  • 160x600
  • 300x600

Windows Phone 8.1:

  • 300x50
  • 320x50
  • 640x100
  • 480x80 (this size is supported for Windows Phone Silverlight only)

Set up ad units in your app

Banner ads in Windows Phone Silverlight projects