k.shima07のWindowsストアアプリ開発ブログ

Windowsストアアプリの開発について一人の学生の視点から発信していきます

Windows ストア アプリに広告を入れよう!!

この記事ではWindows ストア アプリに広告を入れる手順を、2013年3月14日に紹介したものです。

流れ
1.Microsoft Advertising pubCenterでアプリと広告ユニットを登録
2.Microsoft Advertising SDKをインストール
3.アプリに広告コントロールを実装

 

1.Microsoft Advertising pubCenterでアプリと広告ユニットを登録

 https://pubcenter.microsoft.com/

f:id:k_shima07_win:20130314010817p:plain

新しくアカウントを作るかMSのアカウントでログイン

アプリと広告ユニットを登録 
・アプリを登録

f:id:k_shima07_win:20130314011331p:plain
Register applicationをクリック

f:id:k_shima07_win:20130314011407p:plain
登録する名前と対象のデバイスを選択してSaveをクリック

f:id:k_shima07_win:20130314011502p:plain

成功すると上のような画面が表示される(以下アカウントやIDなどは黒の線で隠します)

・広告ユニットを登録 

f:id:k_shima07_win:20130314011621p:plain
Create ad unitをクリック

f:id:k_shima07_win:20130314011733p:plain
登録名をAd unit nameに、
紐付けるアプリを選択(さっき登録したもの)
Ad unit sizeで広告の大きさを設定(選択すると上のようにプレビューが見れます)

f:id:k_shima07_win:20130314011938p:plain
最後に広告するアプリのカテゴリを選択してセーブをクリック

f:id:k_shima07_win:20130314012022p:plain
完了するとこのような画面が表示されます。
※ここのApplication IDとAd Unit IDはこのあとアプリに実装するときに使います。

 

2.Microsoft Advertising SDKをインストール

http://adsinapps.microsoft.com/sdk

f:id:k_shima07_win:20130314012212p:plain
トップのDirect download をクリック

ダウンロード後、指示に従ってインストール。

 

3.アプリに広告コントロールを実装

 C#+XAML

f:id:k_shima07_win:20130314012352p:plain

f:id:k_shima07_win:20130314012423p:plain
参照の追加でSDKを追加します。

広告を追加したいXaml
<Page に
xmlns:UI="using:Microsoft.Advertising.WinRT.UI"
を追加

広告を入れたいところに
<UI:AdControl 
            ApplicationId="アプリID " 
            AdUnitId="広告ユニットID " 
            HorizontalAlignment="Left" 
            Height="広告の大きさ(px)" 
            Margin="0,0,0,0" 
            VerticalAlignment="Top" 
            Width="広告の大きさ(px)"/>
を追加
(広告の大きさの例:Height="90px")

package.appxmanifest の機能のインターネット(クライアント)にチェック

これで広告が表示されます。

 

JavaScript + HTML

f:id:k_shima07_win:20130314012806p:plain

f:id:k_shima07_win:20130314012838p:plain
参照の追加でSDKを追加します。

広告を追加したいhtmlに
 <script src="/MSAdvertisingJS/ads/ad.js" ></script>
を追加

広告を入れたいところに
<div id="myAd" style="position: absolute; top: 53px; left: 0px; 
     width:広告の大きさ(px); height:広告の大きさ(px); z-index: 1" 
     data-win-control="MicrosoftNSJS.Advertising.AdControl" 
     data-win-options="{applicationId: 'アプリID ', 
       adUnitId: '広告ユニットID '}">
</div>
を追加

package.appxmanifest の機能のインターネット(クライアント)にチェック


参考にしたURL:
http://ch3cooh.hatenablog.jp/entry/20130115/1358221286
http://adsinapps.microsoft.com/sdk
http://msdn.microsoft.com/en-us/library/advertising-windows-additional-examples(v=msads.10).aspx
http://msdn.microsoft.com/en-us/library/advertising-windows-walkthroughs-xaml(v=msads.10).aspx
http://msdn.microsoft.com/en-us/library/advertising-windows-walkthroughs-html5(v=msads.10).aspx