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

Question

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

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

关于google解析，我收到连接数据用户First Data User

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

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

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

Answer 1

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

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

Answer 2

对于 按钮点击 之类的内容，您必须在 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
    }
  })
}

Answer 3

按照文档中描述的方式安装 gtag 时，请谨慎使用 SPA，因为它会错误地跟踪页面浏览量。在 SPA 中，浏览器只加载一次页面，所有其他操作都会重新呈现内容，但它仍然不会被计为一次浏览。

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

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

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

Answer 4

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

现在看来，Universal Analytics 即将过时，所以您可能想试试 GA4。

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

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

How track data with Angular and Google Analytic?

html

google-analytics

angular