The following script will launch a pop up and redirect if the user moves the mouse off the page. You can add this to your landing page targeted at desktop users, on mobile it wont work obviously. This is just a basic version but you can change the popUp() function to load an email capture box, redirect to the offer page, load a different lander/angle, play a sound or video, send the user to a redirect company.
A working example is available here: exitintent.htm
<html>
<script>
function popUp() {
alert(‘Youll never walk alone!’);
window.location = ‘http://google.com’;
}
document.addEventListener(“mousemove”, function(e) {
// Get current scroll position
var scroll = window.pageYOffset || document.documentElement.scrollTop;
if((e.pageY – scroll) > 20) { window.intentPopReady = 1; }
if((e.pageY – scroll) < 8 && window.intentPopReady == 1) { popUp(); }
});
</script>
Move mouse off the page to close the tab.
</html>
This works by tracking the mouse movements and scroll height of the page. If the mouse moves over the top of the page which normally happens if the user is about to close the tab or enter another url/search term.
This is an easy win for some increased conversion rates and monetising traffic that you were about to lose anyway.
UPDATE 28/6/2016
I built a slightly prettier standalone version for this blog to collect email addresses. You can just post this code in to the footer of your theme template in wordpress. It posts the form data to thanks.php on this server so make sure you change that line. From thanks.php you can access the variable from $_POST[’email’] and do whatever you want with it in php. I use a curl request to add the email to my mailing client software via an API call. Other options would be to add it to a database or simple text file. Code below for the exit intent pop, it should work on just about any html page:
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js” type=”text/javascript”></script>
<script>
document.addEventListener(“mousemove”, function(e) {
var scroll = window.pageYOffset || document.documentElement.scrollTop;
if((e.pageY – scroll) > 20) { window.intentPopReady = 1; }
if((e.pageY – scroll) < 8 && window.intentPopReady == 1) {
$(“#wait”).fadeIn();
}
});
function optin(thisform) {
var email = thisform.email.value;
if (email == null || email == “”) {
var err = true;
$(‘.email’).attr(“placeholder”, “Email Is Required”);$(‘.email’).css(“border-color”, “red”);
}
if (err) return false;
// Cookies.set(’email’, email);
return true;
}
</script>
<div id=”wait” class=”fullbox” style=”font-family: Arial, sans-serif; display: none; overflow: auto; z-index: 10; border-radius: 1px; border: solid 1px #CCC; text-align: center; position:fixed; top:20%; left:20%; right: 20%; bottom: 20%; text-align:center; background-color:rgba(245,245,245,0.98); padding: 20px; z-index: 9999;”>
<div style=”float: right; margin-top: -20px; margin-right: -20px;”><button class=”buttons” style=”font-size: 1em; padding: 5px; font-weight: bold; cursor: pointer;” onclick=”$(‘#wait’).fadeOut();”>X</button></div>
<div style=”clear: both;”></div>
<div style=”text-align: center;”>
<div style=”font-size: 2em; font-weight: bold;”>Get the latest information about affiliate marketing</div>
<div style=”font-size: 1.5em; font-weight: bold;”>Enter your email address below to join the newsletter</div>
<div id=”formholder2″ style=”background-color:rgba(255,255,255,0.98); border-radius: 1px; border: solid 1px #CCC; padding: 10px; text-align: center; margin: 5px 20px;”>
<form role=”form” method=”post” name=”optinForm” action=”http://jamesbachini.com/misc/thanks.php” onsubmit=”return optin(this)”>
<div><input type=”email” class=”email” name=”email” style=”text-align: center; margin: 20px; font-size: 2em; padding: 5px;” placeholder=”[email protected]”></div>
<div><button type=”submit” class=”buttons” style=”margin-top: 2px; font-size: 1.8em; cursor: pointer; border: 1px solid rgba(100,100,100,0.2); color: #FFF; font-weight: bold; text-align: center; padding: 10px 25px; margin: 15px; border-radius: 2px; background: linear-gradient(to bottom, rgba(255,90,0,1) 0%,rgba(255,135,35,1) 100%); box-shadow: 1px 2px 1px 0px rgba(50, 50, 50, 0.2);” >Join Newsletter</button></div>
<div style=”font-size: 0.8em; margin-bottom: 15px;”>Your Information is 100% Secure And Will Never Be Shared.</div>
</form>
</div>
</div>
</div>
