ExpoでFirebaseAnalyticsを使ってみた

16270 ワード
reactnative expo Firebase FirebaseAnalytics Firebase テキストリンク

初投稿です。
Expo SDK 37でFirebaseAnalyticsが使用できるようになりました。
今回はそのFirebaseAnalyticsを使ってみました。
Expoの方でFirebaseAnalyticsの使用方法の記事があったのでそちらの流れに沿ってやりました。

EXPOアプリの作成


npm install --global expo-cli


expo init expo-firebase-analytics

画面トラックするためにページがあった方が良いと考えたので、今回はManaged workflowのtabs(TypeScript)を選択

expo-firebase-coreとexpo-firebase-analyticsのパッケージを追加


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

app.jsonにbundleIdentifierとpackageの追加

// app.json

{
    ...
    "ios": {
      "bundleIdentifier": "com.yy.expo-firebase-analytics",
      "buildNumber": "1.0.0"
    },
    "android": {
      "package": "com.yy.expo_firebase_analytics",
      "versionCode": 1
    },
    ...
}

firebaseのプロジェクト・アプリの作成

  • expo-firebase-analyticsプロジェクトを作成
  • web, ios, androidのアプリを作成し、それぞれの設定ファイルをダウンロード
  • app.jsonにFirebaseの設定を反映
// app.json
{
    ...
    "ios": {
      "bundleIdentifier": "com.yy.expo-firebase-analytics",
      "buildNumber": "1.0.0",
      "googleServicesFile": "./GoogleService-Info.plist"
    },
    "android": {
      "package": "com.yy.expo_firebase_analytics",
      "versionCode": 1,
      "googleServicesFile": "./google-services.json"
    },
    "web": {
      "favicon": "./assets/images/favicon.png",
      "config": {
        "firebase": {
          "apiKey": "...",
          ...
          "measurementId": "..."
        }
      }
    }
    ...
}

イベントを記録する

// screens/TabOneScreen.tsx
export default function TabOneScreen() {
  const recordOnPressLog = () => {
    Analytics.logEvent('onPress');
    Alert.alert('OnPress');
  };

  return (
    ...
      <Button onPress={recordOnPressLog} title="Record Log Event" />
    ...
  );
}

Expo clientで確認してみる。

yarn start

QRコードを読み、OnPressボタンをタップして、Firebaseの方で確認してみると、見事イベントが取れているっぽい。

ナビゲーションイベントを取得する

react-navigationのドキュメントで画面トラッキングが紹介されているのでそれを参考にした。

// navigation/index.tsx
import { NavigationContainer, DefaultTheme, DarkTheme, NavigationProp, NavigationContainerRef } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import * as React from 'react';
import { ColorSchemeName } from 'react-native';
import * as Analytics from 'expo-firebase-analytics';

...

// If you are not familiar with React Navigation, we recommend going through the
// "Fundamentals" guide: https://reactnavigation.org/docs/getting-started
export default function Navigation({ colorScheme }: { colorScheme: ColorSchemeName }) {
  const routeNameRef = React.useRef<string>();
  const navigationRef = React.useRef<NavigationContainerRef>(null);

  return (
    <NavigationContainer
      linking={LinkingConfiguration}
      theme={colorScheme === 'dark' ? DarkTheme : DefaultTheme}
      ref={navigationRef}
      onReady={() => {
        routeNameRef.current = navigationRef?.current?.getCurrentRoute()?.name
      }}
      onStateChange={() => {
        const previousRouteName = routeNameRef.current;
        const currentRouteName = navigationRef?.current?.getCurrentRoute()?.name

        if (previousRouteName !== currentRouteName) {
          // The line below uses the expo-firebase-analytics tracker
          // https://docs.expo.io/versions/latest/sdk/firebase-analytics/
          // Change this line to use another Mobile analytics SDK
          Analytics.setCurrentScreen(currentRouteName);
        }

        // Save the current route name for later comparision
        routeNameRef.current = currentRouteName;
      }}
    >
      <RootNavigator />
    </NavigationContainer>
  );
}

...

Expo Client側でタブ切り替えとかやると、Firebaseの方でscreen_viewイベントが取れてるっぽい。

感想

ExpoでFirebase Analyticsが動いてそうでした。
Expoで始めて、Firebase Analyticsを使用したいがためにejectするという経験があったので、個人的に嬉しいです。
一応Githubにあげたので、ちょっと試してみたいって方はapp.jsonにfirebaseの設定追加して試してみてくださいまし。
https://github.com/yohei-yamazaki/expo-firebase-analytics

参考文献