跟踪用户完成网站中特定操作的时间

Question

我想跟踪用户在网站中完成特定操作(包括服务器响应时间和渲染时间(DOM相关更改))所花费的时间.

我在Angular框架中尝试过它.为此,我正在考虑记录用户开始操作的时间,并且我想记下操作完成的时间.作为一名开发人员,我会知道用户何时开始活动以及用户何时完成搜索,过滤,编辑,添加,删除等操作.因此,我们可以区别对待他们.但是要注意每个动作,我们必须在应用程序的每个部分编写代码.我们可以创建一个插件,以便我们可以在任何地方使用它,而不是在任何地方编写相同的代码来跟踪用户的时间.有没有创造它的方法？或者是否有任何工具可用于实现此功能？

Answer 1

这样的事情有帮助吗？

@Injectable({provideIn: 'root'})
export class TrackingService {

  private cache: {[id: number]: {description: string, time: number}} = {};
  private id: number = 0;

  public startTracking(actionDescription: string): number{
    const id = ++this.id;
    this.cache[id] = { description: actionDescription, time: new Date().getTime() };
    return id;
  }

  public stopTracking(actionId: number){
    const data = this.cache[actionId];
    if(data){
      const elapsed = new Date().getTime() - data.time;
      // ...
      // Do something with your 'elapsed' and 'data.description'
      // ...
      delete this.cache[id];
      return {...data, elapsed: elapsed};
    }
    throw `No action with id [${actionId}] running! `;
  }
}

广告然后您需要跟踪操作的任何位置:

private actionId: number;

constructor(private trackingService: TrackingService){}

startAction(){
  this.actionId = this.trackingService.startTracking('Description');
}

stopAction(){
  const trackingResult = this.trackingService.stopTracking(this.actionId);
}

您可以在某些地方自动执行跟踪,例如路由:

// app.module.ts

private routeChangeSubscription: Subscription;
private configLoadActionId: number;
private navigationActionId: number;

constructor(private router: Router, private trackingService: TrackingService){
  this.routeChangeSubscription = router.events.subscribe((event: Event) => {
    if (event instanceof RouteConfigLoadStart) {
      this.configLoadActionId = this.trackingService.startTracking('configLoad');
    }
    else if (event instanceof RouteConfigLoadEnd) {
      const result = this.trackingService.stopTracking(this.configLoadActionId);
      // ... process the result if you wish
    }
    else if (event instanceof NavigationStart) {
      this.navigationActionId = this.trackingService.startTracking('navigation');
    }
    else if (event instanceof NavigationEnd) {
      const result = this.trackingService.stopTracking(this.navigationActionId);
      // ... process the result if you wish
    }
  });
}

或者对于HTTP请求:

// http-tracking.interceptor

export class HttpTrackingInterceptor implements HttpInterceptor {

  constructor(private trackingService: TrackingService) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const actionId = this.trackingService.startTracking('HTTP request');
    return next.handle(req.clone()).pipe(
      tap(r => this.trackingService.stopTracking(actionId))
    );
  }
}

// app.module.ts

@NgModule({
  // ... other module stuff
  providers: [
    // ... other providers
    { 
      provide: HTTP_INTERCEPTORS, 
      useClass: HttpTrackingInterceptor, 
      multi: true, 
      deps: [TrackingService] 
    }
  ]
})
export class AppModule { ... }

您可以轻松扩展TrackingService以返回Promises或Observables或其他任何内容,以防您更喜欢......

希望这有所帮助 :-)

Answer 2

您可以使用OpenTracing for Js来检测您的代码。

您需要在交易开始和结束时添加请求。

还有一个 OpenTracing 服务器来接收来自浏览器的请求。