Ionic × AngularのモバイルアプリからFirebase Analyticsに連携する

Published in

nextbeat-engineering

13 min readJan 30, 2023

初めまして。株式会社ネクストビートで KIDSNAシッターというサービスの開発を担当している中倉と申します。

ネクストビートでは一部プロダクトにIonic × Angularでモバイルアプリのクロスプラットフォーム展開を行っています。

今回はIonic × Angularで作成したモバイルアプリをネイティブ領域に触れずにFirebase Analyticsに連携できる @capacitor-community/firebase-analyticsというプラグインを試してみました。
本記事ではアプリからイベントログを送信し、FirebaseAnalyticsでイベントが計上されることを目標にしています。

@capacitor-community/firebase-analytics

@capacitor-community/firebase-analytics Capacitor community plugin for native Firebase Analytics. ✏️ ✏️ This plugin now…

www.npmjs.com

今回利用した環境は以下になります。
・Angular: 15.0.0
・Ionic: 6.0.0
・Capacitor: 4.0.0
・@capacitor-community/firebase-analytics: 4.0.0

連携用に作成したサンプルアプリはこちらとなります。

GitHub - nakakura25/analytics-sample

You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or…

github.com

Firebase側の準備

Firebaseプロジェクトを作成する

Firebaseコンソールからプロジェクトを作成します。

手順３でGoogleアナリティクスのアカウントがあればそのまま紐づけることができますが、持っていない場合はstep-3で同時に作成することができます。

FirebaseプロジェクトにAndroidアプリ/Appleアプリ情報を登録する

作成したプロジェクトの

プロジェクトの概要 > プロジェクトの設定 > 全般タブ > マイアプリ

からAndroidアプリ、Appleアプリの追加を行います。

Androidアプリ

必須項目としてはアプリの登録のAndroid パッケージ名となります。
後述でandroid/ios用にプラットフォームを作成するのですが、特にこだわりがなければここは「io.ionic.starter」を指定しておけば良いかと思います。

あとはStep-2のファイルgoogle-services.jsonをDLしておいてください。
Step-3以降については今回の構成では考慮しなくて問題ありません。

Appleアプリ

こちらもAndroidの設定と同様となります。
Appleバンドル名に「io.ionic.starter」を指定します。

Step-2も同様にファイル GoogleService-Info.plistをDLします。
こちらもStep-3以降については今回の構成では考慮しなくて問題ありません。

Ionicアプリの作成

ここではFirebaseに連携するためのアプリを作成します。
Ionicアプリのベース部分の作成についてはここでは割愛しますが、こちらの記事でIonic×Angularアプリの基本的な紹介をしていますので是非参考にしてください。

analytics-sample/src/app
~~~~~~~ ※一部省略
└── services
    └── firebase.analytics.service.ts
└── home
    └── conversion
        ├── conversion.component.html
        ├── conversion.component.scss
        ├── conversion.component.ts
        └── conversion.module.ts 
    └── page1
        ├── page1.component.html
        ├── page1.component.scss
        ├── page1.component.ts
        └── page1.module.ts 
    └── page2
        ├── page2.component.html
        ├── page2.component.scss
        ├── page2.component.ts
        └── page2.module.ts 
    ├── home-routing.module.ts
    ├── home.module.ts
    ├── home.html
    ├── home.scss
    └── home.ts

今回は上記のような構成で
「home > page1 > page2 > conversion」
とルーティングする簡単なアプリを作成し、画面遷移毎にイベントをロギングするようにしています。

まずはcapacitorのプラグイン @capacitor-community/firebase-analyticsをインストールします。

npm install @capacitor-community/firebase-analytics@latest

以下のサービスのようにFirebaseAnalyticsをimportして
FirebaseAnalytics.logEvent(name, params) のように利用します。

・FirebaseAnalyticsService

import { FirebaseAnalytics } from '@capacitor-community/firebase-analytics'
...
logEvent(name: string, params?: Object) {
  FirebaseAnalytics.logEvent({
    name:   name,
    params: !!params ? params : {}
  })
}

