Question

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

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

Answer 1

这样的事情有帮助吗？

localhost:<port>

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

@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);
}

或者对于HTTP请求：

// 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-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 { ... }以返回Promises或Observables或其他任何内容......

希望这有点帮助： - ）

Answer 2

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

引用文档：

用户计时允许开发人员使用 analytics.js库。这对开发人员来说特别有用测量延迟或花费的时间，进行AJAX请求和加载网络资源。

我在下面有一些示例代码，这只是勾选到点击，并会从属性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)

了解更多look at the docs。

Answer 3

您可以使用OpenTracing for Js设置代码。

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

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

Answer 4

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

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

＆＃13;

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);

＆＃13;

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

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

4 个答案: