{"id":750,"date":"2017-12-26T15:42:04","date_gmt":"2017-12-26T15:42:04","guid":{"rendered":"http:\/\/www.netexl.com\/blog\/?p=750"},"modified":"2017-12-27T08:06:47","modified_gmt":"2017-12-27T08:06:47","slug":"monetize-windows-10-store-app-with-ads","status":"publish","type":"post","link":"https:\/\/www.netexl.com\/blog\/monetize-windows-10-store-app-with-ads\/","title":{"rendered":"Monetize Windows 10 Store App with Ads"},"content":{"rendered":"

In the previous article<\/a> we converted our Phaser game to a windows 10 store app (UWP app). Now\u00a0we all want to monetize our games. One way of monetizing is by putting ads in our game. Micorsoft has built support for ads in the UWP which offers various ad types and also supports\u00a0mediation with other ad networks.<\/p>\n

Refer to following resources to get more detail<\/p>\n

https:\/\/developer.microsoft.com\/en-us\/store\/monetize\/ads-in-apps<\/a><\/p>\n

We will go through steps to quickly add a banner ad to our game.<\/p>\n

First step is to add WinJS and Microssoft Advertising SDK to our visual studio project. Open proejct and go to NuGet Package Manager -> Manage NuGet Packages for Solution<\/p>\n

\"\"<\/p>\n

Search for WinJS in Browse section, select the package and click install which will install the package in the current solution. Accept the popup confirmations if you get any.<\/p>\n

\"\"<\/p>\n

Next we will add Microssoft Advertising SDK. Simply\u00a0browse\u00a0for Advertising and in the results section, select Micrososft.Advertising.JS and click install.\"\"<\/p>\n

Now right click on References in solution explorer and add reference to “Microsoft Advertising SDK for Javascript”.<\/p>\n

\"\"<\/p>\n

After you have added WinJS and Advertising SDK you should see\u00a0two references and a WinJS folder\u00a0added\u00a0to your project solution (see highlighted below).<\/p>\n

\"\"<\/p>\n

Now we have everything to start adding the code to display our ad. For live applications you would need to register to windows dev portal and get Application Id and Ad Unit Id. For testing Microsoft has provided test ids<\/a> which can be used to see how the ads are going to look in our app which we will be using for testing.<\/p>\n

Add WinJS references in your html file<\/p>\n

    <!-- WinJS references -->\r\n    <link href=\"WinJS\/css\/ui-dark.css\" rel=\"stylesheet\" \/>\r\n    <script src=\"WinJS\/js\/base.js\"><\/script>\r\n    <script src=\"WinJS\/js\/ui.js\"><\/script>\r\n<\/pre>\n
Add Micorsoft Advertising SDK reference in your html file. Make sure this code is loaded after your game code.<\/p>\n
    <script src=\"\/\/Microsoft.Advertising.JavaScript\/ad.js\"><\/script>\r\n<\/pre>\n
Load following code in your js file.<\/p>\n
\/\/\/\/ Copyright (c) Microsoft Corporation. All rights reserved\r\n(function () {\r\n    \"use strict\";\r\n    var adCount = 0;\r\n\r\n    var page = WinJS.UI.Pages.define(\"\/index.html\", {\r\n        ready: function (element, options) {\r\n            var adControl = document.getElementById(\"adContainer\").winControl;\r\n            adControl.onErrorOccurred = errorHandler;\r\n            adControl.onAdRefreshed = refreshHandler;\r\n        }\r\n    });\r\n\r\n    \/\/ This is an error event handler for the ad control.\r\n    function errorHandler(adControl, e) {\r\n        WinJS.log && WinJS.log(\"An error occurred. \" + e.errorCode + \": \" + e.errorMessage, \"samples\", \"error\");\r\n    }\r\n\r\n    \/\/ This is an event handler for the ad control. It is called when the ad is refreshed with a new ad.\r\n    function refreshHandler(adControl) {\r\n        \/\/ We increment the ad count so that the message changes at every refresh.\r\n        adCount++;\r\n        WinJS.log && WinJS.log(\"Advertisement #\" + adCount, \"samples\", \"status\");\r\n    }\r\n})();\r\n<\/pre>\n
Finally add the DIV in which advertisement will be shown.\u00a0Click\u00a0here <\/a>to check for all available ad formats. Select an Ad size and change the following DIV code accordingly for size and place it in your html file. You can play around with style attributes\u00a0to align it on your page per your liking.<\/p>\n
    <div id=\"adContainer\" style=\"position: static; text-align:center; top: 50px; left: 0px; width: 728px; height: 90px; z-index: 1\"\r\n         data-win-control=\"MicrosoftNSJS.Advertising.AdControl\"\r\n         data-win-options=\"{applicationId: '3f83fe91-d6be-434d-a0ae-7351c5a997f1', adUnitId: 'test'}\">\r\n    <\/div>\r\n<\/pre>\n
Remember we are using test applicationId and adUintId. For live application you will need to replace it with your own ids once you are ready to publish your app in the app store.<\/p>\n
Also while debugging make sure you have not selected “Any CPU” option. Select specific CPU options from ARM, x86, x64. Also, make sure you have Internet (Client) selected under Capabilities section in package.appxmanifest.<\/p>\n
\"\"<\/p>\n
Now hit F5 and you will see nice banner showing up.<\/p>\n
\"\"<\/p>\n
There are multiple sizes banners are available in and you can choose according to your requirements. There are Banner ads<\/a>,\u00a0Interstitial video and banner ads<\/a>\u00a0and\u00a0Native ads<\/a>\u00a0to choose from.<\/p>\n
Also, check out the official github repository for samples on how to implement different ad formats in your code.<\/p>\n
https:\/\/github.com\/Microsoft\/Windows-universal-samples<\/a><\/p>\n
In\u00a0next article we will be publishing the app to windows app store.<\/p>\n
Some troubleshooting steps\u00a0related to advertising libraries<\/p>\n
https:\/\/docs.microsoft.com\/en-us\/windows\/uwp\/monetize\/known-issues-for-the-advertising-libraries<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
In the previous article we converted our Phaser game to a windows 10 store app (UWP app). Now\u00a0we all want to monetize our games. One way of monetizing is by putting ads in our game. Micorsoft has built support for ads in the UWP which offers various ad types and also supports\u00a0mediation with other ad networks. Refer to following resources to get more detail https:\/\/developer.microsoft.com\/en-us\/store\/monetize\/ads-in-apps We will go through steps to quickly add a banner ad to our game. First step is to add WinJS and Microssoft Advertising SDK to our visual studio project. Open proejct and go to NuGet Package Manager -> Manage NuGet Packages for Solution Search for WinJS in Browse section, select the package and click install which will install the package in the current solution. Accept the popup confirmations if you get any. Next we will add Microssoft Advertising SDK. Simply\u00a0browse\u00a0for Advertising and in the results[…]<\/p>\n","protected":false},"author":5,"featured_media":746,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,4,21],"tags":[],"class_list":["post-750","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5","category-phaser","category-windows-store-app"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts\/750","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/comments?post=750"}],"version-history":[{"count":4,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts\/750\/revisions"}],"predecessor-version":[{"id":771,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts\/750\/revisions\/771"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/media\/746"}],"wp:attachment":[{"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/media?parent=750"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/categories?post=750"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/tags?post=750"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}