时间戳

首页 > 解决方案 > 在单站点 Angular 应用程序上使用 Matomo 进行动作之间的时间跟踪

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

问题描述

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

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

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

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

标签： angularmatomo

解决方案

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

行动追踪服务

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

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)并让它在服务中找到名称，计算与第一次存储时的时间差，然后返回它或更新您的计算。

推荐阅读