Отслеживайте время пользователя при выполнении определенного действия на веб-сайте

Ответ 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! ';
  }
}

Ad, где вам нужно отслеживать действие:

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 или что-то еще, в случае, если вы предпочитаете это...

Надеюсь, это немного поможет :-)

Ответ 2

Я собираюсь рекомендовать вам использовать пользовательские события Google Analytics. В частности, User Timings. Это позволяет регистрировать определенные тайминги на вашей веб-странице, вы можете регистрировать свои собственные ярлыки и категории.

Процитировать документацию:

Пользовательские тайминги позволяют разработчикам измерять периоды времени с помощью библиотеки analytics.js. Это особенно полезно разработчикам для измерения времени ожидания или времени, выполняющего запросы AJAX и загрузки веб-ресурсов.

У меня есть пример кода ниже, это просто перехватывает клики и получит дескриптор из атрибута data-name - если он недоступен, он будет просто записываться как "Анонимный клик" - вы можете настроить это, чтобы не отслеживать немаркированные элементы. Вы также можете подключаться к аякс-вызовам и другим заметным событиям, не зная конкретных требований, трудно привести дополнительные примеры.

Пример помощника разметки для блокировки событий щелчка.

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

Узнайте больше о документах.

Ответ 3

Вы можете использовать свой код с помощью OpenTracing для Js.

Вам нужно будет добавить запрос в начало и конец транзакции.

Также сервер OpenTracing получает запрос от браузера.

Ответ 4

Вы должны написать простой Event Tracker в своем клиентском коде. Поскольку я не знаю, какие события вы хотите отслеживать, я предоставлю решение для общего дела.

Кроме того, вам придется вручную запускать отслеживание запуска и остановки.

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