Question

我正在开发一种解决方案来检测Safari手机上的退出意图。（或任何移动浏览器）

在桌面上我可以跟踪光标移动，当用户打破网页平面时，我可以启动弹出窗口。请参阅http://www.quicksprout.com/about/作为示例。将光标移动到浏览器上的后退按钮，一旦光标中断网页，就会出现弹出窗口。如何在移动环境中解决这个问题？

有没有办法检测有人点击Safari地址栏时，在收藏夹屏幕出现之前我可以启动弹出窗口吗？

提前感谢您的帮助。

Answer 1

我知道这是一年之后，但也许我的回答可能仍然会帮助将来的某个人。

在我的一些网站上，我发现移动出口意图通常包括在用户点击其后退按钮之前稍微向上滚动。例如，用户经常在消费内容时向下滚动页面，但是当他们准备离开时，他们可能会略微向上滚动（比如页面高度的5-10％），然后他们会这样做。按下后退按钮或关闭标签。

我利用这些知识在我的一些内容网站上弹出简报注册表单，它实际上运行良好而不会让用户烦恼。因此，如果我检测到用户向下滚动了至少50％的页面，然后至少备份了5％，我会弹出一个弹出窗口，因为我认为他们喜欢我的内容但已准备好退出页面。我写了一些简单的Javascript，实际上让我在https://github.com/shahzam/DialogTriggerJS

检测到这种行为

不确定这是否是您正在寻找的确切答案，但希望有所帮助！

Answer 2

至少在手机游戏中，您正在寻找window.onpagehide功能。隐藏页面后，此事件将立即触发。

以下是显示此代码的代码段：

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

不幸的是，如果您希望在隐藏页面之前触发事件，那么您运气不好，因为当用户点击地址栏时，移动版Safari会停止执行页面上的所有内容。这意味着您不能，例如，监视页面高度，以查看用户是否在键盘上键入（就像他们点击地址栏时一样）。

Answer 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);
  }
};

Answer 4

我只是从漫长的网络旅行中回来，但至今仍怀着相同的目标-您确实无法检测用户是否点击了该地址。

但是我发现您可以在用户准备离开您的网站或放弃购物车之前查找他们正在制作的模式。这里显示了我们如何解决此问题并在所有移动设备上使移动退出意图正常工作，以防万一用户快速向后滚动页面，因为这可能表明用户对我们的内容失去了兴趣并可能想离开

确定用户是否在移动设备上。这部分相当简单-我们使用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://majas-lapu-izstrade.lv/woocommerce-save-abandoned-carts-pro/，只需记住在移动设备上测试产品之前将产品添加到购物车中即可。

如何在移动浏览器上检测退出意图？

4 个答案: