Vue Router的路由未被Firebase Analytics跟踪

Question

我想知道在为Vue应用程序（以及一般情况下的SPA）设置Firebase Analytics时，是否有一些配置我可能错过了，以便让它跟踪页面更改。因为当我在Firebase的DebugView中时，它不会跟踪page_view，除非我刷新页面或手动输入URL到浏览器中。对于常规的Google Analytics模块（vue-analytics），您必须在初始化时将路由器对象传递给它才能正常工作（more about that），所以我认为您需要使用类似的方式来处理Firebase Analytics，但我在文档中找不到任何信息。

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

如果有任何信息或演示代码需要包含，请告诉我。

- SeriousLee

Answer 1

在单页面应用程序中跟踪“page_view”可能会给使用Google Analytics带来麻烦。

您可以转到Google Analytics仪表板并打开“增强型测量”。

管理>数据流>选择您的数据流>激活“增强型测量”。

您可以在此处阅读更多信息：使用Google Analytics 4跟踪单页面应用程序。

- Psycarlo

Answer 2

所以这并没有完全解决问题，但在更好的答案出现之前，我会采用这种方法。将logEvent('page_view')从router.afterEach()守卫移动到router.beforeEach()守卫可以防止在Firebase Analytics中多次记录，同时添加自定义type参数可以让我区分实际页面更改/加载和内部“SPA”页面更改/加载。所以（相关部分的）我的路由代码现在看起来像这样：

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

- SeriousLee