バージョン

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,