Installing and Using Advertising SDK for Windows 8 in your Solution

Article
03/03/2013

INSTALLING WINDOWS 8 ADVERTISING SDK

Run the .msi file for the Microsoft Advertising SDK for Windows 8 to see a screen similar to the following. Click Next to bring up the licensing agreement.
Click here to download the SDK.

Scroll through to read the agreement, and click Next if you accept the terms.

If the User Access Control screen appears, confirm Microsoft Corporation as the publisher, and then click Yes to continue.

Click Finish to complete the installation.

USING ADVERTISING SDK in HTML5/javascript Applications

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. You must also have a Windows Live ID. For more information, Click here

Lets Start

Open Visual Studio 2012
Select JavaScript Template from the New Project Window.
once the Solution us prepared, double click the "Package.appxmanifest" file

Click the Capabilities tab, ensure that the 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 windows, right click Reference, and select Add Reference

Click Windows, and than Extensions. Select Microsoft Advertising SDK for Windows 8(JS). Than 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 of default.css and default.js, add the reference to ads.js

 <script src="https://blogs.msdn.com/MSAdvertisingJS/ads/ad.js" ></script>

Important: This line must be placed in the <head> section after the include of the default.js, otherwise you will encounter an error when you build your project.
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: 'test_client', adUnitId: 'Image_250x250'}">
</div>

Compile and run the app to see it with an ad, similar to the following

 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="https://blogs.msdn.com//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
 <script src="https://blogs.msdn.com//Microsoft.WinJS.0.6/js/base.js"></script>
 <script src="https://blogs.msdn.com//Microsoft.WinJS.0.6/js/ui.js"></script>

 <!-- My_Ad_Funded_Windows8_JS_App references -->
 <link href="https://blogs.msdn.com/css/default.css" rel="stylesheet">
 <script src="https://blogs.msdn.com/js/default.js"></script>

 <!-- Microsoft Advertising required references -->
 <script src="https://blogs.msdn.com/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: 'test_client', adUnitId: 'Image_250x250'}">
 </div>

 <p>Content goes here</p>

 </body>
 </html>

  Please Stay Tuned for another article on using the SDK in XAML applications.

Installing and Using Advertising SDK for Windows 8 in your Solution

Additional resources