初投稿です。
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