Behavioral Analysis: Recording Mouse Movements and other User Interactions with JavaScript

Posted on December 24, 2020 in Programming • Tagged with Behavioral Analysis, JavaScript, Analytics, Mouse, Touch Events, Mobile, visibilitychange • 10 min read

In this blog post, I will introduce a JavaScript library that allows to track various user interactions of website visitors. Several key problems that arise when creating a JavaScript analytics application will be discussed and solved in this blog post.


Continue reading

Reliable Cross Domain Requests when the User leaves the Page

Posted on December 10, 2020 in JavaScript • Tagged with navigator.sendBeacon(), visibilitychange, onbeforeunload, cross domain request • 7 min read

In this article, I demonstrate how to reliably communicate JSON data to a cross domain server after the user is about to end or interrupt the browsing session by either:

  • switching the focus to another page
  • switching from the browser to another applicaton
  • closing the tab
  • closing the browser

or any other means of terminating or interrupting the current browsing session. Mobile devices and desktop devices should be equally supported.

Why do I have this very specific requirement?

I am in the process of developing a JavaScript analytics application and I need to record user interactions and send those user interactions from any website to my remote server.

Put differently: I need to record user interactions up until the point where the user leaves the browsing session. The ideal event for this scenario is to attach an event listener to visibilitychange:

document.addEventListener("visibilitychange", function() {
  if (document.visibilityState === 'hidden') {
    localStorage.setItem('triggeredOnPageClose', new Date());
  }
})

This event fires when the user loses focus of the current window and the page visiblity becomes hidden, for example when the user changes the tab.

However, is the above event also triggered when the user closes the page or closes the entire browser? In order …


Continue reading