关闭页面发数据

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

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