MonacaアプリをFirebase Analyticsで計測する
この記事について
Monacaで作成したアプリをFirebaseのAnalyticsで計測する方法です。
MonacaにはGoogleAnalyticsを使用して計測するプラグインがあります。
こちらを使用してもよかったのですが、GA4には対応しておらずユニバーサルアナリティクスでの計測しかできないようです。
ユニバーサルアナリティクスのサポート期限が迫っているのと、今回利用者数の多いアプリを計測したかったため、ヒット数の上限を気にせず計測できるようFirebaseのAnalytics（GA4）を使用したので備忘録として残します。
なお、Analyticsを設定するMonacaプロジェクトは作成済みであることを前提として説明します。
Firebaseとは
Googleが提供するmBaaS（mobile Backend as a Service）です。
モバイルアプリやWebアプリケーション向けに、ストレージなどの様々なバックエンド機能を提供してくれます。プッシュ通知を送る際にも使いますね。
そのFirebaseの機能の一つにAnalyticsの機能があります。
ただ中身はGoogleAnalyticsのようで、Firebase Analyticsで計測した数値はGoogleAnalyticsのコンソールから確認ができます。
料金プランには無料のSparkプランと有料のBlazeプラン（従量課金制）がありますが、Analyticsはどちらのプランでも無料で使用できます。ヒット数上限もなさそうです。
実装
環境
- Cordova10
- cordova-plugin-firebase-analytics 6.1.0
①Firebaseの準備
Firebaseにログインしてください。この時ログインしたGoogleアカウントに、GoogleAnalyticsのプロパティが追加されます。
ログインしたらプロジェクトを作成します。
画面に従って入力していくと、「Googleアナリティクスを有効にする」という設定が出てくるので有効にしましょう。
有効にするとFirebaseと紐づけるGoogeleAnalyticsの設定を行う画面に進みます。
初めてGoogleAnalyticsを使う場合はGoogleAnalytics側のプロジェクトの設定等を行うようです。
既にGoogleAnalyticsにアカウントがある場合は紐づけるアカウントを選択するか作成するかできます。
②Firebaseにアプリを追加する
プロジェクトを作成したらFirebaseにアプリを追加していきます。
Androidアプリの場合はAndroidのマークを、iOSアプリの場合はiOSのマークをクリックしてください。
▼Androidの手順
- Androidパッケージ名とアプリのニックネームを入力します。
Androidパッケージ名はMonacaプロジェクトの設定＞Androidアプリ設定＞パッケージ名を入力してください。アプリのニックネームは好きなもので大丈夫です。 - 「アプリを登録」をクリックするとgoogle-service.jsonが生成されるのでダウンロードしてください。後ほど使います。
- 次へ進むとFirebaseSDKを追加するように言われますが不要ですので次へ進みコンソールへ戻ってください。
▼iOSの手順
- AppleバンドルIDとアプリのニックネームを入力します。
AppleバンドルIDはMonacaプロジェクトの設定＞iOSアプリ設定＞AppIDを入力してください。アプリのニックネームは好きなもので大丈夫です。 - 「アプリを登録」をクリックするとGoogleService-info.plistが生成されるのでダウンロードしてください。後ほど使います。
- 次へ進むとFirebaseSDKを追加するように言われますが不要ですので次へ進みコンソールへ戻ってください。
③プラグインのインストール
ここから先はMonacaでの作業となります。
今回はcordova-plugin-firebase-analyticsプラグインを使用するのでこちらをインストールしてください。
上記のプラグインをGithubからzipファイルでダウンロードしてください。
この時、プラグインのバージョンによってデバイスの対応バージョンが変わってくるので注意してください。
対応バージョンはplugin.xmlの下記のあたりを見ればわかります。
<engines>
<engine name="cordova" version=">=10.0.0"/>
<engine name="cordova-android" version=">=9.0.0"/>
<engine name="cordova-ios" version=">=6.0.0"/>
</engines>
zipファイルをダウンロードしたらMonacaプロジェクトを開き、「設定＞Cordovaプラグインの管理＞Cordovaプラグインのインポート」を開いてください。「圧縮されたパッケージ」でzipファイルを選択しOK。
Androidアプリの場合は「設定＞Androidアプリ設定＞AndroidXを有効にする」にチェックを入れてください。
ここにチェックを入れた場合、カスタムビルドデバッガーをビルドするとエラーが発生します。
カスタムビルドデバッガーで動作確認を行う場合はcordova-plugin-androidx-adapterプラグインをインストールしてください。インストール手順は先ほどと同じです。
参考
④Firebase設定ファイルの設置
②でダウンロードしたgoogle-service.jsonとGoogleService-info.plistをMonacaプロジェクトに設置します。
Monacaプロジェクトのドキュメントルートにそれぞれアップロードしてください。
⑤config.xmlの編集
cordova-plugin-firebase-analyticsがインストールされたら、config.xmlを開き下記のように編集してください
<platform name="android">
<resource-file src="google-services.json" target="app/google-services.json" /> //この行を追加
...
</platform>
<platform name="ios">
<resource-file src="GoogleService-Info.plist" /> //この行を追加
...
</platform>
⑥プログラムの追加
ここまでの設定だけで最低限の計測は行えていますが、その場合スクリーン名が(notset)になってしまいどこのページの計測結果かわからなくなってしまいます。なので各ページにスクリーン名を設定してください。
<script>
document.addEventListener('deviceready', function() {
cordova.plugins.firebase.analytics.setCurrentScreen("Index");
}, false);
</script>
PV数など自動で取得できるイベントもありますが、ボタンをクリックしたタイミングなど任意のタイミングでイベントを発生させたい場合はlogEvent()を使ってください。
cordova.plugins.firebase.analytics.logEvent("login", {method: "Google"});
自動で取得するイベント、任意のタイミングで設定できるイベントは下記を参考にしてください。
ビルド
プラグインを追加していますの動作確認を行う場合はでアプリをビルドする必要があります。
ビルド形式はなんでも良いですが、修正するたびにビルドするのは大変ですのでカスタムビルドデバッガーがおすすめです。
前述しましたが、Androidのカスタマイズビルドデバッガーをビルドする場合はcordova-plugin-androidx-adapterプラグインをインストールしてください。
計測確認
ドキュメントによると計測してから集計されるまで約1時間ほどがかかるそうです。
とはいえ開発中にそんなに待っていられませんので、リアルタイムで計測確認する方法を紹介します。
①GoogleAnalyticsのリアルタイム計測機能
Firebaseのサイドメニューから分析＞Realtimeを選択すると過去30分以内の計測結果が確認できます。GoogleAnalyticsのコンソールからも同じものが確認できます。
ただしイベントがどのタイミングで発火しているかなどはわかりません。
②DebugView
FirebaseののDebugViewを使うことでほぼリアルタイムに計測ができているか確認ができます。
▼Androidでのやり方
前提としてAndroidSDKのインストールが必要です。
- 計測確認を行いたいAndroidデバイスをPCにUSB接続します
- 下記のコマンドを実行します。PACKAGE_NAMEはMonacaのAndroidアプリ設定のパッケージ名を入れてください。
adb shell setprop debug.firebase.analytics.app [PACKAGE_NAME]
- Firebaseのサイドメニューから分析＞DebugViewを選択
- Android端末でアプリを操作し計測ができると発火したイベントがロギングされていきます。
- 停止する場合は下記のコマンドを実行してください。
adb shell setprop debug.firebase.analytics.app .none.
▼iOSでのやり方
XCodeを使用するのですが、XCodeを触ったことがなくやり方がわかりませんでした…。
参考記事を置いておきますので、やり方がわかる方教えてください…
参考
Discussion
プラグインのインストール方法としてURL・パッケージ名を指定してインストール方法を紹介していましたが、その方法だとビルド時に最新のバージョンのプラグインを使用してしまうようです。なのでzipファイルでインストールしましょう
いつの間にかcordova-plugin-firebase-analyticsがアップデートされており、Android9以下で動作せず大変でした…