⚠️Important:⚠️

  • WisePops now includes mobile exit detection out-of-the-box. To use it, simply select the "Exit" trigger in "Display".
  • We've left this article online for users looking for a mobile exit intent script. 
  • The following script is no longer maintained.



As you may know the traditional exit popups are based on mouse tracking.
No way to trigger them on touch devices.

So we had to come up with a different option for mobile devices. 

This tutorial will tell how to trigger an exit popup when your users:

  • hit the back button of their mobile browser
  • scrolls up a little

Step 1:

Copy and paste the following script between your WisePops tracking code and the closing </script> tag:

function getBodyScrollTop() {
    var el = document.scrollingElement || document.documentElement;
    return el.scrollTop;
}

(function() {
    // Let the user scroll up by some significant amount
    var percentUp = 0.2;
    var scrollInterval = 100;

    var scrollStart = getBodyScrollTop();
    var pageHeight = document.documentElement.offsetHeight;

    var interval = null;
    var complete = false;

    if (pageHeight > 0) {
        // Only check the scroll position every few seconds, to avoid bogging the UI
        interval = setInterval(function() {
            var scrollAmount = scrollStart - getBodyScrollTop();
            if (scrollAmount < 0) {
                scrollAmount = 0;
                scrollStart = getBodyScrollTop();
            }

            var upScrollPercent =
                parseFloat(scrollAmount) / parseFloat(pageHeight);
            if (upScrollPercent > parseFloat(percentUp) / 100) {
                clearInterval(interval);
                interval = null;

                if (!complete) {
                    wisepops("event", "exit-intent");
                    complete = true;
                }
            }
        }, scrollInterval);
    }
})();

if (window.matchMedia("(max-width: 2048px)").matches) {
    // Wait before setting event listener for browsers that trigger popstate at page load
    setTimeout(function() {
        window.addEventListener("popstate", function(event) {
            if (event.state && event.state.wisepops === "exit-intent") {
                wisepops("event", "exit-intent");
            }
        });
    }, 100);

    // Do not rewrite state in case of refresh
    if (
        !window.history.state ||
        window.history.state.wisepops !== "normal-intent"
    ) {
        window.history.replaceState({ wisepops: "exit-intent" }, "");
        window.history.pushState({ wisepops: "normal-intent" }, "");
    }
}


The final result should look like this:

<script type="text/javascript" data-cfasync="false">
 (function(W,i,s,e,P,o,p){W['WisePopsObject']=P;W[P]=W[P]||function(){
     (W[P].q=W[P].q||[]).push(arguments)},W[P].l=1*new Date();o=i.createElement(s),
 p=i.getElementsByTagName(s)[0];o.async=1;o.src=e;p.parentNode.insertBefore(o,p)
 })(window,document,'script','//loader.wisepops.com/get-loader.js?v=1&site=XXXXX','wisepops');

function getBodyScrollTop() {
    var el = document.scrollingElement || document.documentElement;
    return el.scrollTop;
}

(function() {
    // Let the user scroll up by some significant amount
    var percentUp = 0.2;
    var scrollInterval = 100;

    var scrollStart = getBodyScrollTop();
    var pageHeight = document.documentElement.offsetHeight;

    var interval = null;
    var complete = false;

    if (pageHeight > 0) {
        // Only check the scroll position every few seconds, to avoid bogging the UI
        interval = setInterval(function() {
            var scrollAmount = scrollStart - getBodyScrollTop();
            if (scrollAmount < 0) {
                scrollAmount = 0;
                scrollStart = getBodyScrollTop();
            }

            var upScrollPercent =
                parseFloat(scrollAmount) / parseFloat(pageHeight);
            if (upScrollPercent > parseFloat(percentUp) / 100) {
                clearInterval(interval);
                interval = null;

                if (!complete) {
                    wisepops("event", "exit-intent");
                    complete = true;
                }
            }
        }, scrollInterval);
    }
})();

if (window.matchMedia("(max-width: 2048px)").matches) {
    // Wait before setting event listener for browsers that trigger popstate at page load
    setTimeout(function() {
        window.addEventListener("popstate", function(event) {
            if (event.state && event.state.wisepops === "exit-intent") {
                wisepops("event", "exit-intent");
            }
        });
    }, 100);

    // Do not rewrite state in case of refresh
    if (
        !window.history.state ||
        window.history.state.wisepops !== "normal-intent"
    ) {
        window.history.replaceState({ wisepops: "exit-intent" }, "");
        window.history.pushState({ wisepops: "normal-intent" }, "");
    }
}
</script>

Step 2:

Open the display scenarios of your campaign and under "Triggers", select "Custom event". Paste the following name in "Set up": exit-intent

That's it, you're good to go!

Did this answer your question?