はじめに
iOSやAndroidアプリの利用状況把握のツールとして、Firebase Analyticsがあります。Ionic4+CordovaでFirebase Analyticsを試してみました。
環境
- Ionic CLI : 5.2.8
- Ionic Framework : @ionic/angular 4.9.1
- Cordova CLI : 9.0.0
- Cordova Platforms : android 8.0.0, ios 5.0.1
- cordova-plugin-firebase-analytics: 3.0.0
Firebase設定ファイルの準備
Firebaseコンソールから、iOSおよびAndroidに必要な設定ファイルをダウンロードします。
ダウンロードまでの画面キャプチャを載せます。
- iOS用:
GoogleService-Info.plist - Android用:
google-services.json
Ionicの設定手順
Ionic プラットフォームとプラグインの追加
$ ionic start myApp tabs
$ cd myApp
$ ionic cordova platform add ios
$ ionic cordova platform add android
$ ionic cordova plugin add cordova-plugin-firebase-analytics
Firebase設定ファイルの配置
ダウンロードしたFirebaseの設定ファイルをプロジェクトフォルダにコピーします。この例では、myAppのフォルダになります。
$ cp <ダウンロードした場所>/GoogleService-Info.plist .
$ cp <ダウンロードした場所>/google-services.json .
config.xmlの編集
プロジェクトフォルダにあるconfig.xmlを編集します。
Firebase Analyticsプラグインで利用しているGoogle Serviceプラグインに書かれているように設定します。
<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>
config.xmlの編集 (idの修正)
先ほどと同じconfig.xmlのidをfirebaseコンソールで指定したアプリのidに変更します。
この例では、com.example.firebasetest。
<widget id="com.example.firebasetest" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
app.module.tsの編集
FireebaseAnalyticsの2行を追加。以下は、追加した部分近くのみ取り出しています。
import { FirebaseAnalytics } from '@ionic-native/firebase-analytics/ngx'; // 追加
@NgModule({
providers: [
StatusBar,
SplashScreen,
FirebaseAnalytics, // 追加
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
app.component.tsの編集
import { FirebaseAnalytics } from '@ionic-native/firebase-analytics/ngx'; // 追加
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss']
})
export class AppComponent {
constructor(
private platform: Platform,
private splashScreen: SplashScreen,
private firebaseAnalytics: FirebaseAnalytics, // 追加
private statusBar: StatusBar
) {
this.initializeApp();
}
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
this.firebaseAnalytics.logEvent('page_view', {page: "dashboard"}); // 追加
});
}
}
Androidアプリの起動
以下のコマンドでアプリ起動することで、Firebase Analyticsに記録されます。
$ ionic cordova run android
イベントは、Firebaseコンソールで確認できますが、何も設定しないと約1時間に１回にまとめてアップロードされるので、以下のデバッグコマンドを使って、リアルタイムで確認します。Firebase Analyticsのデバッグは、Firebase Analyticsイベントのデバッグに記載の以下の方法でリアルタイムで確認することができます。
$ adb shell setprop debug.firebase.analytics.app com.example.firebasetest
iosアプリの起動
アプリIDの変更
プロジェクトフォルダ(platforms/ios)をXcodeで開いて、Bundle Identifierを変更します。
アプリの起動
$ ionic cordova run ios
Androidと同様に、イベントは、Firebaseコンソールで確認できますが、何も設定しないと約1時間に１回にまとめてアップロードされるので、以下のデバッグコマンドを使って、リアルタイムで確認します。Firebase Analyticsのデバッグは、Firebase Analyticsイベントのデバッグに記載の方法でリアルタイムで確認することができます。iosのリアルタイムデバッグは、別の記事に記載しています。