nameはFirebaseで推奨されるイベント、あるいは自分で指定したイベント名称を指定します。
paramはカスタムパラメータとなります。
＊カスタムパラメータはアナリティクスレポートのディメンション、指標またはBigQueryなどに利用できるパラメータとなります。

他にもプラグインではユーザIDやプロパティの設定など、Firebaseが提供しているAPIを一通り利用できるようなメソッドが提供されていました。

こちらのサービスをPage1Componentのようにボタンクリック時やコンポーネントのライフサイクルで呼び出しを行います。

・Page1Component

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Page1
    </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
  <ion-button  expand="full" (click)="next()">Page2</ion-button>
  <ion-button color="dark"  expand="full" (click)="back()">back</ion-button>
</ion-content>

import { Component, OnInit }  　　　　　　  　　from '@angular/core';
import { NavController } 　　　 　　　   　　　　　　 from '@ionic/angular';
import { FirebaseAnalyticsService } from 'src/app/services/firebase.analytics.service';

@Component({
  selector: 'app-page1',
  templateUrl: './page1.component.html',
  styleUrls: ['./page1.component.scss'],
})
export class Page1Component implements OnInit {
  constructor(
    private nav:       NavController,
    private analytics: FirebaseAnalyticsService
  ) { }

  ngOnInit() {}

  ionViewDidEnter(): void {
    this.analytics.logEvent('viewPage1')
  }
  next() {
    this.analytics.logEvent('ClickPage2')
    this.nav.navigateForward(['/home/page2'])
  }
  back() {
    this.nav.back()
  }
}

Ionicで作成するモバイルアプリからlogEventを呼び出した結果がFirebaseでEventとしてカウントできることをゴールとしているので、android/ios用にプラットフォームを追加していきます。

プラットフォームの追加

・Android
npx cap add android
＊@capacitor/androidのインストールが必要です。(npm install @capacitor/android)

・iOS
npx cap add ios
＊@capacitor/iosのインストールが必要です。(npm install @capacitor/ios)

プラットフォームの追加が完了したら、android/iosディレクトリがそれぞれ作成されているかと思いますので、Firebaseの設定時にDLしたファイルをそれぞれ配置していきます。

Android

android
└── app
    ├── src/
    ...(省略)
    └── google-services.json

iOS

ios
└── App
    └── App
        ├── public/
        ...(省略)
        └── GoogleService-Info.plist

ファイルを配置したら同期を行います。

・プラグインの同期
npx cap sync

・Android Stdioを開く
npx cap open android
・XCodeを開く
npx cap open ios

この後はそれぞれAndroidStudio、Xcodeから端末、エミュレーターにアプリをデプロイします

DebugViewでイベントログの送信を確認する

デプロイしたアプリを動かすとログからイベントが送信されているのがわかりますが、Firebaseコンソール上ですぐに反映されません。

・イベント送信ログ（Android）

To native (Capacitor plugin): callbackId: 133153819, pluginId: FirebaseAnalytics, methodName: logEvent
callback: 133153819, pluginId: FirebaseAnalytics, methodName: logEvent, methodData: {"name":"viewPage2","params":{}}

これはFirebaseでイベントの反映がバッチ処理で行われているとの事。

通常、アプリによって記録されたイベントは、約 1 時間にわたってバッチ処理され、まとめてアップロードされます。

なのでテストではFirebase DebugViewで確認します。
デバッグを行うためにはAndroid/iOSでそれぞれ以下の対応を行います。

Android

・デバッグ モードを開始する
adb shell setprop debug.firebase.analytics.app io.ionic.starter

・デバッグ モードを無効にする
adb shell setprop debug.firebase.analytics.app .none.

iOS

・デバッグ モードを開始する
XCode > Product > Scheme > Edit Scheme > Run
argumentタブを選択してArguments Passed On Lunchに -FIRDebugEnabled を指定します

無効にする場合には -FIRDebugDisabled を指定します。

これでFirebaseコンソールのDebugViewからイベントの連携状況が確認できました。