Using An Exit Intent Listener To Manage Popups On A Page

Not too long ago I wrote a tutorial titled, Create an Email Subscription Popup with jQuery, that demonstrated how to create popup modals within your web application. In this example the modals were presented on a timer. If you hadn’t noticed, and I think most people did, The Polyglot Developer was using those modals for newsletter subscriptions exactly as demonstrated in the tutorial. The problem was that changes to the user experience on a timer felt intrusive no matter how long the timer. This was further validated through user feedback.

The feedback, which I always take seriously, lead me to changing how the modals were presented. Instead of using a timer, I had switched them to appear based on the users intent to leave the page or site. For clarity, an exit intent happens when the mouse leaves the website to interact with other things on the computer or within the browser.

In this tutorial, we’re going to see how to take action based on exit intents with simple JavaScript as well as jQuery.

While my intentions were to use the exit intent with a popup modal, yours may differ. For this reason, we’re not going to explore the previous tutorial I had written.

Responding to the Exit Intent with a Simple JavaScript Event Listener

Let’s say we want to use nothing more than simple JavaScript to listen for the users intent to exit the page. This is made possible through the mouseout event listener that can be added to DOM elements as well as the document as a whole. Take the following for example:

document.addEventListener("mouseout", evt => {
    if(evt.toElement === null && evt.relatedTarget === null) {
        // An intent to exit has happened
    }
});

In the above code we are setting a mouseout event listener on the document. If we did nothing more than set the event listener, it would respond to basically anything we did with the mouse. Instead, we only care about events where the destination element does not exist. When the destination element doesn’t exist, it means that we left the browser and that an intent to exit has happened.

The above code is good, but there is some to be desired. For example, it might not be a good idea to allow the exit intent to happen instantly to improve the user experience. Instead it might make sense to add a delay:

setTimeout(() => {
    document.addEventListener("mouseout", evt => {
        if(evt.toElement === null && evt.relatedTarget === null) {
            // An intent to exit has happened
        }
    });
}, 5000);

Now we’re only considering an intent to exit if the user has been on the page for at least five seconds, hence the setTimeout method.

Now this is where things get a little interesting. Typically you would only want an exit intent to happen one time. Meaning if the user initiates an exit intent, but doesn’t actual exit, the event probably shouldn’t trigger again the next time the intent happens. To do this you’d want to remove the event listener from the document with something like this:

document.removeEventListener("mouseout", () => {});

However, it isn’t exactly that easy. You have to take into consideration the scoping of any of your variables to be successful. This is why I personally decided to take the jQuery approach since these kind of obstacles were not present.

Using jQuery to Respond to Exit Intents

The process to handle browser exit intents with jQuery is similar to how it is done with vanilla JavaScript. However, I had a much better experience with using jQuery, probably because of the extra conditions that were in place behind the scenes with jQuery. Take the following code for example:

setTimeout(() => {
    $(document).on("mouseout", evt => {
        if(evt.toElement === null && evt.relatedTarget === null) {
            $(evt.currentTarget).off("mouseout");
            // An intent to exit has happened
        }
    });
}, 5000);

The above code should look familiar to you. Using the .on listener with jQuery we can listen for mouseout events on the document. If the event is an intent to exit, we can then disable the listener with .off which will prevent intents to exit from happening again.

In the above example I am also setting a delay before the exit intents are registered. While it isn’t necessary, it seemed to have stopped some of the negative feedback I was receiving.

Conclusion

You just saw how to use vanilla JavaScript as well as jQuery to listen for intents to exit within a website. Listening for exit intents is particularly useful when displaying subscription popups because it is your last effort to ask the user if they want to continue to receive information after they leave without disrupting their reading experience.

If you want to see how to make the actual subscription popup, check out my tutorial titled, Create an Email Subscription Popup with jQuery.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.