Export (0) Print
Expand All

HTML 5 (JavaScript) - Windows 8.0

Microsoft Advertising Services

Updated: August 2, 2013

Published: June 4, 2013

The following walkthrough shows how to include advertising in a Windows 8 app written in HTML5/JavaScript. It assumes that you’ve already written an app or are starting from a sample Windows 8 style app or from another built-in VS template.

Integrate the AdControl using HTML5/JavaScript Code

Before You Begin

  1. Before you can use the SDK, you must have Windows 8, a version of Visual Studio 2012, and the SDK installed on your system. For more information, see Getting Started.

Walkthrough

  1. From the Solution Explorer window, double click the “package.appxmanifest” file.

    New Project


  2. Click the Capabilities tab and ensure that Internet Client is checked, as shown below. Without this capability, the ad client cannot make calls to the internet to fetch ads.

    Showing Basic Ad


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

    Add Reference


  4. Click Windows, and then Extensions. Select Microsoft Advertising SDK for Windows 8 (JS). Then click OK.

    Ad Reference Browse


  5. Confirm that your reference was added. Your Solution Explorer should look similar to the following:

    Confirm Reference


  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 ads.js.

    <!-- Microsoft Advertising required references -->
    <script src="/MSAdvertisingJS/ads/ad.js" ></script>
    
    
    System_CLiX_noteNote

    This line must be placed in the <head> section after the include of default.js; otherwise, you will encounter an error when you build your project.

  8. Modify the <body> section in the default.html file (or other html file as appropriate for your project) to include the following:

    <div id="myAd" style="position: absolute; top: 53px; left: 0px; width: 250px; height: 250px; z-index: 1" 
         data-win-control="MicrosoftNSJS.Advertising.AdControl" 
         data-win-options="{applicationId: 'd25517cb-12d4-4699-8bdc-52040c712cab', adUnitId: '10043105'}">
    </div>
    
  9. Compile and run the app to see it with an ad, similar to the following:

    Ad in Tablet Emulator


Complete default.html for a Sample Project

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>My_Ad_Funded_Windows8_JS_App</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet">
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <!-- My_Ad_Funded_Windows8_JS_App references -->
    <link href="/css/default.css" rel="stylesheet">
    <script src="/js/default.js"></script>

    <!-- Microsoft Advertising required references -->
    <script src="/MSAdvertisingJS/ads/ad.js"></script>

</head>
<body>

    <div id="myAd" style="position: absolute; top: 53px; left: 0px; width: 250px; height: 250px; z-index: 1" 
      data-win-control="MicrosoftNSJS.Advertising.AdControl" 
      data-win-options="{applicationId: 'd25517cb-12d4-4699-8bdc-52040c712cab', adUnitId: '10043105'}">
    </div>

    <p>Content goes here</p>

</body>
</html>

Drag and Drop the AdControl into Your HTML5/JavaScript Code

  1. You can drag the ad.js file from the Project Explorer window to the <head> section of the default.html file and the code for the AdControl will insert automatically.

    Follow the walkthrough above through step 6. For Step 7, drag the ad.js file from the Project Explorer window to the <head> section of the default.html file. Continue on from Step 8.

  2. Or you can use Blend for Visual Studio to drag and drop the AdControl into an HTML5/JavaScript app.

    Follow the walkthrough above through step 5. Then in VS right-click the project (not the solution) in Project Explorer and from the context menu look down at the bottom entries and click Open in Blend. From Blend, in the Assets tab, under Advertising you can drag and drop the AdControl onto the design space.

Next Steps

Consult the TestMode section for various AdUnitIds to see a variety of ads, and the API reference for additional targeting properties, methods for doing manual ad refreshes, callback functions, and more.

Support and Feedback

Get product support or report a bug in the advertising SDK by visiting the Windows 8 Dev Center support page (scroll down to the section "Microsoft Advertising support").

Send feedback about this documentation to adsfdbk@microsoft.com. There is no product support through this alias. Documentation feedback only.

Community Additions

ADD
Show:
© 2014 Microsoft