时间戳

首页 > 解决方案 > Angular + Google Analytics：使用新的分析跟踪页面浏览量

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

问题描述

我有多个角度应用程序，它们一直在跟踪页面视图，其逻辑类似于本博客中描述的逻辑。

我还将在此处添加相关代码片段以避免第三方引用。

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

<!-- 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)，但事情就是不想工作。不跟踪页面浏览量。

我试过的：

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

标签： angulargoogle-analyticsgoogle-analytics-4

解决方案

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

我相信您的设置仍然适用。如果您只使用谷歌标签管理器，您可能会收到 gtag() 未定义引用错误，如果您<head>在添加谷歌标签管理器后立即在 index.html 中添加以下行（这被视为来自这个SO 线程的方法）

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

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

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

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

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

推荐阅读