- Rules for Ads in Win8 Style Apps
- Working with the Windows 8 Ads SDK
- Working with Media-Based Ads
- Working with Text-Based Ads
From the book
From the book
From the book
Working with Media-Based Ads
The Windows Advertising SDK offers four types of ad content for your apps: image, image and text, text-only and video. Within each category, you have several options for the ad dimensions and the action taken when the user clicks on an ad (for instance, browse to url, show a full-screen version of the ad, play a video, etc.). It’s up to you to decide which type of ad fits best into the overall user experience of your app. Let’s take a look at an example of adding an image-based ad into an app.
For this example, I’m going to use the Geolocation sample from Chapter 11, and you can grab that from the online source to follow along. Let’s add the SDK into our app by right clicking on the References folder in Visual Studio and selecting the Add References... option. A dialog will open, as shown in Figure 13.17.
)
Figure 13.17 Adding a reference to the Windows Advertising SDK
When the window opens, select the Microsoft Advertising SDK for Windows 8 (JS) option and then click OK. Visual Studio will add the SDK to your project, and you can now add a script reference to the SDK in your app:
<script type="text/javascript" src="/MSAdvertisingJS/ads/ad.js"></script>
Ads from the Advertising SDK are WinJS controls that you can drop into your app wherever you want or need them to reside.
<div id="imageAd" data-win-control="MicrosoftNSJS.Advertising.AdControl"
data-win-options="{applicationId: 'test_client', adUnitId: 'Image_160x600'}">
</div>
In addition to the control attribute, I’ll set some data-win-options to initialize my ad. The applicationId is the unique identifier for my app, something I’d obtain from Microsoft when registering for an advertising consumer account. Because the SDK is still in preview mode, you should always use test_client for this value. The other value I’m providing here is the adUnitId, a string value that represents the type and size of the ad I want to serve to users[6]. With my setup all done, I can run my app and see an ad being served, as in Figure 13.18.
)
Figure 13.18 Adding Image Ads to Win8 Style apps
It’s just that easy to start working with ads in your apps, but chances are you probably want some additional control over the way ads are served, and how they are localized. The Advertising SDK has support for that too, and I can easily work with my Ad controls via JavaScript to tweak their behavior.
var adControl = document.querySelector('#imageAd').winControl;
adControl.isAutoCollapseEnabled = true;
adControl.isAutoRefreshEnabled = false;
The isAutoCollapseEnabled property tells the SDK to automatically hide my control if any errors occur while fetching an ad, and the isAutoRefreshEnabled setting controls whether ads should be automatically cycled at a SDK-controlled interval. Setting this value to false indicates to the SDK that I’ll take control of refreshing ads in the app.
I can also set some additional properties that help the SDK target relevant ads to my users.
adControl.keywords = "win8, Win8, geolocation"; adControl.countryOrRegion = "US"; adControl.latitude = position.coordinate.latitude; adControl.longitude = position.coordinate.longitude; adControl.refresh();
First, I’ll set some keywords relevant my app, which the SDK can then use to refine ad content. Then, I’ll set the countryOrRegion value to “US” and the latitude and longitude values to the coordinates I’m already getting from the Geolocation call in my app. These values allow the SDK to present localized ads and, in theory, increase the likelihood of a click from a user. Finally, I'll manually serve a new ad with the refresh method.
[6] A complete listing of Ad Unit Id values can be found at http://tinysells.com/224 (http://msdn.microsoft.com/en-us/library/hh506361(v=msads.10).aspx)