How can I detect exit intent on a mobile browser?

Question

I'm working on a solution to detect exit intent on safari mobile. (or any mobile browser for that matter)

On desktop I can track curser movement and when the user breaks the plane of the webpage I can initiate a pop up. See http://www.quicksprout.com/about/ as an example. Move your curser up to the back button on the browser and as soon as your curser breaks the webpage a pop up will appear. How can I solve this in a mobile environment?

Is there any way to detect when someone clicks the Safari address bar and before the favorites screen appears I can launch a pop up then?

Thank you in advance for the help.

Solution 1

I know this is over a year later, but maybe my answer might still help someone in the future.

On some of my sites, I found that mobile exit intent often consists of a slight upward scroll before the user hits their back button. For example, users often scroll down the page quite a bit while consuming content, but when they're ready to leave they might scroll upwards slightly (say 5-10% of the page height), and then they'll go hit the back button or close the tab.

I use that knowledge to pop up a newsletter sign up form on some of my content sites, and it actually works well without annoying the user. So if I ever detect that a user scrolled down at least 50% of my page, then back up by at least 5%, I hit them with a popup since I think they liked my content but are ready to exit the page. I wrote some simple Javascript that actually lets me detect such behavior at https://github.com/shahzam/DialogTriggerJS

Not sure if that's the exact answer you're looking for, but hope that helps a bit!

Solution 2

I just came back from a long trip around the web with the same goal in mind however as of now - you really are not able to detect if a user clicks on the address.

However I found out that you can look for patterns that users are making before they are ready to leave your website or abandon shopping cart. Here is show how we solved this and made mobile exit intent work on all mobile devices in case if the user quickly scrolls back up the page since that can be a sign that shows that the user has lost interest in our content and might want to leave.

1. Detecting if the user is on a mobile device. This part is rather simple - we use Javascript to check if the event is "touchstart" and if so, we are adding a class to our body tag:

    jQuery(document).on('touchstart', function(){
        $(body).addClass('on-mobile-device');
    });
   

2. Detecting the scroll direction, scroll speed and displaying Exit Intent popup:

    function myScrollSpeedFunction(){
        if( jQuery('body').hasClass('on-mobile-device') ){ 
            if(my_scroll() < -200){
                //Your code here to display Exit Intent popup
                console.log('Must show mobile Exit Intent popup')
            }
        }
    }
   
    var my_scroll = (function(){ //Function that checks the speed of scrolling
    var last_position, new_position, timer, delta, delay = 50; 
    function clear() {
        last_position = null;
        delta = 0;
    }
   
    clear();
    return function(){
        new_position = window.scrollY;
        if ( last_position != null ){
            delta = new_position -  last_position;
        }
        last_position = new_position;
        clearTimeout(timer);
        timer = setTimeout(clear, delay);
        return delta;
    };
    })();
   
    jQuery(document).on('scroll', myScrollSpeedFunction );
   

This is basically it. This way you are not interrupting the user's flow since the user has already finished looking at the content and going up very quickly and we can present him with a message.

What we have done ourselves besides this code is to make sure our Exit Intent popup is displayed only in case if the user has got a product in his shopping cart since we are suggesting to save the users shopping cart and remind about his abandoned cart via email. You can test it out on our product page here: https://www.cartbounty.com, just remember to add a product to the shopping cart before you test drive it on your mobile device.

Solution 3

At least on mobile safari, you're looking for the window.onpagehide function. This event will fire immediately after the page is hidden.

Here is a snippet showing this code in action:

<!DOCTYPE html>
<html>
    <head>
        <script> window.onpagehide = function(e) { alert("Don't go! I'm lonely!"); }</script>
    </head>
    <body>
    </body>
</html>

Unfortunately, it looks like if you want an event to fire before the page is hidden, you're out of luck, because mobile Safari halts execution of everything on the page when the user clicks on the address bar. This means that you cannot, for example, monitor the page height to see if the user is typing on the keyboard (as they would be if they clicked the address bar).

Solution 4

Some simple code to detect exit intent on a mobile device.

It detects exit intent through the speed of the user's upwards scroll.

It delays 10 seconds before enabling. You probably should make it about 30 seconds if you only want to show your exit intent popup to people who are really interested in your content.

setTimeout(() => {
  document.addEventListener("scroll", scrollSpeed);
}, 10000);


scrollSpeed = () => {
  lastPosition = window.scrollY;
  setTimeout(() => {
    newPosition = window.scrollY;
  }, 100);
  currentSpeed = newPosition - lastPosition;
  console.log(currentSpeed);

  if (currentSpeed > 160) {
    console.log("Exit intent popup triggered");
    document.removeEventListener("scroll", scrollSpeed);
  }
};

View more solutions

Comments

[Ian Y.]

But on mobile devices, the scrolling up event isn't triggered until users fully bring down the address bar. And at that point, users already are able to leave the web page without continuing to scrolling up (because they had brought down the address bar).

[Hessel]

I like this solution and used parts of it for my implementation (in React.js). Did you also figure out a way to capture the user pressing back-button on mobile. In browser of hardware?