如何在移动浏览器上检测退出意图？
Posted
技术标签:
【中文标题】如何在移动浏览器上检测退出意图？【英文标题】：How can I detect exit intent on a mobile browser? 【发布时间】：2014-08-26 04:51:20 【问题描述】：我正在研究一种解决方案来检测 Safari 移动设备上的退出意图。 （或任何移动浏览器）
在桌面上，我可以跟踪光标移动，当用户打破网页平面时，我可以启动一个弹出窗口。以http://www.quicksprout.com/about/ 为例。将您的光标向上移动到浏览器上的后退按钮，一旦您的光标破坏网页，就会出现一个弹出窗口。如何在移动环境中解决此问题？
有什么方法可以检测到有人点击了 Safari 地址栏并且在收藏夹屏幕出现之前我可以启动一个弹出窗口吗？
提前感谢您的帮助。
【问题讨论】：
【参考方案1】：我知道这是一年多之后的事了，但也许我的回答将来可能仍然对某人有所帮助。
在我的一些网站上，我发现移动退出意图通常包括在用户点击返回按钮之前略微向上滚动。例如，用户在消费内容时经常向下滚动页面，但当他们准备离开时，他们可能会稍微向上滚动（比如页面高度的 5-10%），然后他们会回到后面按钮或关闭选项卡。
我利用这些知识在我的一些内容网站上弹出了一个时事通讯注册表单，它实际上运行良好，不会惹恼用户。因此，如果我检测到用户向下滚动了至少 50% 的页面，然后又向后滚动了至少 5%，我会弹出一个弹出窗口，因为我认为他们喜欢我的内容但准备退出页面。我写了一些简单的 javascript，实际上可以让我在 https://github.com/shahzam/DialogTriggerJS 检测到这种行为
不确定这是否是您正在寻找的确切答案，但希望对您有所帮助！
【讨论】：
但在移动设备上，直到用户完全放下地址栏后才会触发向上滚动事件。到那时，用户已经能够离开网页而无需继续向上滚动（因为他们已拉下地址栏）。【参考方案2】：我刚从网上长途旅行回来，怀着同样的目标，但到目前为止 - 你真的无法检测到用户是否点击了该地址。
但是我发现，您可以在用户准备离开您的网站或放弃购物车之前寻找他们正在制作的模式。这里展示了我们如何解决这个问题并使移动退出意图在所有移动设备上工作，以防用户快速向后滚动页面，因为这可能表明用户对我们的内容失去兴趣并可能想要离开.
检测用户是否在移动设备上。 这部分相当简单 - 我们使用 Javascript 来检查事件是否是“touchstart”，如果是，我们将在我们的 body 标签中添加一个类：
jQuery(document).on('touchstart', function()
$(body).addClass('on-mobile-device');
);
检测滚动方向、滚动速度并显示退出意图弹出窗口：
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 );
基本上就是这样。这样你就不会打断用户的流程，因为用户已经看完了内容并且很快就上去了，我们可以向他展示一条消息。
除此代码外，我们自己所做的是确保仅在用户的购物车中有产品时才显示退出意图弹出窗口，因为我们建议保存用户的购物车并提醒他已放弃通过电子邮件购物车。 您可以在我们的产品页面上进行测试：https://www.cartbounty.com，只需记住在移动设备上试驾之前将产品添加到购物车即可。
【讨论】：
我喜欢这个解决方案，并将它的一部分用于我的实现（在 React.js 中）。您是否还想出一种方法来捕获用户在移动设备上按下后退按钮。在硬件浏览器中？【参考方案3】：一些简单的代码来检测移动设备上的退出意图。
它通过用户向上滚动的速度来检测退出意图。
在启用前延迟 10 秒。如果您只想向真正对您的内容感兴趣的人显示退出意图弹出窗口，您可能应该将其设置为大约 30 秒。
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);
;
【讨论】：
【参考方案4】：至少在移动 safari 上，您正在寻找 window.onpagehide 函数。此事件将在页面被隐藏后立即触发。
这是一个显示此代码在运行中的 sn-p：
<!DOCTYPE html>
<html>
<head>
<script> window.onpagehide = function(e) alert("Don't go! I'm lonely!"); </script>
</head>
<body>
</body>
</html>
不幸的是，如果您希望在隐藏页面之前触发一个事件，那么您很不走运，因为当用户单击地址栏时，移动版 Safari 会停止执行页面上的所有内容。例如，这意味着您无法监控页面高度以查看用户是否在键盘上打字（就像他们点击地址栏时一样）。
【讨论】：
以上是关于如何在移动浏览器上检测退出意图？的主要内容，如果未能解决你的问题，请参考以下文章
您如何在移动 safari 上检测 3G 与 Wifi 连接？