Angular + Google 分析：使用新分析跟踪页面浏览量

Question

我有多个 angular 应用程序一直在使用类似于 this blog 中描述的逻辑来跟踪页面浏览量。

我也会在这里添加相关的代码片段，以避免第三方引用。

在每个页面的头部添加gtag依赖（Google analytics docs中也有描述）：

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'GA_MEASUREMENT_ID');
</script>

对路由器事件做出反应，以便您告诉 GA 使用新的页面标题，尽管 Angular 应用程序是 SPAa：

export class AppRoutingModule {
  constructor(public router: Router) {
    this.router.events.subscribe(event => {

        if (event instanceof NavigationEnd) {
            gtag('config', 'GA_MEASUREMENT_ID',
                {'anonymize_ip': true},
                {
                    'page_path':
                    event.urlAfterRedirects
                }
            );
        }

    });
  }
}

显然，我将 GA_MEASUREMENT_ID 替换为我的真实跟踪 ID。因此，在我拥有 'UA-xxxxxxx'（通用分析）跟踪 ID 的所有情况下，这在以前一直有效。现在，我第一次获得 Google Analytics 4 跟踪 ID (G-xxxxx)，但一切都无法正常工作。未跟踪任何页面浏览量。

我尝试过的：

我正在使用实时跟踪视图进行调试，该视图也针对新分析进行了更改。不过，我希望我想要的内容会在页面视图部分中得到跟踪。尽管如此，我仍然只能看到主机名。
我注意到这些分析有不同的配置，例如有数据流配置，我不确定它的目的，但我假设我需要在那里添加我的主机。我添加了它，但我的页面浏览量仍然不可见。
这个跟踪 ID 是通过 google 标签管理器创建的，我最初尝试使用 Google Tag manager instructions 配置依赖项，但由于没有成功，我切换回了描述的分析跟踪配置在我的 post.
现在我正在写一个 SO 问题，希望其他人已经解决了这个问题并且 he/she 会帮助我。

Answer 1

我不确定这是你问题的答案，但由于过去几天我一直在努力解决同样的问题，我将分享我的经验。

我相信您的设置仍然相关。如果您只使用 google 标签管理器，您可能会收到 gtag() 未定义引用错误，如果您立即在 index.html 的 <head> 中添加以下行，则此错误已修复添加 Google 标签管理器后（这是 SO thread 的方法）

<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
</script>

如果您在 index.html 中手动添加 GA 标签，应该没问题。

我很难意识到 GA4 默认显示页面标题而不是页面路径（或位置），这可能也是您的情况。在我的例子中，页面标题与域名相同，所以给我留下了 GA 标签在更改页面时没有正确触发的印象。但是，如 here 所述，要调查页面 paths/locations，需要查看“参与”菜单。有不同的选项，但可以转到 Engagement/Events，然后单击“页面浏览量”，然后从“用户参与度”>“页面标题”切换到“用户参与度”>“页面路径”。在视频中，描述了其他选项，并简要概述了自定义分析仪表板功能。

关于能够实时查看页面路径，我不确定这是否仍然可行，或者至少我还没有找到方法。

如果有人能参与讨论并分享他们的知识，我将不胜感激，因为 GA4 确实有点难以导航，而且文档也不是很清楚。

Angular + Google 分析：使用新分析跟踪页面浏览量

Angular + Google Analytics: tracking page views with the new analytics

angular

google-analytics

google-analytics-4