はじめに

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プラグインに書かれているように設定します。

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>

config.xmlの編集 (idの修正)

先ほどと同じconfig.xmlのidをfirebaseコンソールで指定したアプリのidに変更します。
この例では、com.example.firebasetest。

config.xml

<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行を追加。以下は、追加した部分近くのみ取り出しています。

src/app/app.module.ts

import { FirebaseAnalytics } from '@ionic-native/firebase-analytics/ngx'; // 追加

@NgModule({
  providers: [
    StatusBar,
    SplashScreen,
    FirebaseAnalytics,  // 追加
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})

app.component.tsの編集

src/app/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のリアルタイムデバッグは、別の記事に記載しています。

Ionic+CordovaでFirebase Analyticsの実装(ios/Android)