将 gtag 与 SPA 结合使用 screen_view 与 page_view 以及 page_path 如何匹配

Question

我已经构建了 Angular SPA，并准备好实施跟踪。我想保持简单，所以没有插件，只是直接 gtag 跟踪。所以，我已经浏览了所有这些文档，大部分都是有意义的。我唯一感到困惑的是 screen_view 与 page_view 以及 page_path 如何适应。看看下面的代码片段：

屏幕文档页面

构建网络应用程序时，使用 screen_view 事件来测量 Google Analytics 中的特定屏幕视图。这提供了与原生 Android 或 iOS 应用程序上的 Firebase screen_view 事件或标准网页上的 pageview 事件类似的功能。

由于我构建了一个网络应用程序并且它不是标准网页，这对我来说意味着我应该使用 screen_view 而不是 page_view。如果你从表面上看，那没问题，但随后又出现了另一份文档：

SPA 文档页面

当您的应用程序动态加载内容并更新地址栏中的 URL 时，使用 gtag.js 存储的页面 URL 也应该更新。

好吧，如果我已经掌握了上面学到的知识，在导航到新页面时，我应该这样做：

gtag('config', GA_MEASUREMENT_ID, {'page_path': page_path});

gtag('event', 'screen_view', {
  'app_name': app_name,
  'screen_name' : screen_name
});

它是否正确？我应该同时运行这两个吗？另外，screen_view 相对于 page_view 是与 SPA 一起使用的正确事件吗？

需要注意的是：如果这是正确的，我的计划是关闭 page_view 并只使用 screen_view

Answer 1

取决于你的情况。对于我们来说，我们有一个非 SPA 网站 ( www.example.com ) 和“应用程序”网站 (.example.com)。

Sending event "page_view" to undefined
js?id=G-YHR3YXDXTH:402 Request parameters:
js?id=G-YHR3YXDXTH:402 v: 2
js?id=G-YHR3YXDXTH:402 tid: G-YHR3YXDXTH
js?id=G-YHR3YXDXTH:402 gtm: 2oeae2
js?id=G-YHR3YXDXTH:402 _p: 272994004
js?id=G-YHR3YXDXTH:402 sr: 1680x1050
js?id=G-YHR3YXDXTH:402 _dbg: 1
js?id=G-YHR3YXDXTH:402 ul: en-us
js?id=G-YHR3YXDXTH:402 cid: 359333373.1603462384
js?id=G-YHR3YXDXTH:402 Event parameters:
js?id=G-YHR3YXDXTH:402 en: page_view
js?id=G-YHR3YXDXTH:402 Shared parameters:
js?id=G-YHR3YXDXTH:402 dl: https://www.example.com/webinars
js?id=G-YHR3YXDXTH:402 dr: https://www.example.com/
js?id=G-YHR3YXDXTH:402 dt: Site: Webinars
js?id=G-YHR3YXDXTH:402 sid: 1603852939
js?id=G-YHR3YXDXTH:402 sct: 5
js?id=G-YHR3YXDXTH:402 seg: 1

我们所做的<subdomain>.site.com：

gtag({'config', <ga_measurement_id>, {send_page_view: false})

和

gtag('config', <ga_measurement_id>, {
  page_location: currentUrl,
  page_path: pagePath,
})

调试面板中给出：

Sending event "page_view" to undefined
js?id=G-YHR3YXDXTH&l=gaDataLayer&cx=c:402 Request parameters:
js?id=G-YHR3YXDXTH&l=gaDataLayer&cx=c:402 v: 2
js?id=G-YHR3YXDXTH&l=gaDataLayer&cx=c:402 tid: G-YHR3YXDXTH
js?id=G-YHR3YXDXTH&l=gaDataLayer&cx=c:402 gtm: 2oeae2
js?id=G-YHR3YXDXTH&l=gaDataLayer&cx=c:402 _p: 2097856708
js?id=G-YHR3YXDXTH&l=gaDataLayer&cx=c:402 sr: 1680x1050
js?id=G-YHR3YXDXTH&l=gaDataLayer&cx=c:402 _dbg: 1
js?id=G-YHR3YXDXTH&l=gaDataLayer&cx=c:402 ul: en-us
js?id=G-YHR3YXDXTH&l=gaDataLayer&cx=c:402 _uei: 25
js?id=G-YHR3YXDXTH&l=gaDataLayer&cx=c:402 cid: 386132987.1603852323
js?id=G-YHR3YXDXTH&l=gaDataLayer&cx=c:402 Event parameters:
js?id=G-YHR3YXDXTH&l=gaDataLayer&cx=c:402 en: page_view
js?id=G-YHR3YXDXTH&l=gaDataLayer&cx=c:402 _et: 985
js?id=G-YHR3YXDXTH&l=gaDataLayer&cx=c:402 ep.page_path: /members/725
js?id=G-YHR3YXDXTH&l=gaDataLayer&cx=c:402 Shared parameters:
js?id=G-YHR3YXDXTH&l=gaDataLayer&cx=c:402 dl: https://dev.example.com/members/725
js?id=G-YHR3YXDXTH&l=gaDataLayer&cx=c:402 dr: https://dev.example.com/members
js?id=G-YHR3YXDXTH&l=gaDataLayer&cx=c:402 dt: Dev Site
js?id=G-YHR3YXDXTH&l=gaDataLayer&cx=c:402 sid: 1603852434
js?id=G-YHR3YXDXTH&l=gaDataLayer&cx=c:402 sct: 1
js?id=G-YHR3YXDXTH&l=gaDataLayer&cx=c:402 seg: 1
js?id=G-YHR3YXDXTH&l=gaDataLayer&cx=c:402 

从外观上看，它们是匹配的。

{send_page_view: false}使用两者并使用事件的解决方案screen_view可能会起作用

注意：文档