Banner ads

[ 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 app that is written using JavaScript and HTML.

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 Microsoft Advertising SDK for Windows 8.1 Native (JS).
    • For a Windows Phone 8.1 project: Expand Windows Phone 8.1, click Extensions, and then select the check box next to Microsoft Advertising SDK for Windows Phone 8.1 Native (JS).
  5. In Reference Manager, click OK.

  6. Open the default.html file (or other html file as appropriate for your project).

  7. In the <head> section, after the project’s JavaScript references of default.css and default.js, add the reference to ad.js.

    <script src="/MSAdvertisingJS/ads/ad.js"></script>
    
  8. Modify the <body> section in the default.html file (or other html file as appropriate for your project) to include the div for the AdControl. Assign the applicationId and adUnitId properties in the AdControl 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.

     

    <div id="myAd" style="position: absolute; top: 50px; left: 0px; width: 300px; height: 250px; z-index: 1"
        data-win-control="MicrosoftNSJS.Advertising.AdControl"
        data-win-options="{applicationId: '3f83fe91-d6be-434d-a0ae-7351c5a997f1', adUnitId: 'test'}">
    </div>
    
  9. 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 JavaScript/HTML apps for Windows 8.1 and Windows Phone 8.1.

Windows 8.1:

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

Windows Phone 8.1:

  • 300x50
  • 320x50
  • 640x100

Set up ad units in your app