React Native ExpoのiOSアプリにFirebase Analyticsを追加する

React Native Expo SDK は、Firebase Analytics に対応しています。最低限の作業で導入できるので、スマホアプリのアクセス解析の有力な手段になります。この記事では、Expo の iOS アプリに Firebase Analytics を追加する手順についてご説明します。

インストール

$ expo install expo-firebase-core expo-firebase-analytics

Firebase の設定

Firebase にプロジェクトを登録し、アプリを作成します。このとき、アプリとして「iOS」「Web」の両方を作成する必要があります。スマホアプリしか使わない場合でも「Web」を作成しておいてください。

• iOS の作業: GoogleService-Info.plist をダウンロードしてルート直下に置きます
• Web の作業: 「設定」「全般」画面の下部「Firebase SDK snippet」に記載されている「measurementId」をコピーしておきます

app.json の修正

app.json を適宜修正します。

    “ios”: {
      “supportsTablet”: false,
      "buildNumber": "4",
      “bundleIdentifier”: “com.example.AppName”,
      “googleServicesFile”: “./GoogleService-Info.plist”,
      “config”: {
        “googleMobileAdsAppId”: “ca-app-pub-0000000000”
      }
    },
    “web”: {
      “config”: {
        “firebase”: {
          “measurementId”: “G-AAAAAAAAAA”
        }
      }
    }

Firebase に Web アプリを登録して取得した「measurementId」をこの app.json に記載します。もし記載しないと以下のエラーが発生します。

”Firebase Analytics is not available in the Expo client.”

なお、app.json にはたくさんの設定項目があります。iOS, Web 周りの最低限の設定は上記で足りていてアプリをリリース可能ですが、一応ざっとでも設定項目全体に目を通しておくと良いかもしれません。

app.json / app.config.js - Expo Documentation

計測するイベントの設定

アプリの画面遷移などのタイミングで起こすイベントを設定します。私は画面遷移に React Navigation を使用していたため、下記のページの通り App.js にスクリーン移動のイベントを追加しました。

Screen tracking for analytics | React Navigation

取り急ぎはこれで計測できます。

Expo の FirebaseAnalytics には他にもイベントの種類などあるので、より詳しく測定したい場合は以下の公式ドキュメントを参照してイベントを設定してください。

FirebaseAnalytics - Expo Documentation

動作確認

アプリを起動して、FirebaseAnalytics の「過去 30 分のユーザー」に反応があるかを確認しましょう。これで、Firebase Analytics の導入は完了です。