Wednesday, 24 April 2013

Put Ads in Windows 8 Apps (HTML5)

 Note: The following tutorial is for HTML5 app development.

So you want to get into, or you're already in Windows 8 App development?
You'll surely want to know how to monetize your apps. And the simplest way to do that is to put ads in your app or game. You can also have in-app purchases, or even make it a paid app. However in-app purchases is a little bit more difficult (although it isn't that bad, I'll write about that in a later article), and to have any notable success with a paid app, you want to make sure it's a damn good app or game.

So, how do we put ads in our Windows 8 Store apps?

First you need an ad provider. You can use any ad provider that meets Microsoft's standards. But at the moment, I'm sticking with Microsoft's pubCenter, because it's actually the only provider I can find right now that you can use. AdSense is apparently out the picture. So, I'll show the ropes with pubCenter. Also note that pubCenter isn't great yet. There's not a whole lot of advertisers with them yet, so quite often you will find your app not even displaying ads. Ads are displayed more in America than anywhere else, which isn't too bad since America will usually be the biggest audience of any app. I can also see pubCenter growing rapidly, so you may as well get yourself prepared.

Get the SDK

First off, get the Microsoft Advertising SDK for Windows 8, click "direct download" at the top right of the page, and install it. Now Visual Studio has what it needs to work with ads.

Set up pubCenter Account

Then you should get started with pubCenter, for in-depth description, have a look at How to Use pubCenter. But it's pretty simple, just log in with your Microsoft ID, you'll see the "sign in with microsoft account" link. Then you'll be able to set up your first ad unit for your app.

When you create your ad unit, you will have a unit ID and an application ID, both of which you will need later for your code.

Placing the HTML code

First go to your default.html or the page you are placing the ad on.
In the <head> part, put this line *after* you include default.js:

Now in the <body> section, use this code:
This example places a 292px by 60px ad at the bottom left of the page. You can change the position values as you like, and the size values should be the values you made your unit.
Important note: The application ID used here is what you need to use for testing purposes, and the unit ID is what you need to use if you are going to have a 292 by 60 ad. For other sizes, look at the Test Mode Values Table and make sure you take the Unit ID of the size you intend to use.

Using your own application ID and unit ID will not show anything when testing, you must wait until you have finished making your game before switching these values with your actual ad IDs.

Next Requirements

There are a couple of things you need to do if you're going to have ads in your app. The first is very simple, just go to your app manifest and make sure you've ticked the "Internet (Client)" box under the "Capabilities" tab.

Privacy Policy
The second thing you need to make sure you have is a Privacy Policy. If you don't have a privacy policy when Internet connection is enabled, your app will be rejected.
The privacy policy is used to state what information is being transferred or used. If you are not using any personal information and you're just providing ads, you simply have to state that.
For example, "This application does not collect any personal information. Internet connection is used to provide advertisements."

You will need to have your privacy policy posted on a web page with a URL you can link in your app's description section when submitting your app.
You also must include your privacy policy in the Settings Charm of your app.

To do this, go to your default.js file, and locate the part that should look like this:

Then make the code look more like this:

You'll notice that in that code I referenced a "privacy.html" page. All you have to do is make another html page in the project, and for example's sake, here's my privacy.html page for my Holy Diver game:

And that should be it! You're now fully equipped to put ads in your app. Now go make a badass game and get it plenty of traffic. Enjoy.