Cordova 3.5でAdmobのバナー広告を表示する

このエントリーを Google ブックマーク に追加
LINEで送る
Pocket

バージョン
Xcode 5.1.1
Cordova 3.5.0-0.2.4
Google Mobile Ads SDK iOS-6.9.2

PhoneGapでAdmob広告を追加する方法はこちらに書かれている。
http://qiita.com/hshimo/items/0229e03614d0843c8217

Admobの準備

Admobにアカウントを作り、アプリを登録後にバナーを作成する。
バナーを作ると広告ユニット IDが生成される。これを後で使う。

作成後、アプリを起動してもすぐにはバナーが表示されず、表示されるまで数時間かかったので、アカウントやバナーは先に作っておくと良いかもしれない。

Cordovaの準備

Cordovaをインストールしてプロジェクトを作成する。
以下を参考に。
http://cordova.apache.org/docs/en/3.5.0/guide_cli_index.md.html#The%20Command-Line%20Interface

以下は、MacでiOSのアプリをビルドするまでの例

$ sudo npm install -g cordova
$ cordova create hello com.example.hello HelloWorld
$ cd hello
$ cordova platform add ios
$ cordova build

ビルドすると、platformsディレクトリ内のiosディレクトリにXcodeのプロジェクトファイル(〜.xcodeproj)ができる。

Cordovaにadmobプラグインを追加

cordova-plugin-admobを追加する。
https://github.com/aliokan/cordova-plugin-admob

cordova plugin add https://github.com/aliokan/cordova-plugin-admob

Admob SDKのダウンロードと導入

生成されたXcodeのプロジェクトファイルを開いて、以下のスタート ガイドに従ってSDKを導入する。-ObjCは追加済みだった。
https://developers.google.com/mobile-ads-sdk/docs/?hl=en_US#ios

HTMLにAdmobプラグインを組み込む

今回は、以下のようにAdMobPlugin.js、index.js(プラグインのExampleフォルダに入っていたもの)を配置して読み込んだ。
その後、app.initialize();を実行している。

<script src="cordova.js"></script>
<script src="js/AdMobPlugin.js"></script>
<script src="js/index.js"></script>
<script type="text/javascript" charset="utf-8">
    app.initialize();
</script>

indes.js内の「Ad unit ID」をAdmobで生成された広告ユニット IDに置き換える。

ビルド

cordovaのビルドをしてからXcodeでビルドする。
実機でもシミュレータでもバナーが表示された。