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

【问题标题】：Angular + Google Analytics: tracking page views with the new analyticsAngular + Google Analytics：使用新的分析跟踪页面浏览量
【发布时间】：2021-04-30 09:21:43
【问题描述】：

我有多个 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 配置依赖项，但由于没有成功，我切换回我的帖子中描述的分析跟踪配置。
现在我正在写一个 SO 问题，希望其他人已经完成这项工作并且他/她会帮助我。

【问题讨论】：

标签： angular google-analytics google-analytics-4

【解决方案1】：

我不确定这是否是您问题的答案，但是由于过去几天我一直在为同样的事情苦苦挣扎，所以我将分享我的经验。

我相信您的设置仍然适用。如果您仅使用谷歌标签管理器，您可能会收到 gtag() 未定义引用错误，如果您在添加谷歌标签管理器后立即在 index.html 的 <head> 中添加以下行，则该错误已修复（此被视为来自此SO thread)

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

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

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

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

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

【讨论】：