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

Question

Я хочу отслеживать, сколько времени пользователь тратит на выполнение определенного действия (, включая время ответа сервера и время рендеринга (связанные с DOM изменения) ) на веб-сайте.

Я пробовал в угловых рамках.Чтобы сделать это, я думаю о записи времени, когда пользователь начал действие, и я хочу отметить время, когда действие завершено.Как разработчик, я буду знать, когда пользователь начал действие и когда пользователь завершит действие, такое как поиск, фильтр, редактирование, добавление, удаление и т. Д. Таким образом, мы можем понять разницу между ними.Но чтобы отметить каждое действие, мы должны написать код в каждой части приложения.Можем ли мы создать плагин, чтобы мы могли использовать его везде вместо того, чтобы писать один и тот же код везде, чтобы отслеживать время пользователя.Любой подход к его созданию?Или есть какой-либо инструмент для достижения этой функции?

Answer 1

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

Цитируя документацию:

Пользовательские тайминги позволяют разработчикам измерять периоды времени с помощью библиотеки 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)

Подробнее посмотрите на документы .

Answer 2

Хотелось бы что-то вроде этой помощи?

@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, чтобы вернуть Обещания или Наблюдения или что-то еще, если вы предпочитаете это ...

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

Answer 3

Вы должны написать простой 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);

Вы можете отслеживать все события в соответствии с вашими потребностями.Для ответа сервера используйте: EventTracker.start('search_ajax_track') при выполнении запроса и остановите отслеживание при получении ответа.Вы можете изменить приведенный выше код для измерения других параметров в соответствии с вашими требованиями.

Answer 4

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

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

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