I've been tasked with developing metrics for how users interact with our web portal. A coworker suggested that I look into "heat maps" to monitor user mouse position. This idea seemed cool to me. It seems there are already some SaaS solutions, but our budget is thin, so I whipped up some 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
      });
    });
  }
}

I am currently using a timer to send this array to my server every 10 seconds:

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

I'm running into the mouseMovements array can get up to several hundred elements in length and makes my browser cry when the ajax executes.

I can try sending data more frequently, or I can try preprocessing the mouseMovements array:

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

(1) How do people implement a mouse tracking protocol that allows the user's machine to operate as usual and provides enough resolution on the back end to playback the user's session and understand how to improve their experience on the site?

(2) How often should I be sending the ajax requests to my server? I am looking at some major sites and noticing that their requests seem to be click-driven. Is tracking mouse movements and scrolls not optimal? Or is there a better way of collecting this information?