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

Question

我继承了一个使用 React 构建并且已经使用 Firebase SDK 的 Web 应用程序。我被要求将 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"