Блог

Мне было поручено разработать показатели того, как пользователи взаимодействуют с нашим веб-порталом. Коллега предложил мне заглянуть в «тепловые карты», чтобы отслеживать положение мыши пользователя. Эта идея показалась мне классной. Похоже, что уже есть некоторые решения SaaS, но наш бюджет невелик, поэтому я добавил немного javascript:

 class UserLog {
  constructor(){
    // ...
    this.results = {... mouseMovements=[]}
  }
  /* ... more functions ... */

  trackMouseMovement(){
    document.addEventListener('mousemove', (event) => {
      this.results.mouseMovements.push({
        timestamp: Date.now(),
        x: event.pageX,
        y: event.pageY
      });
    });
  }
}
 

В настоящее время я использую таймер для отправки этого массива на мой сервер каждые 10 секунд:

 window.setInterval(() => {
  $.ajax({
    url: endpoint, 
    type: "POST",
    data: this.results,
  });
},10*1000);
 

Я бегу в mouseMovements массив, длина которого может достигать нескольких сотен элементов, и заставляю мой браузер плакать, когда выполняется ajax.

Я могу попробовать отправлять данные чаще или попробовать предварительную обработку mouseMovements массива:

 preprocessData: results =>{
    const newResults= {
      ...results,
      mouseMovements: results.mouseMovements.filter((val, index) => index % 10 == 0)
    }
    return newResults
  }
 

(1) Как люди реализуют протокол отслеживания мыши, который позволяет машине пользователя работать в обычном режиме и обеспечивает достаточное разрешение на задней панели для воспроизведения сеанса пользователя и понимания того, как улучшить их работу на сайте?

(2) Как часто я должен отправлять ajax-запросы на свой сервер? Я просматриваю некоторые крупные сайты и замечаю, что их запросы, похоже, зависят от кликов. Является ли отслеживание движений мыши и прокрутки не оптимальным? Или есть лучший способ сбора этой информации?

Во-первых, вам нужно ограничить свой запрос API, большинство сотрудничающих продуктов, таких как Figma инструмент проектирования, в котором вы можете видеть положение мыши других людей в режиме реального времени, скорее всего, отправляет положение мыши один раз 600ms .

600ms это странно, но если вы думаете о позициях мыши как keyframes , то вы можете анимировать между двумя позициями мыши, так что пользователь всегда будет видеть плавное движение мыши, конечно, это зависит от вашего алгоритма анимации.