Angular + Google Analytics: 使用新版分析工具跟踪页面浏览

Question

我有多个Angular应用程序，一直以来都是使用类似于这篇博客中所述的逻辑来跟踪页面浏览。

为了避免第三方引用，我还将相关的代码片段添加在这里。

在每个页面的头部添加gtag依赖项（这也在Google Analytics文档中描述）：

<!-- 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>

在Angular应用中，即使是单页应用程序（SPA），也可以通过对路由事件做出反应，从而告诉GA使用新页面标题。

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

    });
  }
}

显然，我用真实的跟踪id替换了GA_MEASUREMENT_ID。因此，在以前所有使用'UA-xxxxxxx'（通用分析）跟踪id的情况下，这都是有效的。但是，现在我第一次得到谷歌分析4跟踪id（G-xxxxx），事情就不顺利了，没有跟踪到任何页面浏览。

我的尝试：

1. 我正在使用实时跟踪视图进行调试，这也已更改为新的分析。尽管如此，我仍然希望我的要求能够在页面浏览部分中被跟踪。可惜，对于我来说，那里只显示主机名。
2. 我注意到这些分析具有不同的配置，例如，有数据流配置，我不确定其目的，但我假设我需要在那里添加我的主机。我已经添加了它，但我的页面浏览量仍然看不见。
3. 这个跟踪id是通过Google标签管理器创建的，我最初尝试使用Google标签管理器说明书进行配置，但由于无法正常工作，我切换回了我的帖子中描述的分析跟踪配置。
4. 现在我正在写一个SO问题，希望有人已经解决了这个问题，并且他/她将帮助我。

- Boris Strandjev

Answer 1

我不确定这是否是你问题的答案，但由于我最近几天一直在努力解决同样的问题，所以我想分享一下我的经验。

我认为你的设置仍然相关。如果你只使用Google标签管理器，你可能会遇到gtag()未定义的引用错误，如果你在index.html中添加Google标签管理器后立即添加以下行代码（这是从这个SO线程中采取的方法），就可以解决这个问题。

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

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

对我来说很难意识到的是，可能也是您的情况，默认情况下，GA4显示页面标题而不是页面路径（或位置）。在我的情况下，页面标题与域名相同，因此当更改页面时，我留下了GA标签未正确触发的印象。但是，如此处所述，为了调查页面路径/位置，需要查看参与菜单。有不同的选项，但是可以转到参与/事件，然后单击页面视图，从用户参与>页面标题切换到用户参与>页面路径。在视频中，还介绍了其他选项，并简要概述了自定义分析仪表板功能的能力。

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

如果有人加入讨论并分享他们的知识，我将不胜感激，因为GA4肯定有点难以导航，文档也不是很清晰。

- deann