Tag wpdev (28)

Windows Phone: including ads in your Universal app, and using In-App Purchasing to turn them off
Mood: busy
Posted on 2014-09-27 15:03:00
Tags: windowsphone wpdev
Words: 824

Free apps are wildly more popular than paid apps, but some people (myself included) get annoyed at ads in apps. To get the best of both worlds, you can include ads in your free app but let people in-app purchase a way to turn them off. Here's how to do this in a Universal app (see how to do this in WP 8.0), and for an example, check out the Universal app Float to Hex!

Part 1: Adding advertising

Unfortunately there aren't a ton of ad APIs that support Windows Phone 8.1 Universal apps at the time of this writing - the only ones I found are Microsoft pubCenter, AdDuplex, and Smaato. I went with Microsoft pubCenter - here's where you can download the Windows Phone API and the Windows API.

You can follow the guides at those links for a step-by-step walkthrough to add ads to the Windows and Windows Phone version of your app.

--

Now the ads in your app should be working! Launch it and make sure that they appear and don't obscure any content.

Part 2: Using In-App Purchasing to Disable Ads

1. Log in to the Windows Phone Dev Center, click "Dashboard" (at the top), then "Submit App" on the left. Under the "App info" section, give your app a name and category, then Save. (you can change these when you're ready to submit for real) Go back to the dashboard, select your new app, and go to the "Products" section. Click "Add in-app product". For the product info, specify whatever you want for the product alias, but beware - don't use any spaces or special characters so you can use the same one on Windows! (for Float to Hex I used "FloatToHexNoAds" for the alias and product identifier) Set the type to "Durable", select the price, and click Save. Then specify a title and description - for the icon, feel free to use this:

(click for full-sized image)

Finally, submit the product. Since your app isn't published yet, it won't be visible to anyone else.

2. Repeat step 1 on the Windows Dev Center.

Now you need to check for the in-app purchase and hide the ad if so. One way is to do this declaratively using data binding, and it's arguably a bit cleaner than the way below. Up to you!

3. Either create a Utils class or add this code to an existing one:



public static bool ShowAds { get; set; }

public static void UpdateInAppPurchases()

{

    ShowAds = true;

    var allLicenses = Windows.ApplicationModel.Store.

        CurrentApp.LicenseInformation.ProductLicenses;

    if (allLicenses.ContainsKey("FloatToHexNoAds"))

    {

        var license = allLicenses["FloatToHexNoAds"];

        if (license.IsActive)

        {

            ShowAds = false;

        }

    }

}

public static async Task RemoveAds(Action updateAd)

{

    try

    {

        await Windows.ApplicationModel.Store.CurrentApp

            .RequestProductPurchaseAsync("FloatToHexNoAds");

        UpdateInAppPurchases();

        updateAd();

    }

    catch (Exception)

    {

        // oh well

    }

}

In App.xaml.cs, add a call to Utils.UpdateInAppPurchases() to the OnLaunched() and OnActivated() methods.

4. Find all of the ads you added in XAML, and add Visibility="Collapsed" to them. Then, to each page that has an ad, add this method:



public void UpdateAd()

{

    Ad.Visibility = Utils.ShowAds ? Visibility.Visible : Visibility.Collapsed;

}

and add a call to UpdateAd() to the NavigationHelper_LoadState() method.

5. All that's left now is to add the option to remove ads from inside the app. If you'd like to add a menu item in the app bar, you can add the following XAML in both Windows and Windows Phone:



<Page.BottomAppBar>

    <CommandBar x:Name="AdUpgradeBar">

        <AppBarButton Label="remove ads" Icon="Remove" Click="RemoveAds_Click" 

            x:Name="RemoveAdsButton"/>

    </CommandBar>

</Page.BottomAppBar>

Or, you can add a button in your about page, or both.

Then, add the event handler:



private async void RemoveAds_Click(object sender, EventArgs e)

{

    await Utils.RemoveAds(UpdateAd);

}

Finally, to remove the menu item from the page if the user has already removed the ads, add this code to your UpdateAd() method:



    RemoveAdsButton.Visibility =

        Utils.ShowAds ? Visibility.Visible : Visibility.Collapsed;

6. (optional) If you'd like to back up the In-App Purchases, you can back them up in the app settings. This isn't strictly necessary, but if the In-App Purchasing system gets messed up again your app will be covered.
--

To test the in-app purchasing code, you'll need to publish your app as a beta. (all in-app purchases are free in a beta) But, other than that, you're done!

One final warning: With Universal apps, you publish the Windows and Windows Phone version separately, and then apparently it detects the the apps are Universal. When I published Float to Hex, the Windows version detected that it was Universal almost immediately, but it took 36 hours for the Windows Phone version to show that it was Universal. So don't panic for a few days like I did!

References: Windows Phone blog post on In-App Purchasing

In-App Purchase: Success stories and Tips to test common in-app failure scenarios

Dev Center now open for Windows Phone 8.1 and universal Windows app submissions

--

See all my Windows Phone development posts. I also send out a monthly-or-so email with news for developers - check out the latest email and sign up here!

I'm planning on writing more posts about Windows Phone development - what would you like to hear about? Reply here, on twitter at @gregstoll, or by email at greg@gregstoll.com.

Type	File size	Time to parse
Text (`USE_AWAIT`=true) (`CONFIGURE_AWAIT`=false)	278K	4.8 secs
Text (`USE_AWAIT`=true) (`CONFIGURE_AWAIT`=true)	278K	0.4 secs
Text (`USE_AWAIT`=false)	278K	0.4 secs
JSON (parsing one at a time)	1200KB	3.2 secs
JSON (using `JsonConvert`)	1200KB	1.3 secs
Binary	103KB	0.15 secs