react-native-firebase の Analytics の使い方

npaka

2024年7月6日 15:38

「react-native-firebase」の「Analytics」の使い方をまとめました。

前回

1. react-native-firebase

「react-native-firebase」は、「React Native」用のFirebase実装です。すべてのFirebaseサービスで iOS と Android の両プラットフォームをサポートしています。

2. Analytics の使い方

「Analytics」の使い方は、次のとおりです。

2-1. React Nativeプロジェクトの作成

(1) React Nativeプロジェクトの作成。

npx react-native init my_app
cd my_app

(2) パッケージのインストール。

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

2-2. Firebaseプロジェクトの作成

(1) Firebaseコンソールでプロジェクトを作成。

2-3. Androidのセットアップ

(1) FirebaseコンソールのプロジェクトでAndroidアプリを追加。

(2) Firebaseコンソールのプロジェクトの設定から「google-services.json」をダウンロードして、React Nativeプロジェクトの「android/app」に配置。

(3) React Nativeプロジェクトの「android」を「Android Studio」で開き、「android/build.gradle」「android/app/build.gradle」を編集。

・android/build.gradle の一部

buildscript {
        :
    dependencies {
        classpath 'com.google.gms:google-services:4.4.2'
            :
    }
}

・android/app/build.gradle の一部

apply plugin: 'com.google.gms.google-services'
        :

2-4. iOSのセットアップ

(1) FirebaseコンソールのプロジェクトでiOSアプリを追加し、「GoogleService-Info.plist」をダウンロード。

(2) React Nativeプロジェクトの「ios/Profile」のターゲット内のuse_react_nativeの直前に次のコードを追加。

    :
target 'my_app' do
  config = use_native_modules!

  use_frameworks! :linkage => :static # 追加

  use_react_native!(
    :

【注意1】
iOSで静的フレームワークを使用するには、「/ios/Podfile」に次のグローバルを追加して、プロジェクトに対して手動で有効にする必要もあります。

# `use_frameworks! :linkage => :static` の直後
$RNFirebaseAsStaticFramework = true

【注意2】
Flipper: use_frameworks は Flipper と互換性がありません。Podfile の :flipper_configuration 行をコメントアウトして Flipper を無効にする必要があります。Flipper は react-native コミュニティで非推奨になっており、これは修正されません。Flipper と react-native-firebase は iOS で連携しません。

新しいアーキテクチャ: Fabric は use_frameworks と部分的に互換性があります。bridged / compatibilityを有効にすると、react-native-firebase は正しくコンパイルされ、使用できるようになります。

(3) podのインストール。

cd ios
pod install
cd ..

(4) Xcodeで「ios」内のworkspaceを開き、「GoogleService-Info.plist」を追加。

(5) AppDelegate.mmの編集。

・AppDelegate.mmの一部

    :
#import <Firebase.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  // Firebaseの初期化
  [FIRApp configure];
    :

(6) Xcodeで署名し、iPhoneにインストールできることを確認。

2-4. Firebase Analyticsへのイベント送信

(1) コードの編集。

・App.tsx

import { Button, SafeAreaView } from 'react-native';
import analytics from '@react-native-firebase/analytics';

// アプリ
const App: React.FC = () => {
  // ボタンクリック時に呼ばれる
  const onClick = async () => {
    await analytics().logEvent('hello_event');
    console.log("done!");
  };

  return (
    <SafeAreaView style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button
        onPress={onClick}
        title="Analyticsにイベント送信"
      />
      </SafeAreaView>
  );
};

export default App;

(3) コードの実行。
ボタンを押すと、FirebaseのAnalyticsにhello_eventが投げられていることを確認します (反映には数分から24時間かかる)。

npm start