React Native应用中如何配置Google Analytics页面屏幕名称使其正常展示？

核心问题分析 #

你之前的代码存在两个关键问题，导致屏幕名称无法在Analytics控制台正常展示：

• 使用了自定义的page_view事件名，但Firebase Analytics默认识别**screen_view**作为屏幕追踪的标准事件
• 参数键使用了自定义字符串screen_name，未采用Firebase官方定义的参数常量，导致平台无法正确解析数据

方案一：React Native层面规范实现（推荐） #

直接使用@react-native-firebase/analytics提供的标准API，无需修改原生代码：

import analytics from '@react-native-firebase/analytics';

const trackScreenView = async (screenName, screenClass = 'MainActivity') => {
  try {
    // 方法1：使用官方封装的logScreenView（推荐，自动对齐原生参数）
    await analytics().logScreenView({
      screen_name: screenName,
      screen_class: screenClass,
    });

    // 方法2：手动调用logEvent（和原生代码逻辑完全对齐）
    // await analytics().logEvent('screen_view', {
    //   [analytics().Param.SCREEN_NAME]: screenName,
    //   [analytics().Param.SCREEN_CLASS]: screenClass,
    // });
  } catch (error) {
    console.error('屏幕追踪失败:', error);
  }
};

// 在页面组件的useEffect中调用
useEffect(() => {
  trackScreenView('Main_page');
}, []);

验证步骤 #

1. 打开Firebase控制台的DebugView，连接测试设备/模拟器，确认screen_view事件是否被正常发送
2. 注意：Analytics控制台的常规报表数据有2-24小时延迟，DebugView是实时查看事件的最佳方式
3. 确保已在android/app/google-services.json和ios/GoogleService-Info.plist中正确配置Firebase项目

方案二：原生Android代码实现（如需原生层面控制） #

如果需要在原生层统一处理屏幕追踪，可按以下步骤操作：

1. 打开Android项目的MainActivity.java或MainActivity.kt
2. 在生命周期方法中初始化Firebase Analytics并发送屏幕事件：

Java示例： #

import com.google.firebase.analytics.FirebaseAnalytics;
import android.os.Bundle;

public class MainActivity extends ReactActivity {
    private FirebaseAnalytics mFirebaseAnalytics;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 初始化Analytics实例
        mFirebaseAnalytics = FirebaseAnalytics.getInstance(this);
    }

    @Override
    protected void onResume() {
        super.onResume();
        // 发送屏幕视图事件
        Bundle bundle = new Bundle();
        bundle.putString(FirebaseAnalytics.Param.SCREEN_NAME, "Main_page");
        bundle.putString(FirebaseAnalytics.Param.SCREEN_CLASS, "MainActivity");
        mFirebaseAnalytics.logEvent(FirebaseAnalytics.Event.SCREEN_VIEW, bundle);
    }
}

Kotlin示例： #

import com.google.firebase.analytics.FirebaseAnalytics
import android.os.Bundle

class MainActivity : ReactActivity() {
    private lateinit var mFirebaseAnalytics: FirebaseAnalytics

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        mFirebaseAnalytics = FirebaseAnalytics.getInstance(this)
    }

    override fun onResume() {
        super.onResume()
        val bundle = Bundle().apply {
            putString(FirebaseAnalytics.Param.SCREEN_NAME, "Main_page")
            putString(FirebaseAnalytics.Param.SCREEN_CLASS, "MainActivity")
        }
        mFirebaseAnalytics.logEvent(FirebaseAnalytics.Event.SCREEN_VIEW, bundle)
    }
}

常见注意事项 #

• 确保设备已开启调试模式，且Firebase项目已正确关联到React Native应用
• 如果使用React Navigation，可以通过监听路由变化实现全局屏幕追踪，避免重复代码
• 不要混用自定义事件名和官方事件名，否则Analytics无法将数据归类到「屏幕视图」报表中

内容的提问来源于stack exchange，提问作者Zak