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

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 starts 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 it will fire beforeunload event.

Let’s say we clicked a link. One moment before the browser starts opening this new link, it will fire the beforeunload 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, you 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 one browser to another browser, or 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. Take a look at the example below.

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

This event is excellent for sending analytics, and similar, data to the back end. But we have to be careful with it, especially because of mobile devices.

This is the most “sensitive” event of the three and it is the most “easily” fired.

Keep this in mind before utilizing it in your app or on your website.

Conclusion

If you want to send information about a user navigating through your page you should use either the first two events or you should ping the user every few seconds.

“Pinging a user” means sending signals to your backend in intervals of several seconds. If the signal hasn’t reached your server after X amount of seconds, that usually means that your user left the page.

Even though this is the most reliable way of detecting when a user leaves a page, it is also the hardest and most complicated to implement. It also requires additional server and client-side resources.

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.