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

ios*_*uru 8 javascript iphone safari mobile jquery-mobile

我正在研究一种解决方案来检测safari mobile上的退出意图.(或任何移动浏览器)

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

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

提前感谢您的帮助.

小智 20

我知道这是一年之后,但也许我的回答可能仍然有助于未来的人.

在我的一些网站上,我发现移动出口意图通常包括在用户点击其后退按钮之前稍微向上滚动.例如,用户经常在消耗内容时向下滚动页面,但是当他们准备离开时,他们可能会略微向上滚动(比如页面高度的5-10%),然后他们会回到后面按钮或关闭选项卡.

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

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


Joh*_*ane 8

我刚刚带着相同的目标从网上长途旅行回来,但到目前为止 - 你真的无法检测到用户是否点击了地址。

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

  1. 检测用户是否在移动设备上。这部分相当简单——我们使用 Javascript 来检查事件是否为“touchstart”,如果是,我们将向 body 标签添加一个类:

     jQuery(document).on('touchstart', function(){
         $(body).addClass('on-mobile-device');
     });
    
    Run Code Online (Sandbox Code Playgroud)
  2. 检测滚动方向、滚动速度并显示 Exit Intent 弹出窗口:

     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 );
    
    Run Code Online (Sandbox Code Playgroud)

基本上就是这样。这样你就不会打断用户的流程,因为用户已经看完了内容并且很快就上来了,我们可以向他展示一条消息。

除了此代码之外,我们还自己做的是确保我们的退出意图弹出窗口仅在用户的购物车中有产品时才显示,因为我们建议保存用户的购物车并通过电子邮件提醒他放弃的购物车. 您可以在我们的产品页面上进行测试:https : //www.cartbounty.com,只需记住在您的移动设备上试驾之前将产品添加到购物车。


小智 3

至少在移动游猎中,您正在寻找该window.onpagehide功能。该事件将在页面隐藏立即触发。

以下是显示此代码实际运行情况的片段:

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

不幸的是,如果您希望在隐藏页面之前触发一个事件,那么您就不走运了,因为当用户单击地址栏时,移动 Safari 会停止执行页面上的所有内容。这意味着您无法监视页面高度以查看用户是否正在键盘上打字(就像他们单击地址栏一样)。