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

Question

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

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

老实说，我对 Google 的文档有些困惑，有时他们只解释了它在 ios/Android 中的工作原理，而不是在网络中。此外，Firebase 分析与“普通 Google 分析”不同。

Firebase 分析 API 没有太多：

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

虽然“Google Analytics 文档”确实有一个关于 SPA 的部分，但我还没有找到如何使用 Firebase 分析来做同样的事情，例如手动发送如下页面视图：

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

我试过使用，setCurrentScreen但它什么也没做。帮助表示赞赏。

Answer 1

我也无法找到一个包含所有这些信息的地方，所以这就是我让它工作的方法。

进口

如果您正在使用npm，请确保导入分析：

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

Analytics 自动附带最新的 Firebase SDK。

配置

确保在 Firebase 项目设置（集成选项卡）中启用了“Google Analytics”。此外，请确保measurmentId: "ID_HERE"在代码中指定了Firebase Config - 此值也可以在 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 分析 NPM 参考

使用 React Router 进行日志记录

React 很常见，所以我还将列出我使用它进行日志记录的解决方案。放置<AnalyticsComponent />between<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>);
};

Answer 2

调用setCurrentScreen本身还没有记录任何事件。相反，根据docs，它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);