关闭页面发数据

最后更新于:2019-04-29 11:02:08

1 关闭页面发数据丢失不可避免

因为浏览器的特性,关闭页面前发请求,该请求有可能会失败
具体场景: 点击某个按钮后,在当前页面跳转

2 数据丢失的概率

正常情况下,由于设备,浏览器,网络等因素影响,JavaScript SDK 丢数据概率不超过 5%,但是在关闭页面的情况下,丢失率会增加。 尤其在移动网络环境下,丢失率严重。在手机 ios 下的 safari 丢失率极高。

3 优化方案

3.1 (优先建议),采集跳转页面的 $pageview 事件:

默认采集跳转事件的方法:

用户点击 href 属性为 www.xxx.com 的 a 标签,触发 $WebClick 事件或者用户自定义的 track 事件,这时页面会进行跳转。可能数据未发送成功,页面已经跳转到 www.xxx.com ,会造成数据的的丢失。

改进方法:

给 a 标签的 href 属性添加某个参数,例如 www.xxx.com?urlfrom=123 ,当页面跳转到 www.xxx.com?urlfrom=123 后,采集这个页面的 $pageview 事件,在神策后台中查看 Web 浏览事件,根据 url 是否包含 urlfrom 这个参数来筛选结果。

3.2 (可以尝试) 加 callback :

3.2.1 使用 callback_timeout:

神策自定义事件的 track 方法的第三个参数,回调函数,受 callback_timeout 参数影响(callback_timeout: 默认值 200 ,单位毫秒,表示回调函数超时时间,如果数据发送超过 callback_timeout 还未返回结果,会强制执行回调函数)。

正常情况下数据请求返回后,就会执行 callback 方法,但是考虑到网络卡或者死机的情况,设置 callback_timeout 的超时来强制执行 callback。其中有两种不太常见特殊场景需要注意:

  1. 不能把时间设置的太长,比如 3s,因为不能保证网络请求一定能返回,这时候就会使用这个 callback_timeout,所以设置这个时间最好在 500ms 左右,可接受的范围内。
  2. 不能把时间设置的太短,比如 100ms,因为可能请求还没发成功,就执行 callback 了,正常情况下没问题,但是如果 callback 里是页面跳转的操作,那这个数据可能会丢失。
    // 点击链接
    $('a').on('click',function(e,url){
        e.preventDefault();   // 阻止默认跳转
        sensors.track('a_click', {}, function(){
            location.href = url;
        }); //把跳转操作加在callback里
    });
3.2.2 使用 setTimeout:
    // 点击链接
    function targetLinkIcon( url ){
        //延迟跳转页面,给 SDK 发送数据提供时间
        setTimeout(function(){
          window.location.href = url; 
        },500);
        //神策自定义事件的方法
        sensors.track('demo',{});
    }
3.2.3 (不建议) beacon 的方式发送数据,截止到 2018-3-20 前 ie 和 safari 不支持此方法。
  sensors.track('a_click',{$option:{send_type:'beacon'}});

这三种方式,第一种从根本上解决问题,将事件进行转换。推荐使用。
第二种需要阻止默认事件,对浏览器兼容性好。可以尝试。
第三种方式,在网页关闭情况下也可以发送数据,但是兼容性不佳。