未将事件发送到网络上的 Firebase 分析答案

【问题标题】：Events not being sent to firebase analytics on the web未将事件发送到网络上的 Firebase 分析
【发布时间】：2022-10-14 02:12:34
【问题描述】：

Firebase 版本：8.10.0

项目：Next JS with Typescript

我如何发送：

const logClickEvent = useCallback(
  (eventName: string, eventParams?: { [key: string]: any }) => {
    if (typeof window !== "undefined") {
      analytics().logEvent(eventName, eventParams)
    }
  },
  []
)

我使用 Google Analytics 调试器收到的信息：

如您所见，Sending Request 链接确实被执行，但我在 firebase 的 Debug 视图中看不到日志。然后，我点击Sending Request 链接，它会打开一个空白页面。之后，我在 firebase 的 Debug 视图中看到了一个日志。这里可能是什么问题？请帮忙！！

这就是我在 Next JS 项目中集成 firebase 的方式：在utils/firebase.ts:

import "firebase/analytics"
import firebase from "firebase/app"

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
  measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
}

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig)
}
const { analytics } = firebase

export { analytics }

在_app.tsx:

useEffect(() => {
  if (typeof window !== "undefined") {
    analytics()
  }
}, [)

【问题讨论】：

你能解决这个问题吗？

标签： firebase next.js firebase-analytics

【解决方案1】：

事实证明，这仅适用于生产环境，不适用于开发环境。我在_app.tsx 中初始化了分析，如下所示：

useEffect(() => {
    if (process.env.NODE_ENV === "production") {
      analytics()
    }
  }, [])

然后创建了一个像这样的钩子：

const useLogClickEvent = () => {
  const logClickEvent = useCallback(
    (eventName: string, eventParams?: { [key: string]: any }) => {
      if (process.env.NODE_ENV === "production") {
        analytics().logEvent(eventName, eventParams)
      }
    },
    []
  )

  return { logClickEvent }
}

然后，通过像这样导入它，在我的组件中的任何地方使用钩子：

const { logClickEvent } = useLogClickEvent()

<Button onClick={() => {
   logClickEvent("event_name", {
        property_name: "property_value",
      })
}}>
   Some Button
</Button>

【讨论】：