如何在Web单页应用程序中使用Firebase Analytics跟踪页面视图? [英] How to track page view with Firebase Analytics in a web, single page app?

问题描述

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

I am trying to track simple events and pages/views through Firebase analytics.

我有一个渐进式Web应用程序(SPA).这是一个全屏游戏，没有使用浏览器历史记录.

I have a progressive web app, (SPA). It's a fullscreen game and it is not using browser history.

说实话，我对Google的文档有些困惑，有时他们只解释它在ios/Android中的工作原理，而不是在网络上的工作原理.此外，Firebase分析与常规Google分析"不同.

I am a bit confused by Google's docs to be honest, sometimes they only explain how it works in ios/Android and not in web. Also, Firebase analytics are different than the "normal Google analytics".

Firebase Analytics API并不多:

Firebase analytics API hasn't much:

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

尽管"Google Analytics(分析)文档"确实有一个关于SPA 我还没有找到如何对Firebase分析执行相同的操作，例如手动发送如下页面视图:

While the "Google Analytics docs" do have a section about SPA's I haven't found how to do the same with Firebase analytics, such as manually sending page views that would be like:

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

我尝试使用setCurrentScreen，但是它什么也没做. 帮助表示赞赏.

I have tried to use setCurrentScreen but it does nothing. Help appreciated.

推荐答案

我也找不到包含所有这些信息的地方，所以这就是我的工作方式.

I also wasn't able to find one place with all this information, so here is how I got it to work.

如果您使用的是npm，请确保导入分析:

If you are using npm, Make sure to import the analytics:

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

Analytics会自动随附最新的Firebase SDK.

Analytics automatically come with the latest Firebase SDK.

确保在Firebase项目设置(集成"标签)中启用了"Google Analytics(分析)".另外，请确保Firebase Config在代码中指定了measurmentId: "ID_HERE"-此值也可以在Firebase项目设置(常规"选项卡)中找到.

Make sure that "Google Analytics" is enabled in Firebase Project Settings (Integrations tab). Also, make sure that Firebase Config has measurmentId: "ID_HERE" specified in the code - this value can also be found in Firebase Project Settings (General tab).

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

其他信息

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

Other Info

The "page_view" event seems to be logged automatically by default. I don't know why, but you can use the count of that event to track how many people reload/visit the app.

相关链接:

• Firebase屏幕查看文档
• Firebase Analytics库文档
• 单页应用程序的Google指南
• Firebase Analytics NPM参考

• Firebase Screen View Docs
• Firebase Analytics Library Docs
• Google Guidance for Single Page Apps
• Firebase Analytics NPM Reference

反应非常普遍，因此我还将列出使用它进行日志记录的解决方案.将<AnalyticsComponent />放在<BrowserRouter>声明之间.

React is quite common, so I'll also list my solution for logging using it. Place the <AnalyticsComponent /> between <BrowserRouter> declaration.

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

这篇关于如何在Web单页应用程序中使用Firebase Analytics跟踪页面视图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！