Zenn
🍋

ExpoでFirebase Analyticsを実装しました。

2024/12/29に公開
Firebase
Expo
tech

はじめに

ExpoにFirebase Analyticsを実装したので、それについて記述したいと思います。
色々調べているとGoogle Analyticsについてのドキュメントが出てきますが、モバイルアプリのトラッキングには、基本的にFirebase Analyticsを使用することをお勧めします。
Firebase AnalyticsはGoogle Analytics for Firebaseとして機能し、Google Analytics 4（GA4）の一部として扱われています。

トラッキング: 追跡

https://firebase.google.com/docs/analytics?hl=ja&utm_source=chatgpt.com

react-native-firebaseのanalyticsをインストールする

下記コマンドを実行して、Firebase Analyticsが使用できるようにします。

$ npm install @react-native-firebase/app
$ npm install @react-native-firebase/analytics

react-native-firebaseライブラリを使用したFirebase連携はこちらに詳しく書いてあるので、そちらが終わっていない方は見てください。
https://zenn.dev/yumemi9808/articles/a8454fa3e664d8

Firebase Analyticsでカスタマイズした値を発火させる

はじめに、このサンプルコードが発火するかどうか確認します。
https://rnfirebase.io/analytics/usage#predefined-events

index.ts 
import analytics from '@react-native-firebase/analytics'
・・・
<Button
  title="Test Analytics"//サンプルコードから名前を変えました。
  onPress={async () =>
    await analytics().logSelectContent({
      content_type: 'button',//サンプルコードから名前を変えました。
      item_id: 'abcd',//サンプルコードから名前を変えました。
    })
   }
/>

EAS ビルドをして、実機で対象のボタンを押します。

Firebase consoleのRealtime Analyticsを見てイベントが飛んでいるか確認します。
https://firebase.google.com/?gad_source=1&gclid=CjwKCAiAmrS7BhBJEiwAei59i3sMDfLlYIwzU_815dYBsbWf0Zcl6Yyy6vhqjEQ7ncqoDdudPpiONBoCgnUQAvD_BwE&gclsrc=aw.ds&hl=ja

Realtime Analyticsのアクティブユーザーに数値が入っていたら、何かしらの値は発火したことになります。

画面下の方にイベント数というのがあるので、そちらを確認します。
そこに、select_contentという値があると思います。

その中のcontent_typeを押下し、中に指定したbuttonの値が入っていたら、イベントの送信成功が確認できます。

同様に、item_idを押下し、中に指定したabcdの値が入っていたら送信成功です。

logSelectContentを設置

サンプルコードのイベント発火が確認ができたら、src/utils/analytics.tsに関数としてまとめます。

analytics.ts
import analytics from '@react-native-firebase/analytics'

export const logSelectContent = async (contentType: string, itemId: string) => {
  await analytics().logSelectContent({
    content_type: contentType,
    item_id: itemId,
  })
}
index.ts
import { logScreenView } from '../utils/analytics'
・・・
const handleClick = async (contentType: string, itemId: string) => {
    await logSelectContent(contentType, itemId)
  }
