如何使用 Angular 和 Google Analytic 跟踪数据？答案

【问题标题】：How track data with Angular and Google Analytic?如何使用 Angular 和 Google Analytic 跟踪数据？
【发布时间】：2021-09-02 01:37:12
【问题描述】：

我使用 Angular 11 开发单页应用程序（360 度虚拟访问）。我想跟踪用户事件，尤其是在按钮上。

我开始将全局站点标记放入我的 Index.html 文件中，如下所示：Global Site tag in Index.html

在谷歌分析上，我收到连接数据用户First Data User

但我不知道如何使用 Angular 跟踪按钮点击。

有没有人有今天可行的想法？

请随时向我提问以获取更多信息。 :D 预先感谢您的回答。我会分享我的进步。

【问题讨论】：

请澄清您的具体问题或提供其他详细信息以准确突出您的需求。正如目前所写的那样，很难准确地说出你在问什么。

标签： html angular google-analytics

【解决方案1】：

对于按钮点击次数，您必须在 Google Analytics 中配置自定义事件，并在用户点击按钮时推送该自定义事件。

您可以创建onButtonClick() 函数并在用户单击按钮时调用它。在函数中，您应该将事件推送到window.dataLayer：

onButtonClick() {
  window.dataLayer.push({
    event: 'button_click',
    data: {
      user: this.current_user._id,
      ... // Send some custom data that you want to track
    }
  })
}

【讨论】：

【解决方案2】：

当您按照文档中描述的方式安装 gtag 时，您应该小心使用 SPA，因为它会跟踪不正确的页面浏览量。在 SPA 浏览器中仅加载一次页面，所有其他操作都会重新呈现内容，但仍不会被计为浏览量。

相反，您需要设置路由器事件。这是一个很棒的tutorial。它还将解释如何设置其他事件，例如按钮点击。

顺便说一下，在上面的示例中，他们建议发送带有事件的用户 ID。代替它，您可以只将其与配置一起发送一次，它将自动添加到您的任何事件中：

gtag('config', 'GA-ID', {
                    page_path: event.urlAfterRedirects,
                    user_id: this.user.id
                });

【讨论】：

通常您不需要更改代码中的任何内容。您可以在您的网站上安装 Google Analytics 和 Google Tag Manager（这些是唯一的代码更改）。然后，您只需配置 Google 跟踪代码管理器即可将事件发送到您的 Google Analytics（分析）媒体资源。这是我找到的最准确的tutorial atm
嗯，使用通用分析的方法并不总是适用于 GA4。我建议的该教程中描述的方式是适用于我的应用程序的唯一方式。不过谢谢你的评论！

【解决方案3】：

您需要配置 Google 标记管理器以将事件发送到 Google Analytics。我已经写了一篇关于它的帖子：https://pieterjandeclippel.medium.com/angular-or-react-or-whatever-and-google-analytics-97342c909e61

现在看来，Universal Analytics 即将推出，因此您可能想尝试 GA4。

但我还没有尝试过，因为我自己的网站已配置为使用 UA。

【讨论】：

【解决方案4】：

我们最近添加了相同的功能，本指南 here 虽然有点过时，但解释得很好。

归结为您使用专用的GoogleAnalyticsService，使您能够跟踪特定事件（即按钮点击、滚动事件等）。

【讨论】：