Javascript 如何在web单页应用程序中使用Firebase Analytics跟踪页面视图？

我试图通过Firebase分析跟踪简单事件和页面/视图

我有一个进步的网络应用程序（SPA）。这是一款全屏游戏，不使用浏览器历史记录

老实说，我有点被谷歌的文档弄糊涂了，有时候它们只解释它在ios/Android上是如何工作的，而不是在web上。此外，Firebase分析与“普通谷歌分析”不同

Firebase analytics API没有太多：

analytics().logEvent()
analytics().setAnalyticsCollectionEnabled()
analytics().setCurrentScreen()
analytics().setUserId()
analytics().setUserProperties()

虽然“Google Analytics docs”确实有一个功能，但我还没有发现如何对Firebase Analytics执行相同的功能，例如手动发送页面视图，如下所示：

ga('set', 'page', '/new-page.html');
ga('send', 'pageview');

---

我曾尝试使用

setCurrentScreen

，但它没有任何作用。

---

感谢您的帮助。

调用

setCurrentScreen

本身不会记录任何事件。相反，根据，它在后续事件中添加了一个

firebase\u屏幕

参数

然而，在我的SPA/PWA中，我通过记录一个单独的

screen\u view

事件来跟踪屏幕视图：

const handleHashChange = async () => {
    const hash = document.location.hash;

    firebase.analytics().logEvent('screen_view', { screen_name: hash.substring(1) });
}

handleHashChange();
window.addEventListener("hashchange", handleHashChange);

---

我也找不到一个有这些信息的地方，所以这里是我如何让它工作的

进口 如果您使用的是

npm

，请确保导入分析：

import * as firebase from "firebase/app";
import "firebase/analytics";
const analytics = firebase.analytics;

分析自动随最新的Firebase SDK提供

配置 确保在Firebase项目设置（集成选项卡）中启用“谷歌分析”。此外，请确保Firebase配置在代码中指定了

measurementId:“ID_HERE”

——该值也可以在Firebase项目设置（常规选项卡）中找到

使用 其他信息 默认情况下，

“页面视图”

事件似乎是自动记录的。我不知道为什么，但您可以使用该事件的计数来跟踪有多少人重新加载/访问该应用程序

相关链接：

---

使用React路由器记录日志 React非常常见，因此我还将列出使用它进行日志记录的解决方案。将

放在

声明之间

const logCurrentPage = () => {
  analytics().setCurrentScreen(window.location.pathname)
  analytics().logEvent('screen_view')
};

const AnalyticsComponent = () => {
  const history = useHistory();
  useEffect(() => {
    logCurrentPage(); // log the first page visit
    history.listen(() => {
      logCurrentPage();
    });
  }, [history]);
  return (<div></div>);
};

constlogcurrentpage=（）=>{
analytics（）.setCurrentScreen（window.location.pathname）
analytics（）.logEvent（'屏幕视图'）
};
常量分析组件=（）=>{
const history=useHistory（）；
useffect（（）=>{
logCurrentPage（）；//记录第一页访问
历史。听（（）=>{
logCurrentPage（）；
});
}，[历史]；
返回（）；
};

我明白了。那么在Firebase中，只有“事件”和其他一些？由于某些原因，我的事件不会显示在仪表板上。如何跟踪在屏幕上花费的时间@KevCame在试图修复损坏的firebase分析时，非常整洁。您没有返回空div的null insetad有什么原因吗？

setCurrentScreen

已被弃用。请参阅下面的响应而不是位置更改后浏览器不取消所有呼叫？

const logCurrentPage = () => {
  analytics().setCurrentScreen(window.location.pathname)
  analytics().logEvent('screen_view')
};

const AnalyticsComponent = () => {
  const history = useHistory();
  useEffect(() => {
    logCurrentPage(); // log the first page visit
    history.listen(() => {
      logCurrentPage();
    });
  }, [history]);
  return (<div></div>);
};