・・・
return (
    <Button text="Test Analytics" onClick={() => void handleClick('button', 'bcde')} />

これでまた、先ほどと同じようにRealtime Analyticsを見て、表示されているか確認してください。

確認できたら、別のlogSelectContentを設置していきます。

別のlogSelectContent設置

ほかにも何個かlogSelectContent設置を設置して確認します。

index.ts
const handleClick = async (contentType: string, itemId: string) => {
    await logSelectContent(contentType, itemId)
  }
・・・
<Link href="/home" style={styles.link} onPress={() => void handleClick('nav_home', 'cdef')}>
              👉 【Stack】 Tabホーム
            </Link>
            <Link href="/about" style={styles.link} onPress={() => void handleClick('nav_about', 'defg')}>
              👉 【Stack】 このアプリについて
            </Link>
            <Link href="/terms" style={styles.link} onPress={() => void handleClick('nav_terms', 'efgh')}>
              👉 【Stack】 利用規約
            </Link>

下記画像のLinkをクリックしたらイベントが発火するようなイベントを作成しました。これもRealtime Analytics表示されるか確認してください。

logScreenViewを設置

src/app/_layout.tsxにlogScreenViewを設置します。こちらの記事からコードをもらいました。
https://www.oreno-code.com/expo-firebase/

_layout.tsx
export default function RootLayout() {
  const pathname = usePathname();
  useEffect(() => {
    const logScreenView = async () => {
      console.log('Logging screen view:', pathname);
      try {
        await analytics().logScreenView({
          screen_name: pathname,
          screen_class: pathname,
        });
      } catch (err: any) {
        console.error(err);
      }
    };
    logScreenView();
  }, [pathname]);
}

ここにこのコードを書くと、各ページのパス名がRealtime Analyticsに反映されます。
1枚目の画像のLinkを押下して、2枚目の画像の画面遷移した時に発火します。

Realtime Analyticsで表示されるか確認します。
表示回数にも反映されます。

イベント数のscreen_viewを押下します。

その中のfirebase_screen_classを押下します。

そこに各ページのパスが表示されていたら成功です。

Firebase Analyticsで実際に送られてきた値

自分で実装した値以外にも、自動で発火する値があります。下記は実際にFirebaseに送られてきた値です。

イベント名 パラメータ名 説明 入ってた値
screen_view firebase_event_origin イベントの発生元を示す内部パラメータ。 自動
firebase_screen_class 表示された画面のクラス名。 /aboutなど
firebase_screen_id 画面の一意の識別子。 自動
ga_session_id 現在のセッションの一意の識別子。 自動
ga_session_number ユーザーのセッション番号。 自動
firebase_previous_class 前の画面のクラス名。 /homeなど
firebase_previous_id 前の画面の一意の識別子。 自動
firebase_previous_screen 前の画面の名前。 /homeなど
firebase_screen 現在の画面の名前。 /aboutなど
user_engagement engagement_time_msec ユーザーがアプリと対話した時間（ミリ秒単位）。 自動
firebase_event_origin イベントの発生元を示す内部パラメータ。 自動
firebase_screen_class 表示されている画面のクラス名。 自動
firebase_screen_id 画面の一意の識別子。 自動
ga_session_id 現在のセッションの一意の識別子。 自動
ga_session_number ユーザーのセッション番号。 自動
select_content content_type 選択されたコンテンツの種類（例: 画像、テキスト）。 buttonなど
firebase_event_origin イベントの発生元を示す内部パラメータ。 自動
firebase_screen_class 表示されている画面のクラス名。 自動
firebase_screen_id 画面の一意の識別子。 自動
ga_session_id 現在のセッションの一意の識別子。 自動
ga_session_number ユーザーのセッション番号。 自動
item_id 選択されたアイテムの一意の識別子。 bcdeなど
session_start - ユーザーの新しいセッションの開始を示すイベント。 -
app_exception - アプリ内で例外（エラー）が発生したことを示すイベント。 -
first_open - ユーザーがアプリを初めて開いたことを示すイベント。 -

firebase_event_origin,firebase_screen_class,firebase_screen_idなどのBigQueryはこちらに定義されています。
https://firebase.google.com/docs/remote-config/personalization/bigquery?hl=ja

screen_view,user_engagement,session_start,app_exception,first_openは、GAのドキュメントで、自動で収集イベントとして記載されています。
https://support.google.com/analytics/answer/9234069?hl=ja&visit_id=638164508762753175-1236762102&rd=2

ga_session_id,ga_session_numberについては、アナリティクスのセッションについてに書いてあります。
https://support.google.com/analytics/answer/9191807?hl=ja&sjid=5460982085768970702-AP

setUserProperty

setUserPropertyの実装したかったのですがうまくいかなかったので、実装できたら別の記事に書こうと思います。
setUserPropertyはRealtime Analyticsに反映されないので、半日以上待ってAnalytics Dashboardに表示されるのを確認しなくてはなりません。それだと、作業効率が悪いので、DebugViewを使用してリアルタイムに反映されるのを確認したかったのですが、それが上手く連携することができず、記事に書けませんでした。

Discussion