ionicアプリ(cordova)にAdMob広告を挿入する


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というプラグインを使用します。次のコマンドでプラグインをインストールします。

Android SDK Toolsのインストール

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

スクリーンショット 2015-11-10 19.23.07.png

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

セットアップ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

関連する記事


コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください