SnapmartアプリにFirebaseAnalyticsを導入しました

概要

SnapmartアプリはReact Native + Expoで動いています。
2019年5月にAndroid版をリリースし、2019年12月にiOS版をリリースしました。
リリース当初は不具合や非機能要件を満たせないことが多かったため、その対応に追われることが多かったのは記憶に新しいです。

現在は、致命的な不具合がなくなったので、ユーザーの使い勝手を向上させる施策が徐々に増えてきました。
しかし、アプリの施策を出しをする際に、定量的なデータがないため、定性的な情報から仮説を立て、実行を決断するしかありませんでした。

極端な例を出すとこのようなイメージです。

私はこの画面が使いにくいと思うから修正した方が良いのでは(他の人は使いにくいと感じるのかな...?)
最近お問い合わせが多い画面なので、修正した方が良いのでは(声が上がっていない画面は...?)

そのため、明確に機能向上すると判断できない施策をなんとなく実行するような状態です。

そんな中、2020年4月にExpo SDK V37がリリースされました。

https://blog.expo.io/expo-sdk-37-is-now-available-dd5770f066a6

このリリースで、FirebaseAnalyticsがExpoを使っているアプリでも使用できるようになりました！

FirebaseAnalyticsとは

FirebaseAnalyticsを使用するとアプリのイベントをGoogleアナリティクスに記録することができます。
そのため、どのユーザーが、どこの画面で、どのように行動したのかをトラッキングすることができます。
このログを蓄積することで、どの画面に問題があるのかを定量的に把握することが可能になります。

この記事では、React Native + ExpoアプリにFirebaseAnalyticsを導入する方法について書きます。

設定

expo-firebase-analyticsをインストール

まずは、expo-firebase-analyticsを以下のコマンドでインストールします。

expo install expo-firebase-analytics

Firebase projectを作成

次に、Firebase projectを作成します。

ログイン - Google アカウント

上記のリンクにアクセスし、以下の通り進めていきます。

プロジェクトを作成
プロジェクト名を入力
Google Analyticsと連携
Google Analyticsにプロパパティ追加

f:id:watasihasitujidesu:20200710144856p:plain

モバイルアプリの設定

app.jsonの修正

FirebaseAnalyticsとExpoアプリを連携させるために、app.jsonのios/androidブロックにある、ストア内の一意識別子を追加します。

{
  "expo": {
    "android": {
+      "package": "com.mypackage.coolapp",
    },
    "ios": {
+      "bundleIdentifier": "com.mypackage.coolapp",
    }
  }
}

Firebase projectにアプリを追加

プロジェクトを作成後にOS毎にアプリの設定をする必要があります。
設定はダッシュボード => 「プロジェクトの概要」横の設定アイコンをクリック => プロジェクトを設定から、各種アプリを追加していきます。

f:id:watasihasitujidesu:20200710144830p:plain

Androidアプリの場合は、ドロイド君をクリックします。アプリを追加するのに必要な情報は、さきほどapp.jsonで追加したpackageです。

f:id:watasihasitujidesu:20200710144838p:plain

「アプリの登録」ボタンを押した後は、設定ファイルをダウンロードします。

アプリの追加は以上です。 iOSアプリも必要な場合は、上記の手順と同様にAppleのロゴを押下してアプリを追加 => bundleIdentifierを入力 => 設定ファイルをダウンロードと進めます。

設定ファイルをプロジェクトに配置しapp.jsonに追加

さきほどの手順でAndroidであればgoogle-services.json、iOSであればGoogleService-Info.plistがダウンロードされるはずです。
ダウンロードした2つのファイルは、Expoアプリのルートディレクトリに配置します。
また、app.jsonにそれぞれのファイルのpathを設定します。

{
  "expo": {
    "android": {
      "package": "com.mypackage.coolapp",
+      "googleServicesFile": "./google-services.json"
    },
    "ios": {
      "bundleIdentifier": "com.mypackage.coolapp",
+      "googleServicesFile": "./GoogleService-Info.plist"
    }
  }
}

アプリの設定は以上です。

ローカル環境でデバッグする方法

通常、FirebaseAnalyticsにイベントを送信する実装をする際、ローカルで意図した通りにイベントが発火されるかを確認することが多いです。
また、ローカルで動かす場合に最も多く使うであろうExpo Clientは、google-services.jsonやGoogleService-Info.plistを読み込むことができず、JavaScriptベースのFirebase Analyticsの実装に依存してイベントをログに記録します。そのため、Expo Clientでイベントを発火させるには、Firebase projectにウェブアプリを追加し、構成をapp.jsonに設定する必要があります。

Firebase projectにWebアプリを追加

モバイルアプリと同様に、ダッシュボード => 「プロジェクトの概要」横の設定アイコンをクリック => プロジェクトを設定から、Webアプリアイコンを押下します。
その後、任意のアプリ名を入力し「アプリを登録」ボタンを押下します。

f:id:watasihasitujidesu:20200710144844p:plain

次の画面で、Firebase Analyticsと連携するためのJavaScriptのコードが表示されます。
ここで表示される、以下の値をapp.jsonに追記します。

appId
apiKey
measurementId

app.jsonの修正

さきほど取得したappId、apiKey、measurementIdをapp.jsonに追記します。
この項目はwebブロックに追記します。

{
  "expo": {
    "android": {
      "package": "com.mypackage.coolapp",
      "googleServicesFile": "./google-services.json"
    },
    "ios": {
      "bundleIdentifier": "com.mypackage.coolapp",
      "googleServicesFile": "./GoogleService-Info.plist"
-    }
+    },
+    "web": {
+      "config": {
+        "firebase": {
+          "appId": "xxxxxxxxxxxxx:web:xxxxxxxxxxxxxxxx",
+          "apiKey": "AIzaXXXXXXXX-xxxxxxxxxxxxxxxxxxx",
+          "measurementId": "G-XXXXXXXXXXXX"
+        }
+      }
+    }
  }
}

設定は以上です。

コードの修正

最後にアプリからFirebase Analyticsにイベントを送信するための、コードを記述します。 expo-firebase-analyticsをimportし任意のイベントにイベント発火用のコードを仕込んでいきます。

import * as Analytics from 'expo-firebase-analytics';
...
async _onPress(){
  // デバッグ用の設定
  if(Constants.manifest.releaseChannel != "production"){
    Analytics.setDebugModeEnabled(true);
  }

  await Analytics.logEvent('ButtonTapped', {
    name: 'settings',
    screen: 'profile',
    purpose: 'Opens the internal settings',
  });
}

上記のコードの中でAnalytics.setDebugModeEnabled(true);がデバッグ用のコードです。
このコードが処理されると、Firebase AnalyticsのDebugViewというページにリアルタイムで発火されたイベントが通知されます。
また、Constants.manifest.releaseChannel != "production"としていますが、これは、Android/iOSのスタンドアロンアプリをビルドする際にチャンネルを"production"に指定することを想定しています。
したがって、Expo Clientで動作させる場合は、チャンネルが指定されないため、ローカル環境だとみなしています。