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

React Native ExpoでiOSアプリにFirebase Analyticsを入れる方法を解説します。

Managed Workflow or Bare Workflow

ExpoでFirebaseを利用するには、以下の2種類のモジュールがあります。

• Firebase JS SDK（Managed Workflow向け）

  • ExpoのManaged Workflowで使用可能
  • Firebaseの一部機能のみサポート

• React Native Firebase（Bare Workflow向け）

  • ネイティブモジュールを利用するためBare Workflowが必要
  • より高度な機能を利用可能

Expoのドキュメントには以下のように書かれており、Analyticsを使う場合はReact Native Firebaseの方を推奨しています。

Caveats Firebase JS SDK does not support all services for mobile apps. Some of these services are Analytics, Dynamic Links and Crashlytics. See the React Native Firebase section if you want to use these services.

React Native Firebaseのセットアップ

Firebaseプロジェクトの作成と設定

1. Firebaseコンソール で新規プロジェクトを作成
2. GoogleService-Info.plist をダウンロード

app.jsonを修正

app.json に googleServicesFile と、EAS Buildでの設定を追加します。

{
  "expo": {
    "ios": {
      "googleServicesFile": "./GoogleService-Info.plist"
    },
    "plugins": [
      "@react-native-firebase/app",
      [
        "expo-build-properties",
        {
          "ios": {
            "useFrameworks": "static"
          }
        }
      ]
    ],
  }
}

React Native Firebaseのインストール

yarn add @react-native-firebase/app @react-native-firebase/analytics 

Firebase Analyticsを使う

画面遷移を記録するカスタムフックを書きました。

import { useEffect } from "react";
import { useSegments } from "expo-router";

import { getAnalytics, logScreenView } from "@react-native-firebase/analytics";

export function useScreenTracking() {
  const segments = useSegments();
  const analyticsInstance = getAnalytics();

  useEffect(() => {
    async function trackScreen() {
      if (!segments.length) return;

      let screenName = segments.join("_");
      screenName = screenName.replace(/[\(\)]/g, "");

      try {
        await logScreenView(analyticsInstance, {
          screen_name: screenName,
        });
        console.log("logScreenView");
        console.log(screenName);
      } catch (error) {
        console.error("Analytics logScreenView error:", error);
      }
    }
    trackScreen();
  }, [segments, analyticsInstance]);
}

注意点

非推奨になったモジュール

以前は expo-firebase-core や expo-firebase-analytics が提供されていましたが、現在はdeprecatedで使えなくなりました。

非推奨になったanalytics()

以前は analytics() を使っていましたが、現在は getAnalytics() でインスタンスを取得してから使用します。以前の書き方だと以下の警告が出ます。

WARN This method is deprecated (as well as all React Native Firebase namespaced API) and will be removed in the next major release as part of move to match Firebase Web modular SDK API.