Windows ストア アプリに広告を入れよう!!
この記事ではWindows ストア アプリに広告を入れる手順を、2013年3月14日に紹介したものです。
流れ
1.Microsoft Advertising pubCenterでアプリと広告ユニットを登録
2.Microsoft Advertising SDKをインストール
3.アプリに広告コントロールを実装
1.Microsoft Advertising pubCenterでアプリと広告ユニットを登録
https://pubcenter.microsoft.com/
新しくアカウントを作るかMSのアカウントでログイン
アプリと広告ユニットを登録
・アプリを登録
Register applicationをクリック
登録する名前と対象のデバイスを選択してSaveをクリック
成功すると上のような画面が表示される(以下アカウントやIDなどは黒の線で隠します)
・広告ユニットを登録
Create ad unitをクリック
登録名をAd unit nameに、
紐付けるアプリを選択(さっき登録したもの)
Ad unit sizeで広告の大きさを設定(選択すると上のようにプレビューが見れます)
最後に広告するアプリのカテゴリを選択してセーブをクリック
完了するとこのような画面が表示されます。
※ここのApplication IDとAd Unit IDはこのあとアプリに実装するときに使います。
2.Microsoft Advertising SDKをインストール
http://adsinapps.microsoft.com/sdk
トップのDirect download をクリック
ダウンロード後、指示に従ってインストール。
3.アプリに広告コントロールを実装
参照の追加で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
参照の追加で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