Windows ストア アプリにMicrosoft Advertising SDKを使って広告を貼って一獲千金を狙う！

こんばんは、@ch3coohです。正しいタイトルは「Windows ストア アプリに広告を貼る」です。このタイトルは完全な釣りタイトルですね。すみません……。

この記事を最後まで読んでいただけると、Windows ストア アプリで広告付きのアプリケーションを開発することができるようになります。

スマートフォンアプリケーションと同様に、アプリケーションの販売やアイテム課金以外に開発者のマネタイズの手段として、Windows ストア アプリでも広告を貼るという選択肢が用意されています。

マイクロソフトでは、「Microsoft Advertising SDK」と呼ばれるSDKが提供されています。この記事では、Windows ストア アプリにMicrosoft Advertising SDKを使って広告を掲載するまでをご紹介します。

Microsoft Advertising pubCenterでの登録が完了していることを前提に、広告を掲載するまでの手順としては、以下の通りです。

1. Microsoft Advertising pubCenterでアプリケーションの登録と広告ユニットの登録
2. Microsoft Advertising SDKのインストール
3. アプリケーションでの広告コントロールの実装

これらの順に説明をしていきたいと思います。

pubCenterで広告ユニットを作成する

以下のページに移動します。

• Microsoft Advertising pubCenter

[Setup]タブの部分をクリックします。

広告を貼るアプリケーションの登録をおこないます。

Name欄にアプリケーションの名前を入力します。Device typeには「Windows Phone 7」と「Windows 8」の候補がありますので、「Windows 8」を選択してください。名前が決まったらSaveボタンをクリックしてください。

アプリケーションの登録が完了すると、アプリケーションIDが表示されます。

次に、広告ユニットの登録をおこないます。Create ad unitのリンクをクリックします。

広告ユニットの作成画面へ遷移します。ここで広告ユニットの名前、および広告のサイズを決めることができます。

下図のように広告サイズ別のもっとも適した使い方の例を紹介しています。開発中のアプリケーションに適切な大きさの広告を選択してください。

アプリケーションとマッチした広告を表示させるため、開発中のアプリケーションのカテゴリを選択します。ここでは仮に「Sports」を選択ました。[Save]ボタンをクリックすると広告ユニットの作成が完了です。

アプリケーションIDと広告ユニットIDが表示されます。これらのIDは後で使用しますのでメモするなどして、すぐに参照できるように置いておいてください。

Microsoft Advertinsing SDK for Windows 8をインストールする

以下のページに移動します。

• Windows 8 Ads in Apps – Developer Resources

「Download the new Windows 8 Ads in Apps SDK today to get started.」のリンクからSDKをダウンロードします。ダウンロードが完了したらインストールを実行してください。

広告を配置する

ライブラリ内で広告データの取得と表示をおこなうため、プログラム側では何も書かなくても広告を表示することができます。

まずは、ライブラリを使用するためにDLLの参照をおこないます。ソリューション エクスプローラーの[参照設定]を右クリックして、コンテキストメニューに表示される[参照の追加]をクリックします。[参照マネージャー]が表示されますので、[Windows]、[拡張]の順に選択していき、「Microsoft Advertising SDK for Windows 8」にチェックをいれます。

以下のようにXAMLにてAdコントロールを配置します。

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:AdvertisingSample1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:ad="using:Microsoft.Advertising.WinRT.UI"
    x:Class="AdvertisingSample1.MainPage"
    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="90*"/>
            <RowDefinition Height="350*"/>
        </Grid.RowDefinitions>

        <ad:AdControl x:Name="ad1" Width="728" Height="90" Grid.Row="0"
               ApplicationId="{アプリID}" AdUnitId="{広告ユニットID}" />
    </Grid>
</Page>

上記のXAMLを表示すると下図のように広告を表示します。

広告の取得に失敗した時の対策

もしネットワークの接続失敗や、アプリケーションIDまたはユニットIDに抜け等のなんらかの原因で広告データの取得に失敗すると広告は表示されません。広告が表示されないと当然ユーザーが広告をクリックすることがなくなるため収益が発生しません。

