12

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

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

4

4 回答 4

5

这样的事情会有帮助吗？

@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 或其他任何内容，以防您更喜欢...

希望这有所帮助 ：-）

于 2018-06-08T13:06:37.577 回答
1

我将建议您使用自定义 Google Analytics 事件。特别是用户计时。这允许您在网页上记录特定时间，您可以使用自己的标签和类别进行记录。

引用文档：

用户计时允许开发人员使用 analytics.js 库测量时间段。这对于开发人员测量延迟或花费的时间、发出 AJAX 请求和加载 Web 资源特别有用。

我在下面有一些示例代码，这只是与点击挂钩，并将从属性中获取描述符data-name- 如果不可用，将仅记录为“匿名点击” - 您可以自定义它以不跟踪未标记的项目。您还可以挂钩 ajax 调用和其他值得注意的事件，而无需了解您的具体要求，很难给出更多示例。

用于锁定点击事件的示例标记助手。

<button data-name="Foo"/>

下面的代码进行日志记录，请注意它使用window.performance.now()- 来记录，这将返回页面加载时的时间（以毫秒为单位）。这将允许您生成用户交互的时间线，而不是花在单个任务上的原始时间，通过 Google Analytics 报告可以为您计算的方式。

(function($, Analytics) {

  init_hooks();


  function init_hooks() {
    $('body').on('click', track);
  }

  function track(e) {
    // Get a name to record this against
    var name = e.target.data(name) || "Anonymous Click";

    // Time since page loaded
    var time = window.performance.now()

    Analytics('send', {
      hitType: 'timing',
      timingCategory: 'Front End Intereactions',
      timingVar: name,
      timingValue: time
    });

  }
})(jQuery, ga)

查看文档了解更多信息。

于 2018-06-14T06:26:06.257 回答
0

您必须在客户端代码中编写一个简单的事件跟踪器。由于我不知道您要跟踪哪些事件，因此我将为一般情况提供解决方案。

此外，您必须手动触发开始和停止跟踪。

EventTracker = {
  trackedEvents: {},

  start: function(key) {
    var startTime = new Date();
    this.trackedEvents[key] = {
      start: startTime
    }
  },

  stop: function(key) {
    var endTime = new Date();
    this.trackedEvents[key]['duration'] = (endTime - this.trackedEvents[key]['start']) / 1000 + 's';
    this.trackedEvents[key]['end'] = endTime;
  },
}

// Use EventTracker everywhere to track performance
// Example:
EventTracker.start('search_track'); // User searches, start tracking.
setTimeout(function() {
  EventTracker.stop('search_track'); // Records fetched after 5 seconds. Stop tracking.
  console.log(EventTracker.trackedEvents);
}, 5000);

您可以根据需要跟踪所有事件。对于服务器响应，请使用：EventTracker.start('search_ajax_track')当您发出请求并在收到响应时停止跟踪。您可以根据您的要求修改上述代码以测量其他参数。

于 2018-06-13T11:10:49.400 回答
0

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

您需要在事务开始和结束时添加请求。

也是一个 OpenTracing 服务器，用于接收来自浏览器的请求。

于 2018-06-08T11:16:22.603 回答