您如何设计和实现应用程序范围的事件检测机制来捕获大规模 Angular 应用程序中的点击事件？

Question

我正在尝试实施一种解决方案，以向 Google Analytics 报告详细的用户活动。由于该应用程序是单页应用程序，我知道我可以从 router 捕获页面更改事件，但这只是解决方案的基本部分，仅用于报告已看到的页面。

要点是因为这是一个包含 500+ pages/components 的大型应用程序，我不想创建一个记录器服务需要通过添加它来更改每个页面，我需要想出一个方法确定一个集中的或应用程序范围的位置来捕获和检测按钮单击事件以及可能触发它们的页面。然后我希望能够将相关页面上的详细用户活动报告给分析，例如从 Y 页面点击 X 按钮。

对于中心位置，我知道有 interceptors 用于 HTTP 事件，router 用于页面更改。除此之外，我知道也许我可以使用带挂钩的变更检测，但我不确定我是否必须在应用程序生命周期级别使用挂钩。

如何实现一种机制来捕获和检测 Angular 中相关页面的组件元素事件？框架提供的最佳实践或抽象是否有我可以利用的？

注意：我了解到 Google Tag Manager 专门为分析目的完成这项工作，但我的问题仍然是如何使用 [=28 来实现它=].

Answer 1

自定义事件 API 是一种选择，但您必须在所有点击中发送该事件。

所以使用 HostListner 我们可以实现这一点。

在主要组件中添加监听器，即 app.componnet

 @HostListener('window:click', ['$event'])
    onClickEvent(event: MouseEvent) {
    var target = event.target || event.srcElement;
    var id = target['id']; //this will be the id of the target that you clicked
    this.clickedValue = id;

  }

并在添加每个项目的 ID 时遵循命名模式。即添加组件名称作为id的前缀。 prod build后，组件名称将缩小为一个字母名称，失去原来的名称。

例如：如果您有组件 mychild.component

<div>
<h1 id="mychild-h1">Test</h1>
</div>

这里id是myChild-h1，你可以从中选择组件名称。现在您有了单击的组件的 ID 和名称，并创建一个服务来记录该信息。

附上示例代码1个以供检查

CheckThis

您如何设计和实现应用程序范围的事件检测机制来捕获大规模 Angular 应用程序中的点击事件？

How do you design and implement an application wide event detection mechanism to capture click events in a large scale Angular application?

javascript

design-patterns

google-analytics

event-handling

angular