在单站点 Angular 应用程序上使用 Matomo 进行动作之间的时间跟踪

Question

是否可以跟踪动作之间的最小/最大/平均时间？

我有一个单站点页面，想跟踪编辑值的时间。

1. 单击编辑
2. ..编辑值
3. 保存更改

如何跟踪 1 到 3 之间的时间？

Answer 1

这应该可以通过某种集中的状态管理和挂钩到您想要跟踪的事件来实现。

动作追踪服务

您可以使用在整个应用中都可用的服务来跟踪操作（名称、时间戳）并公开一个交互界面。以下内容过于简化，可以轻松重构以使用可观察对象，并且如果需要额外的反应性（例如更新应用程序的另一部分中的操作时间），则可以包含更多保护措施。

export class ActionTrackingService {
 private actions = {}; // could be any storage type like a Map
 private timing = []; // could be an observable(s) for better reactivity

 add(id: string) {
  this.actions[id] = new Date();
 }

 complete(id: string) {
  const action = this.actions[id];

  const diff = Math.abs(new Date() - action);

  delete this.actions[id]; // optional clean up

  this.timings.push(diff) // could also track the action id to differentiate the time between action types instead of all actions. 

  return diff;
 }

 getMin() { }
 getMax() { }
 getAvg() { }
}

活动

1. 单击编辑 - 如果按钮触发此操作，您可以挂钩该事件并将您的操作事件记录到操作跟踪服务。
2. 保存更改 - 如果这是表单上的一个按钮，您可以在此单击事件中添加另一个挂钩并调用类似 astService.complete(actionName) 的内容并让它在服务中找到名称，计算与第一次时的时间差存储，然后返回或更新您的计算。