Export (0) Print
Expand All

HTML 5 Javascript - Windows 8.1

Microsoft Advertising Services

Updated: April 30, 2014

Published: April 30, 2014

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

Walkthrough

Steps

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


  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.


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


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


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


  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: 50px; 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: '10043107'}">
        </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_Windows_8.1_Ad_Funded_JavaScript_App</title>

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

    <!-- My_Windows_8.1_Ad_Funded_JavaScript_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: 50px; 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: '10043107'}">
    </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

To see how different ad types render in the sample app, change the AdUnitId property to any of the values listed in the TestMode topic. Change the Height and Width properties in the JavaScript code (above) to match the ad size you choose. The AdControl must be the same size as the ad unit or larger.

Support and Feedback

Get product support or report a bug in the advertising SDK by visiting the Windows Store Apps developer support page support page. For product support, under "App development" click the "Advertising SDK" link. To post a question in the support forum, scroll down to "Find answers online" and click "Ads-in-Apps for Windows 8 forum".

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