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

# はじめに
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`


<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404406/0c31ba64-377d-9dca-3d88-7beae6170cf5.png">


<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404406/8ea5453d-5300-14e2-36e3-4db782f676d0.png">

<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404406/e7fe70a2-5c30-4ae9-8dce-94fdbcbd1809.png">

<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404406/e0473feb-8cc8-1eaa-41c9-867550fc4248.png">

# Ionicの設定手順

### Ionic プラットフォームとプラグインの追加

``` shell
$ 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プラグイン](https://github.com/chemerisuk/cordova-support-google-services/blob/master/README.md)に書かれているように設定します。

``` 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イベントのデバッグ](
https://firebase.google.com/docs/analytics/debugview?hl=ja)に記載の以下の方法でリアルタイムで確認することができます。

```
$ adb shell setprop debug.firebase.analytics.app com.example.firebasetest
```

# iosアプリの起動
### アプリIDの変更
プロジェクトフォルダ(`platforms/ios`)をXcodeで開いて、Bundle Identifierを変更します。

<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404406/c51b81c7-1311-18fb-4c6a-17c133703362.png">

### アプリの起動

```
$ ionic cordova run ios
```

Androidと同様に、イベントは、Firebaseコンソールで確認できますが、何も設定しないと約1時間に１回にまとめてアップロードされるので、以下のデバッグコマンドを使って、リアルタイムで確認します。Firebase Analyticsのデバッグは、[Firebase Analyticsイベントのデバッグ](
https://firebase.google.com/docs/analytics/debugview?hl=ja)に記載の方法でリアルタイムで確認することができます。iosのリアルタイムデバッグは、[別の記事](
https://qiita.com/KenNagami/items/48d3fea8f616fd60e3e4)に記載しています。


# 参考文献
- [Firebase Analyticsプラグイン(Ionicページ)](https://ionicframework.com/jp/docs/native/firebase-analytics)
- [Firebase Analyticsプラグイン(GitHubページ)](https://github.com/chemerisuk/cordova-plugin-firebase-analytics)
- [Google Serviceプラグイン(GitHubページ)](
https://github.com/chemerisuk/cordova-support-google-services/blob/master/README.md)
- [Firebase Analyticsイベントのデバッグ](
https://firebase.google.com/docs/analytics/debugview?hl=ja)