ionicアプリケーションに広告、解析プラグインを入れる

ionicでアプリ開発を初めて行った際に、Google関連のプラグインを入れるのに手間取ったため、備忘録として残しておく

コードの実装部分に関してはマニュアルと同じなので割愛

分析系（Android）

ブラウザアプリ用にGoogleAnalytics、スマホアプリ用にFirebaseをインストールする

ionic cordova plugin add cordova-plugin-firebase-analytics
npm install @ionic-native/firebase-analytics

ionic cordova plugin add cordova-plugin-google-analytics
npm install @ionic-native/google-analytics

この段階で、firebaseがコンフリクトを起こしていたので、以下のプラグインをインストール

cordova plugin add cordova-android-play-services-gradle-release  --variable PLAY_SERVICES_VERSION=+
cordova plugin add cordova-android-firebase-gradle-release  --variable FIREBASE_VERSION=+
cordova plugin add cordova-android-support-gradle-release --variable FIREBASE_VERSION=+

現在はAndroidXのプラグインも必要な仕様となっているため、以下プラグインを追加

ionic cordova plugin add cordova-plugin-androidx
ionic cordova plugin add cordova-plugin-androidx-adapter

ここまでで、GoogleAnalyticsもFirebaseAnalyticsも動作していることを確認

広告(Android)

マニュアル通りに以下のコマンドを実行

ionic cordova plugin add cordova-plugin-admob-free --save --variable ADMOB_APP_ID="ADMOB_APP_ID"
npm install @ionic-native/admob-free

しかし、これを行うとアプリが起動時にすぐクラッシュしてしまった。
Android StudioでAndroidManifest.xmlを確認したところ、""ADMOB_APP_ID""となっていた。

つまり、上記コマンドはダブルクォートをつけてはダメだったので、プラグインを取り除いた後、再度以下のコマンドを実行

ionic cordova plugin add cordova-plugin-admob-free --save --variable ADMOB_APP_ID=ADMOB_APP_ID
npm install @ionic-native/admob-free

これで問題なく広告が表示された。

IOS

ビルド時にエラーが発生しており、cocoapodsが必要とされていたので、インストール

npm install -g ios-deploy
gem install cocoapods
pod repo update

次に、config.xmlファイルを編集

<platform name="ios">
        <resource-file src="GoogleService-Info.plist" />
        <edit-config file="*-Info.plist" mode="merge" target="GADIsAdManagerApp">
            <true />
        </edit-config>
        <edit-config file="*-Info.plist" mode="merge" target="GADApplicationIdentifier">
            <string>ADMOB_APP_ID</string>
        </edit-config>

ここまで行うことで、無事に分析プラグイン、広告プラグインが動作するようになった。
なかなかマニュアルには載ってないものも多く、Githubアカウントを見に行ったり、StackOverflowを見回ったりなど、OSSを使うにあたっては英語を活用とした検索スキルが必要であることを痛感した。