Now that you have finally developed your application, you may wonder how this one could help you to get money. There is, at least, 2 possibilities:

1. Add some fee to get your application
2. Create a free application that will have ads

The second option is interesting because it does not make sense to buy all applications, particularly if your application use a free service. So let’s take a look at the Microsoft’s solution to get some ads in your Windows 8 applications.

Download the SDK

First thing you need to do is to download the Microsoft Advertising SDK for Windows 8. This one can be found here. Once downloaded, install it and go to the next part (yes, this is probably the most simple part of this tutorial).

Register your application

To display ads in your Windows 8 application, you must first register your application with pubCenter. This allows pubCenter to communicate with your application through the pubCenter API and begin serving ads. So first, create an account to the pubCenter (https://pubcenter.microsoft.com) then:

1. Click the Setup tab.
2. Click Applications.
3. Click Register application.
4. In the Name box, enter an application name.
5. In the Device type box, select the type of device (indeed, you can choose Windows 8 or Windows Phone because this is the same system).

Once an application is registered, you can begin creating ad units for your application. Don’t forget to note the Application ID that is display on the Application details screen: you’ll need it in your code:

Create Ad units

Ad units contain ads displayed in your application. You can create as many as ad units for your application. Here are the steps needed to create your first ad unit:

1. Click the Setup tab.
2. Click Ad units.
3. Click the Windows 8 application tab.
4. Click Create application ad unit.
5. In the Ad unit name box, enter the name you want to use for this ad unit.
6. In the Application box, select the application for this ad unit.
7. In the Ad unit size box, select the dimensions of the ad unit as it will appear in your application. Note that, on the right part of the screen, you can see a sample preview.
8. In the Windows 8 App Store categories section, choose one category for the type of advertisements.

In the Application code information section, make a note your Ad Unit ID. Once again, you’ll need it in your application code (note that the Application ID is recalled here too in case you miss it).

Use the Ads controls

Your application and ad unit are created, you are now ready to use them in your application code. First, as the controls will communicate with pubCenter using APIs, you need to be sure that Internet is allowed in your application. Double-click on the file Package.appxmanifest and, in Capabilities tab, look to see if Internet (Client) is checked.

OK, now, you need to add a reference to the Advertising SDK to be able to use the controls available to you. From the Solution Explorer window, right click References, and then select Add Reference…:

Click Windows, and that will expand to show Extensions. Click Extensions, select Microsoft Advertising SDK for Windows 8 (XAML), and then click OK:

If you are working on a JavaScript project, the steps are the same except that the reference is named Microsoft Advertising SDK for Windows 8 (JS):

Next steps are similar if you are working in XAML or JavaScript but, for simplicity purpose, I’ll cover both technology.

XAML Application

The AdControl can be used directly in your application. You need to add the following namespace before to continue:

xmlns:Ads="using:Microsoft.Advertising.WinRT.UI"

Then, just add the following code:

<Ads:AdControl ApplicationId="XXXXX-XXXX-XXXX-XXXX-XXXXXXX"
               AdUnitId="XXXXXX"
               Height="250"
               Width="250"
               HorizontalAlignment="Center"
               VerticalAlignment="Center" />

As you can see, you need to set the properties ApplicationId and AdUnitId (the ones you have to remember from the steps above) and, if you execute the code, you can see the following results:

The AdControl is just a simple ContentControl that use pubCenter APIs to get the ad that need to be displaed. If user click on the ad, he is redirected to the website dedicated to it.

JavaScript Application

The same result can be obtained from a JavaScript Application. After adding the reference, just add the following code:

<script src="/MSAdvertisingJS/ads/ad.js"></script>

Then, you’re now able to create an AdControl using the same technique you use to create a ListView (for example): create a div element and set its data-win-control property to MicrosoftNSJS.Advertising.AdControl:

<div id="adControl" style="position: absolute; top: 53px; left: 0px; width: 250px; height: 250px; z-index: 1"
     data-win-control="MicrosoftNSJS.Advertising.AdControl"
     data-win-options="{applicationId: 'XXXX-XXXX-XXXX-XXXX-XXXXXXX', adUnitId: 'XXXXXX'}">
</div>

Once again, you can see that properties applicationId and adUnitId are set (using the data-win-options property).

The result is quite similar to the XAML version (the image might not be the same because, remember, it’s provided by pubCenter):

 

As you can see, this is really easy to use and you can easily integrate it in your applications. For example, if you have a XAML application, just create a DataTemplateSelector:

public class ItemTemplateSelector : DataTemplateSelector
{
    protected override Windows.UI.Xaml.DataTemplate SelectTemplateCore(object item, Windows.UI.Xaml.DependencyObject container)
    {
        var sampleDataItem = item as SampleDataItem;
        if(sampleDataItem != null)
        {
            if(sampleDataItem.UniqueId == "pub")
            {
                return Application.Current.Resources["PubTemplate"] as DataTemplate;
            }
        }

        return Application.Current.Resources["Standard250x250ItemTemplate"] as DataTemplate;
    }
}

Using this code, I can choose the DataTemplate that my GridView will apply to its item.

<GridView x:Name="itemGridView"
          AutomationProperties.AutomationId="ItemGridView"
          AutomationProperties.Name="Grouped Items"
          Grid.RowSpan="2"
          Padding="116,137,40,46"
          ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
          ItemTemplateSelector="{StaticResource ItemTemplateSelector}"
          SelectionMode="None"
          IsSwipeEnabled="false"
          IsItemClickEnabled="True"
          ItemClick="ItemView_ItemClick">

Then, if I execute the code, you can see that all the items are correctly loaded as tiles but, for one of them, the tile display an ad:

Of course, the size for the tile of the ad is the same as all other tiles but if you create an Ad unit for different size, don’t forget to set up your GridView to use different items sizes.

More about AdControl

Here are some tips about the AdControl.

1. First, if you want to refresh the ad displayed on screen, you need to set the property IsAutoRefreshEnabled to false. Then, call the Refresh method.
2. If you want to improve performances when user is scrolling, set the property IsPerformanceScrollingEnabled to true. When the user will scroll, the current ad will temporarily be replaced by a snapshot image of the ad. When the AdControl has stopped scrolling it will revert back to normal behavior.
3. Calling Suspend method, on the AdControl, suspends the current ad and replaces the current view of the ad with a snapshot of what was currently being rendered. After calling Suspend the AdControl will not automatically refresh, if IsAutoRefreshEnabled=true, and you cannot manually refresh the AdControl until Resume has been called.
4. If you call the Resume method, it’ll remove the static snapshot of the AdControl and replaces it with the dynamic display.  If IsAutoRefreshEnable is set to true, automatic refresh will resume.

 

Results

To see how much money you’ve earned using the ads in your application, you just need to go in the pubCenter: https://pubcenter.microsoft.com/ReportManagement/Dashboard.aspx

Conclusion

As you can see, earning money with Windows 8 applications is really simple. Microsoft Advertising SDK simplify a lot the work for developers. You can set as many ads as you want in you application. You can even use multiple ads on the same screen but just be careful to not use too many ads or your users might don’t appreciate.

 

Happy coding!