Firebase Analytics 未跟踪 Vue 路由器路由

Posted 2023-02-22

【中文标题】Firebase Analytics 未跟踪 Vue 路由器路由

【英文标题】：Vue Router routes not tracked by Firebase Analytics

【发布时间】：2020-07-24 21:01:32

【问题描述】：

我想知道在为 Vue 应用程序（以及一般的 SPA 应用程序）设置 Firebase Analytics 以使其跟踪页面更改时，我是否可能遗漏了一些配置，因为当我在 Firebase 的 DebugView 中，除非我刷新页面或在浏览器中手动输入 URL，否则它不会跟踪 page_views。我知道对于常规的 Google Analytics 模块 (vue-analytics)，您必须在初始化时将路由器对象传递给它才能工作 (more about that)，所以对我来说，您必须使用 Firebase Analytics 做类似的事情是有意义的，但我在文档中找不到任何关于它的内容。

我尝试从我的router.afterEach() 守卫手动调用logEvent('page_view')，但随后它会多次记录每个页面的更改。

如果您希望我包含任何信息或演示代码，请告诉我。

【参考方案1】：

所以这本身并不能解决问题，但这是我要解决的问题，直到出现更好的答案。

将 logEvent('page_view') 从 router.afterEach() 防护移动到 router.beforeEach() 防护可防止它在 Firebase Analytics 中被多次记录，并添加自定义 type 参数使我能够区分实际的页面更改/加载和内部“SPA”页面更改/加载。所以（相关部分）我的路由器代码现在看起来像这样：

router.beforeEach(async (to, from, next) => 
  firebase.analytics().logEvent('page_view',  type: 'internal' );
);