将 Firebase Analytics 与 React Web 应用程序集成

Question

我继承了一个使用 React 构建的 Web 应用程序，并且已经使用了 Firebase SDK。我被要求将 Firebase Analytics 添加到项目中，但我找不到任何文档来描述如何在 React Web 应用程序中执行此操作。

我可以看到 package.json 文件中定义了以下内容；

"filestack-js": "^3.14.0",
"filestack-react": "^3.1.0",
"firebase": "^7.14.2",
"firebase-tools": "^8.4.1",

项目的 .env 文件中有一些 Firebase 配置，我在其中添加了 FIREBASE_MEASUREMENT_ID，见下文；

REACT_APP_HTML_TITLE="sdfsdfsdf"
REACT_APP_FIREBASE_API_KEY="Asdfsdfsdf"
REACT_APP_FIREBASE_AUTH_DOMAIN="sdfsdfsdf"
REACT_APP_FIREBASE_DATABASE_URL="sdfsdfsdf"
REACT_APP_FIREBASE_PROJECT_ID="sdfsdfsdf"
REACT_APP_FIREBASE_STORAGE_BUCKET="sdfsdfsdf"
REACT_APP_FIREBASE_MESSAGING_SENDER_ID="sdfsdfsdf"
REACT_APP_FIREBASE_APP_ID="sdfsdf"
REACT_APP_FIREBASE_MEASUREMENT_ID="G-sdfsdfsdf"

我需要做什么吗，或者 Firebase SDK 是否应该自动处理应用程序中的 Analytics 设置？

Answer 1

您需要在初始化 Firebase 的 firebase 配置文件中初始化分析

  import firebase from 'firebase/app'
  import 'firebase/firestore'
  import 'firebase/auth'
  import 'firebase/storage'
  import 'firebase/analytics'
  import 'firebase/functions'

  // Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
    measurementId: ""
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics()

  export default firebase

请注意，您需要从 Firebase 导入分析：

  import 'firebase/analytics'

并像这样初始化它：

 firebase.analytics()

您只需在 firebase 配置文件中执行此操作一次，您在 package.json 中唯一需要的软件包是您已经拥有的 firebase：

"firebase": "^7.14.2"

将 Firebase Analytics 与 React Web 应用程序集成

Integrating Firebase Analytics with a React Web Application

reactjs

firebase-analytics