如何在 Web 单页应用程序中使用 Firebase Analytics 跟踪页面浏览量？

Question

我正在尝试通过Firebase分析跟踪简单的事件和页面/视图。

我有一个渐进式Web应用程序（SPA）。它是一个全屏游戏，不使用浏览器历史记录。

说实话，我有点困惑于Google的文档，有时他们只解释它在iOS / Android中如何工作，而不是在Web中。此外，Firebase分析与“普通的Google分析”不同。

Firebase分析API没有太多：

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

虽然 "Google Analytics文档" 中有关于SPA的部分，但我还没有找到如何使用Firebase Analytics进行相同操作的方法，例如手动发送页面浏览量：

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

我尝试使用setCurrentScreen，但它没有任何作用。需要帮助。

- Kev

Answer 1

我也没有找到一个包含所有这些信息的地方，所以这就是我成功实现的方法。

导入

如果你正在使用npm，请确保导入了分析工具：

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

最新的Firebase SDK自带分析功能。

配置

确保在Firebase项目设置中启用了“Google Analytics”（集成选项卡）。另外，请确保Firebase Config在代码中指定了measurmentId: "ID_HERE" - 这个值也可以在Firebase项目设置（常规选项卡）中找到。

使用

analytics().setCurrentScreen(window.location.pathname) // sets `screen_name` parameter
analytics().logEvent('screen_view') // log event with `screen_name` parameter attached

其他信息

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

相关链接：

• Firebase 屏幕视图文档
• Firebase 分析库文档
• 适用于单页应用程序的 Google 指南
• Firebase Analytics NPM 参考

---

使用 React Router 记录日志

React 很常见，因此我也将列出使用它记录日志的解决方案。请将 <AnalyticsComponent /> 放置在 <BrowserRouter> 声明之间。

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>);
};

- kgaidis

---

在尝试修复损坏的Firebase分析时遇到了这个，很不错。你为什么没有返回null而是空div呢？ - xaphod

setCurrentScreen已被弃用。请改用下面的响应。 - Frenchcooc

浏览器在位置更改后没有取消所有调用吗？ - Manjunath Gk

Answer 2

调用setCurrentScreen目前不会自动记录任何事件。根据文档，它会在随后的事件中添加一个firebase_screen参数。

然而，在我的SPA/PWA中，我通过记录单独的screen_view事件来跟踪屏幕浏览。

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

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

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

- Frank van Puffelen

---

我明白了。那么在Firebase中，只有“事件”和更少的内容吗？由于某些原因，我的事件在仪表板中没有显示出来。 - Kev

你如何追踪在屏幕上花费的时间？@Kev - PCK