Cordova Admob Plugin を Pro から Free へ変更（Androidアプリ開発）

今日は、ゆり の自由研究のお手伝い・・・

これ付き合って、今日一日が終わってしまったｗ

本当は新しいアプリの開発をしたかったけど、まともに時間が取れそうもないので、Cordovaのアプリ開発ネタを一つ。

アプリ上に、バナー広告などを表示させたいとき、今まで、Admob Proを使っていたが、他のサイトのもあるように、本来、有料のプラグインで利用料を払わないと、数パーセントの報酬が引かれている様。（検証したわけではないので本当かは不明・・・）

そんなわけで、

cordova plugin admob free に移行しようかと思い、とりあえずお試しで実施。

前提：Corodvaのバージョン

・CLI：8.0

・プラットフォーム：Cordova Android 7.1

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

cordova plugin add cordova-plugin-admob-free --save

で、ＯＫ的なサイトが多いけど、自分の場合、プラグインインストール時にエラーになり、以下のプラグインの追加を要求された。

・cordova-promise-polyfill

・cordova-admob-sdk

上記２つも追加したうえで、cordova-plugin-admob-freeをインストールすると成功。

※2018年11月1日追記：

どうも最近のバージョンで、cordova-plugin-admob-freeインストール時に、API_KEY_FOR_ANDROIDを付けた状態で、インストールする形になったようなので、ご注意を。

# Admob Free を追加（API_KEY_FOR_ANDROID 付き）
cordova plugin add cordova-plugin-admob-free --save --variable ADMOB_APP_ID="ca-【自分のアプリの広告ＩＤ】"

config.xml（plugin部分を抜粋）のイメージとしては以下の感じ。

 <plugin name="cordova-promise-polyfill" spec="0.0.2" />
 <plugin name="cordova-admob-sdk" spec="^0.17.0">
 <variable name="PLAY_SERVICES_VERSION" value="11.0.4" />
 </plugin>
 <plugin name="cordova-plugin-admob-free" spec="^0.17.4" />
 <engine name="android" spec="^7.1.0" />

②バナー広告の表示実装

このあたりは、GitHubや、他のサイトにもあるような感じで、以下の実装を追加。

私は、onDeviceReadyファンクション内に下部用バナー表示を追加しました。

 // バナー広告表示
 admob.banner.config({
 id: 'ca-app-pub-XXXXXXXXXXX/ZZZZZZZZ',
 isTesting: true, // テスト広告
 autoShow: true,
 });
 admob.banner.prepare();

これで、一応、テスト用（Test Ad）のバナー広告が表示された。

ただ、本番用ではまだ試していないので、実際に収益があがるかは不明・・・たぶん、大丈夫！

ちなみに、Admob Proの最新版プラグインをインストールして、ビルドしてもCorodva Android 7.1の環境下では、ビルド時にエラーが発生した。

原因はちゃんと調査していないので、何とも言えないが、バージョン間の互換性の問題だろうか・・・

まぁ、Freeで表示されたので、一旦、良しとして、新作の開発に進もうっと！

夏休み中には、一本完成させたいところ！

Apache Cordovaを勉強しようと思っても、あまり書籍って無いんだよね。

割と新しいものだとこちらの様。 

HTML5とApache Cordovaで始めるハイブリッドアプリ開発 (CodeZine BOOKS)

こっちは読んだことがあるのですが、Cordova（どちらかというとPhoneGap時代）を基本から学びたいという方にはおススメです。少しバージョンは古いけど・・・ 

[iOS/Android対応] HTML5 ハイブリッドアプリ開発[実践]入門 (Software Design plus)

12/28 追記：

Cordova 8.1で、Admob Free プラグインを導入したお話です。

上手くいかない方はこちらもお試しください。

summerplus64.hatenablog.com

Cordova Android 7.0のビルド失敗のお話を記載していますので、同じ問題を抱えているかたはどうぞ♪

summerplus64.hatenablog.com