Skip to content
September 30, 2012 / iunkn

Generating revenue with advertisements

With Windows 8 app store, there are a lot of ways in which you can plan on monetizing your creation. This particular post focusses on the In-app advertising model, where you place an advertisement in your game and generate revenue from impressions and click through actions. Let’s take a look how you can add advertisement to your Construct 2 exported game, with an option to show and hide the advertisement as required. In particular, this post is focusing on utilizing the ads from Microsoft Advertising SDK for Windows 8.

Familiarize yourself with the Ad SDK:

First lets see the basic steps in adding and displaying advertisements – try to do this with a small test project. This post is highlighting the steps from this walkthrough. Do consult it if you have additional questions in the steps below.

1. Export a test game from Construct 2 as Windows 8 store app.

2. Install the SDK following the instructions.

3. Open up the project in Visual Studio, Project->Add a reference and add “Microsoft Advertising SDK for Windows 8 (JS)” which you installed in the previous step.

4. Add the highlighted code to index.html:

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

    <!-- Microsoft Advertising required references -->
    <script src="/MSAdvertisingJS/ads/ad.js"></script>

5. Add the highlighted code as below. Note that this is using an illustrative advertisement from Microsoft Ad SDK. We will see later how to add real advertisements. With this code, you are just adding a div control hosting an ad control. Check the available ad sizes and try out different ones by changing the adUnitId value below.

<div id="fs">
    <!-- The canvas must be inside a div called c2canvasdiv -->
    <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: 'testclient', adUnitId: 'ADPT33'}">
     </div>
     <div id="c2canvasdiv">
         <canvas id="c2canvas"></canvas>
     </div>
</div>

6. Now hit F5 and see the test ad show up on the top left corner.

Moving to real Ads:

Now that you are familiar with adding advertisements and gotten the hang of it, lets see what it takes to really add an advertisement to your game.

A. Think about the game layout: Placing an advertisement in a game can be a necessary evil. It might bring down the user experience quotient of your game but it is also enticing because of the obvious reasons (from the developer point of view). Hence while you are designing the game, think about where you want to place your ads. Take a look at the available ad sizes and think about how many pixels you are willing to sacrifice for ads and decide on the placement of them.

B. Register with Pubcenter: Please have a quick read about Microsoft Advertising pubCenter. In step 5 above, you see that you have used applicationId and adUnitId as test values. Visit the pubCenter register an app and create an ad unit of the size you desire. You can plug the values provided from the pubCenter website into the applicationId and adUnitId fields in the step 5 above. Additional reading.

C. Hide/show ads: Often you need better control towards when you want to show the ad and hide the ad from within Construct 2. Some scenarios include you want to hide the app in the main screen, level select screens for aesthetic reasons. You might want to have an in-app-purchase model where you want to check if the user had purchased your app and show/hide the ads as required. For this purpose you can make use the plugin and use the following events:

Using Set Advertisement visibility action to show or hide ads. Make sure you are specifying the correct id as used in index.html.

The only important thing to note is that you need to be careful in providing the ad div id to the actions above. In this case, if you see above we have used “<div id=”myAd” ..”. So we have used that same ad id in the Construct 2 project as above. As you would have guessed, you can have multiple ads showing up in your game (for example bigger ads in pages like score page/level select page etc,. and smaller ads while actually playing the game) and you can show/hide them independently.

Advertisements

7 Comments

Leave a Comment
  1. eyemobi / Oct 2 2012 3:52 am

    Fantastic! I think you’ve cracked ads and IGPs even before many other C2 integrators.

  2. Eyehawk / Dec 12 2012 9:40 pm

    Hi iunkn, how are things? Hey just curious to know what your experience has been with IGAs? I had a read through the documentation, but I’m interested to know how lucrative they are, and how well they work for Win Store apps.

  3. Eyehawk / Jan 14 2013 6:53 am

    Hi iunkn, I’ve had a go adding the pub center ad into my game. However, I noticed that if I set it to invisible on one layout, and then visible on another, it takes about 30 seconds, before the ad becomes visible again. I set the ad to be visible at the start of the second layout, so I’m not sure why there is a bit of a delay?

    • iunkn / Jan 27 2013 6:21 pm

      @Eyehawk, I have noticed that behavior too. Sometimes the Ads show up after a delay (but most of the times, they show up just fine too). I would imagine there could be some Ad serving delays from the service.

  4. Ryan Joy (@atxryan) / May 20 2013 11:57 pm

    Hi iunkn, I’ve just released a new plugin for Construct 2 that makes adding ads even easier. You can see the plugin and documentation here: http://ryanjoy.com/2013/05/introducing-a-windows-store-advertising-plugin-for-scirra-construct-2/. I’d love any feedback you have.

    • iunkn / Jun 8 2013 4:44 pm

      Very cool, Ryan!

Trackbacks

  1. Adding Ad SDK to your Construct 2 Windows 8 App | Chrissy Codes

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s