Top 3 ways to easily detect when a user leaves a page using JavaScript

This article was originally published on webinuse.com

There are times when we need to detect when a user leaves a web page or clicks on a link. Sometimes we use this data to change something on the website, sometimes to send analytics and sometimes we just need to know this because of something else.

In this article, we are going to cover the top 3 easiest ways how we can detect when a user leaves the page. Unfortunately, each and every one of these ways has some flaws, but also it has its application to some situations.

1. Detect exit before page start unloading

As per MDN: The beforeunload event is fired when the window, the document, and its resources are about to be unloaded. The document is still visible and the event is still cancelable at this point.

This means that when we click on a link, or we want to close the tab, or browser, or anything that would remove our current link from the browser, one moment before the browser starts doing that action will fire beforeunload event.

Let’s say we clicked some link. One moment before the browser starts opening this new link, it will fire the event.

This event can be used to send some data to the back end, or to change something in our localStorage, or whatever we need to do.

const beforeUnloadListener = (event) => {
    //Send something to back end
    fetch('uri')
};

window.addEventListener("beforeunload", beforeUnloadListener);

We need to keep in mind though that this event is not reliably fired. There are some issues with it. It does not always detect when a user leaves a web page, especially on mobile devices. For more info on issues and other data, we can visit MDN.

2. Detect when a user leaves a web page using pagehide event

Similar to beforeunload event, pagehide is fired when a user is leaving the current page, e.g. clicking the back button. But, according to MDN, same as beforeunload the pagehide event is not always reliably fired.

const pageHideListener = (event) => {
    //Send something to back end
    fetch('uri')
};

window.addEventListener("pagehide", pageHideListener);

3. visiblitychange event

The most reliable way to detect when a user leaves a web page is to use visiblitychange event. This event will fire to even the slightest changes like changing tabs, minimizing the browser, switching from browser to another app on mobile, etc. More info about this event can be found on MDN.

This is an excellent way to send some analytics to our back end and is shown in the example below.

document.onvisibilitychange = function() {
  if (document.visibilityState === 'hidden') {
    navigator.sendBeacon('/log', analyticsData);
  }
};

NOTE: This event is excellent for sending analytics, and similar, data to the back end, but if we want to send information if a user still has opened a certain page we should use either the first two events or we should ping user every few seconds.

If you have any questions or anything you can find me on my Twitter, or you can read some of my other articles like Everything we need to know about CSS Borders.