スマートフォンアプリケーションでは、広告データの取得に失敗すると、あらかじめアプリケーションに仕込んだ自社アプリケーションの広告を表示させることがよくあります。
広告の取得に失敗した時の対策を入れてみましょう。ここでは、Assetsディレクトリ配下に「no-ads.png」という、広告が取得できなかった場合の画像を用意しました。以下のXAMLで広告コントロールとちょうど重なるように配置しています。

広告を取得するとAdRefreshedイベントが発生し、広告データの取得に失敗するとErrorOccurredイベントが発生します。それぞれのイベントにハンドラを設定しておきます。

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:AdvertisingSample1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:UI="using:Microsoft.Advertising.WinRT.UI"
    x:Class="AdvertisingSample1.MainPage"
    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="90*"/>
            <RowDefinition Height="350*"/>
        </Grid.RowDefinitions>

        <Image x:Name="adError" Source="Assets/no-ads.png" Width="728" 
               Height="90" Grid.Row="0" Visibility="Visible"/>
        <UI:AdControl x:Name="ad1" Width="728" Height="90" Grid.Row="0"
               ApplicationId="{アプリID}" AdUnitId="{広告ユニットID}" 
               ErrorOccurred="ad1_ErrorOccurred" AdRefreshed="ad1_AdRefreshed" />
    </Grid>
</Page>

広告データの取得に失敗した場合は、ad1_ErrorOccurredが呼び出されます。このメソッド内にて広告コントロールを非表示にし、デフォルトの画像を表示されせます。

正常に広告が表示された場合は、ad1_AdRefreshedが呼び出されます。このメソッド内にて広告コントロールを表示して、デフォルトの画像を非表示にします。

この処理によって、広告データの取得失敗時にはデフォルトの画像のみを表示させて、成功時には広告のみを表示させます。

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace AdvertisingSample1
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        private void ad1_ErrorOccurred(object sender, 
            Microsoft.Advertising.WinRT.UI.AdErrorEventArgs e)
        {
            if (e.Error != null)
            {
                return;
            }

            // 広告の取得時にエラーが発生したので、
            // デフォルトの画像を表示して、広告を非表示にする
            ad1.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
            adError.Visibility = Windows.UI.Xaml.Visibility.Visible;
        }

        private void ad1_AdRefreshed(object sender, RoutedEventArgs e)
        {
            // 広告を受信したので、デフォルトの画像を非表示にして、
            // 広告を表示する
            ad1.Visibility = Windows.UI.Xaml.Visibility.Visible;
            adError.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
        }
    }
}

わざとWi-Fiの接続を切断し、通信エラーが発生する環境にて、上記のコードを実行すると下図のようにデフォルトの画像が表示されます。

開発中の場合

開発中の場合、前述したpubCenterで取得したアプリケーションIDと広告ユニットIDを使用することができませんので、以下のテスト用のIDをご使用ください。ApplicationIdは一律で「d25517cb-12d4-4699-8bdc-52040c712cab」を使用します。

アプリケーションID

d25517cb-12d4-4699-8bdc-52040c712cab

広告ユニットIDは、すべての種類別に用意されていますので、ここでは一部だけをピックアップさせていただきます。

広告サイズ(幅x横)	概要	広告ユニットID
160 x 600	画像広告(クリックしたらフルスクリーン表示される)	10043136
160 x 600	動画広告(クリックしたらフルスクリーン表示される)	10043135
728 x 90	画像広告(クリックしたらフルスクリーン表示される)	10043000
728 x 90	画像広告	10042998

上表以外のテスト用広告ユニットIDに関しては、以下のページにてご確認ください。

• Test Mode Values

以上で、Windows ストア アプリで広告を貼る方法については終わりです。

おわりに

どうでもよい話なのですが、スマートフォンアプリケーションにおいて、無料アプリかつ広告で収益を得るビジネスモデルの場合、一般的に1ダウンロードあたり1円の収益があると言われています。

個人的には、広告モデルはかなりアプリケーションの性質に依存するものだと思っています。なんでもかんでもぺたぺた貼れば利益が上がるというものではありません。