ionicで作成したHTML5アプリにAdMobを挿入しました。
導入でかなりハマってしまったので、手順をまとめておきます。

環境

ionic 1.1.0
ionic-cli 1.7.8
cordova 5.5.3
Mac OS X El Capitan

AdMobプラグインのインストール

cordova-admob-proというプラグインを使用します。次のコマンドでプラグインをインストールします。

$ ionic plugin add cordova-plugin-admobpro

Android SDK Toolsのインストール

公式ページのインストール手順にも書いてますが、いくつかAndroid SDK Toolが必要なようです。私はこんな感じのインストール状況でいけました。ここに挙げているもの全部が必要かは分かりませんが、少なくともGoogle Play系は要りそうな気がする。。

あ、ちなみにこれはMac版Android Studioの画面です。

セットアップ

こちらも公式ページにサンプルコードが載ってましたが、AngularJSらしくインジェクションするようにしてみました。

こんな感じのコードをどっかに置きます。なお、bannerとinterstitialにはAdMobで発行される各広告用のキーを記述してください。（なお、Interstitial広告を使用してなかったら、interstitial周りの記述は必要ありません。）

admob.coffee

'use strict'

@app
.factory 'AdMobManager', ->
  admobid =
    if /(android)/i.test(navigator.userAgent)
      banner: 'ca-app-pub-xxxxx',
      interstitial: 'ca-app-pub-yyyyy'
    else if /(ipod|iphone|ipad)/i.test(navigator.userAgent)
      banner: 'ca-app-pub-xxxxx',
      interstitial: 'ca-app-pub-yyyyy'
    else
      banner: 'ca-app-pub-xxxxx',
      interstitial: 'ca-app-pub-yyyyy'

  initApp = ->
    if typeof AdMob == 'undefined'
      console.log 'AdMob plugin is not ready.', admobid
      return

    AdMob.createBanner
      adId: admobid.banner
      isTesting: true # とりあえずテスト用の広告
      overlap: false
      offsetTopBar: false
      position: AdMob.AD_POSITION.BOTTOM_CENTER
      bgColor: 'black'

    AdMob.prepareInterstitial
      adId: admobid.interstitial
      autoShow: true

  factory =
    init: ->
      if /(ipad|iphone|ipod|android|windows phone)/i.test(navigator.userAgent)
        initApp()

作成したadmob.jsをindex.htmlで読み込みんだら、このファクトリを使って、AdMobを初期化するコードをapp.coffeeに記述します。

app.coffee

'use strict'

@app = angular.module('MyApp', ['ionic'])
.run ($ionicPlatform, AdMobManager) ->
  $ionicPlatform.ready ->
    # Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    # for form inputs)
    if window.cordova && window.cordova.plugins.Keyboard
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true)
    if window.StatusBar
      StatusBar.styleDefault()

	# ↓↓↓この行を追加↓↓↓
    AdMobManager.init()

ビルドするがエラーでコケる

これで準備は完了のはずなので勢い良くビルドしてみましたが、何かエラーが出ました。

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':processDebugResources'.
> Error: more than one library with package name 'com.google.android.gms'
  You can temporarily disable this error with android.enforceUniquePackageName=false
  However, this is temporary and will be enforced in 1.0

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

BUILD FAILED

解決策は https://github.com/floatinghotpot/cordova-admob-pro/issues/199 に載ってました。どうやら、com.google.android.gmsで参照されるパッケージが複数あるから、らしいです。

不要なプラグインを削除します。

$ ionic plugin remove cordova-google-play-services

これにて「一応」作業完了のはず。$ ionic run androidで実機で確認してみると・・無事、テスト用の広告が表示されました！ （ブラウザ上では表示されませんのでご注意を）

戻るキーで戻った時の挙動が変わった・・？

通常ionicでアプリを作成していると、ユーザーが端末の戻るキーを押した場合、前のURLに戻るはずなのですが、このプラグインを使用してから挙動が変わってしまいました。何故かアプリがクローズしてしまうのです。。。

調べたら、ありました。
https://github.com/floatinghotpot/cordova-admob-pro/issues/199

解決策は今のところ platforms/android/CordovaLib/src/org/apache/cordova/CordovaActivity.java を開き、次のように修正するしかないようです。暫定対応ですね。。

CordovaActivity.java

// import文が並んでいる箇所に追加
import android.view.KeyEvent;

...

// 最後にこのメソッドを追加
@Override
public boolean dispatchKeyEvent(KeyEvent event) {
    if (this.appView != null) {
    
        View webview = this.appView.getView();
        if (webview != null) {
            return webview.dispatchKeyEvent(event);
        }

        return true;
    }

    return false;
}

再度ビルドして、実機にapkをインストールして確認したところ、無事に戻るキーの挙動が元通りになりました！
ちなみにこのファイルは、ionic platform remove androidをしてしまうと削除されてしまいますので、一度プラットフォームを破棄して再度platform addした際には、もう一度修正する必要がありますのでご注意を。

かなり時間がかかってしまいましたが、最低限の広告は表示できるようになりました。