バージョン
- PhoneGap:3.3.0
- Admob SDK のバージョン: GoogleAdMobAdsSdkiOS-6.8.0
- Xcode: 5.0.3
Admob SDKのダウンロード
Admobに行って、最新のiOS用のSDKをダウンロードしておく。
Admob SDK を Xcode で追加
Admob 公式ドキュメント通りにXCodeで追加する。
Viewの追加の方はしなくてよい
Getting Started - Google Mobile Ads SDK — Google Developers
ちなみに、上記はXcode 4のスクリーンショットでわかりづらく、Xcode 5 での追加の仕方がすごくわかりづらいです。
どうやったか既にわかりませんが、アプリ名のトップの下に GoogleAdMobAdsSDKというディレクトリを作り、ファイルを入れました。
やることの流れ
- Add-ons以外のファイルを Xcodeの Add Files...で追加
- Build PhasesタブのLink Binary With Librariesドロップダウンで、 + ボタンを使って、下記frameworksを追加
- AdSupport
- AudioToolbox
- AVFoundation
- CoreGraphics
- CoreTelephony
- MessageUI
- StoreKit
- SystemConfiguration
- Other Linker Flags に -ObjC を追加(私の環境では既に追加されていた)
admobプラグインを追加
以下、コマンドでAdmobプラグインを追加
phonegap local plugin add https://github.com/aliokan/cordova-plugin-admob
Admobプラグインの設定
まずは簡単に一連の設定の流れ
- AdMobPlugin.js を www/ 以下のどこかに置く
- index.html (など)から AdMobPlugin.js を読み込む
- index.js に関数を追加して、起動時に広告読み込むようにする
下部に表示させるなどのhtmlの変更は不要のようだ。
AdMobPlugin.js を配置
Admobプラグインにある AdMobPlugin.js を www/ 以下のどこかに置く
cordova-plugin-admob/www/AdMobPlugin.js at master · aliokan/cordova-plugin-admob
index.html にAdMobPlugin.jsを追加
僕の場合、以下のような感じ。
index.jsで使うので、その前に読み込む。
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/AdMobPlugin.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" charset="utf-8">
app.initialize();
</script>
これで、グローバルな var admob が export されて以下の4つのfunctionが使えるようになる
- admob.createBannerView()
- admob.createInterstitialView()
- admob.requestAd()
- admob.killAd()
index.jsを編集
Admobプラグインの Example/index.js を参考に下記のような function を追加する
recievedEvent に app.addBanner(); を追加するのを忘れないように注意。
ここで admob.* な functionを利用している。
receivedEvent: function(id) {
app.addBanner();
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);
},
addBanner: function() {
var successCreateBannerView = function() { console.log("addBanner Success"); admob.requestAd({'isTesting': true},success,error); };
var success = function() { console.log("requestAd Success"); };
var error = function(message) { console.log("Oopsie! " + message); };
var options = {
'publisherId': 'Ad unit ID',
'adSize': admob.AD_SIZE.BANNER
}
admob.createBannerView(options,successCreateBannerView,error);
},
addInterstitial: function() {
var successCreateBannerView = function() { console.log("addInterstitial Success"); admob.requestAd({'isTesting': true},success,error); };
var success = function() { console.log("requestAd Success"); };
var error = function(message) { console.log("Oopsie! " + message); };
var options = {
'publisherId': 'Ad unit ID'
}
admob.createInterstitialView(options,successCreateBannerView,error);
},
killAd: function() {
var success = function() { console.log("killAd Success"); };
var error = function(message) { console.log("Oopsie! " + message); };
admob.killAd(success,error);
}
上記をやったら、実機では広告が下部に表示されました。
iOSシミュレータでは表示されませんでした。
ドキュメントが本当になくて面倒でしたが、意外にさくっと行きました。
コンパイル時にエラー
エラー内容
warning: no rule to process file '/Users/hoge/app_name/platforms/ios/AppName/Plugins/com.google.cordova.plugin.AdMobPlugin/libGoogleAdMobAds.a' of type archive.ar for architecture armv7s
対応方法
個別に最新のAdmob SDKを入れているので、Admob Pluginの方は削除
Target -> Build phases のタブで
以下の2つの項目で
* Compile Sources
* Link Binary With Libraries
で、 libGoogleAdMobAds.a が赤くなっているので、 - で削除
ドメイン・ホワイトリスティング問題?
以下の情報確証ないです。
僕の実機テストでは問題なかったようです。
ドメイン・ホワイトリスティング問題がないか念のため確認するために、＜access＞ element の origin 属性 を "*" に設定した方が良い?
www/config.xml の該当行を以下の様にするという意味だと思うが、セキュリティ的にどうなのか。
<access origin="*" />
検索用語
phonegap, cordova, admob, google, xcode, ios, iphone, ipad,