HTML 5 JavaScript
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.
Before You Begin
-
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
-
From the Solution Explorer window, double click the “package.appxmanifest” file.
-
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.
-
From the Solution Explorer window, right click References, and select Add Reference…
-
Click Windows, and then Extensions. Select Microsoft Advertising SDK for Windows 8 (JS). Then click OK.
-
Confirm that your reference was added. Your Solution Explorer should look similar to the following:
-
Open the default.html file (or other html file as appropriate for your project).
-
In the
<head>section, after the project’s JavaScript references ofdefault.cssanddefault.js, add the reference toads.js.Author's Note: 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.<!-- Microsoft Advertising required references --> <script src="/MSAdvertisingJS/ads/ad.js" ></script>
-
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> -
Compile and run the app to see it with an ad, similar to the following:
<!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>
-
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 theAdControlwill 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. -
Or you can use Blend for Visual Studio to drag and drop the
AdControlinto 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 theAdControlonto the design space.
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.
Report a bug in the product. Send email to psupport@microsoft.com.
Send feedback about this documentation to adsfdbk@microsoft.com.
Revised: 2013-04-19
