- 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 Text-Based Ads
For some apps, image and video ads as too obtrusive. In these cases, you’ll want to consider one of the image-based options provided by the SDK. For instance, let’s look at one of my apps, Tom8to. Tom8to is a Win8 style Pomodoro timer application with a simple interface. When you open the app, you see a big red play button, as in Figure 13.19.
)
Figure 13.19 Main Screen of the Tom8to App
Clicking on the play button starts the timer, and the UI changes to a large countdown with buttons to pause or reset the timer, as shown in Figure 13.20.
)
Figure 13.20 Countdown screen of the Tom8to App
I’m interested in incorporating ads into my app, but I have two hard requirements. The first is that the ad should be small and mostly text and the second is that ads should only display when the timer is not running. After all, what’s the point of having a timer app that throws ads in your face when you’re trying to focus? With the Advertising SDK, and a little help from the WinJS Animation library, these two requirements should be easily met. I’ll start with the markup, which I’ll add to the header right next to the app logo.
<div id="adsBlock" data-win-control="MicrosoftNSJS.Advertising.AdControl"
data-win-options="{applicationId: 'test_client',
adUnitId: 'ImageText_320x50'}">
</div>
The only difference here from the last example is the adUnitId, which I’m setting to ‘ImageText_320x50’. For a pure-text-only ad, I could also set it to ‘Text_320x50’. The result can be seen in Figure 13.21.
)
Figure 13.21 Tom8to App with a Header Ad
Not too bad, but by default, the ad doesn’t go away when I click the big red button. That’s an easy enough fix; I need only grab my ad control from the DOM and use the WinJS Animation library to fade it out when the user clicks the big red button:
play.addEventListener('click', function() {
var ad = document.querySelector('#adsBlock');
WinJS.UI.Animation.fadeOut(ad);
});
Then, when the countdown ends or the user cancels the current countdown, I'll fade the ad back in:
WinJS.UI.Animation.fadeIn(ad); ad.winControl.refresh();
Now, when the user starts a countdown, the ad will fade out and the screen will remain unblemished and distraction-free, just as in Figure 13.20.