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 or scrolls up a little.

This is our second attempt to build a mobile exit trigger. Feel free to share your suggestions/comments. Don't hesitate to contact us if you like it as well, it will help us evaluate if we should include it as a default trigger in WisePops.

Important: make sure to display your popup on tablets and mobiles only.

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?