ExpoでFirebaseAnalyticsを使ってみた

初投稿です。
`Expo SDK 37`で`FirebaseAnalytics`が使用できるようになりました。
今回はその`FirebaseAnalytics`を使ってみました。
`Expo`の方で[FirebaseAnalyticsの使用方法](https://dev.to/expo/using-firebase-analytics-with-expo-2ihp)の記事があったのでそちらの流れに沿ってやりました。

## EXPOアプリの作成
```bash

npm install --global expo-cli
```
```bash

expo init expo-firebase-analytics
```

画面トラックするためにページがあった方が良いと考えたので、今回は`Managed workflow`の`tabs(TypeScript)`を選択
<img width="568" alt="スクリーンショット 2020-07-11 16.03.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592411/5c5a2314-7340-a6ef-1d10-c6e49fac188b.png">

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

```bash

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


## app.jsonにbundleIdentifierとpackageの追加
```json
// 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の設定を反映

```json
// 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": "..."
        }
      }
    }
    ...
}
```

### イベントを記録する

```react
// 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で確認してみる。

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592411/3cfe9724-ef4f-8afd-0509-24fc9868b368.png)

### ナビゲーションイベントを取得する
`react-navigation`のドキュメントで画面トラッキングが紹介されているのでそれを[参考](https://reactnavigation.org/docs/screen-tracking/)にした。

```react
// 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イベントが取れてるっぽい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592411/517e22c4-f015-2f01-70de-20d90ac7712c.png)

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

## 参考文献
* https://dev.to/expo/expo-sdk-37-is-now-available-69g
* https://dev.to/expo/using-firebase-analytics-with-expo-2ihp
* https://docs.expo.io/versions/latest/sdk/firebase-analytics/
* https://reactnavigation.org/docs/screen-tracking/