关闭页面发数据

最后更新于:2019-08-31 15:07:25

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

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

3.3 batch_send 批量发送

  • batch_send: 默认值 false,表示不开启批量发送,设置为 true 表示开启批量采集,并且使用以下默认值 { datasend_timeout: 6000, 一次请求超过多少秒的话自动取消,防止请求无响应。send_interval: 6000, 间隔几秒发一次数据。one_send_max_length: 6 一次请求最大发送几条数据,防止数据太大 },也可以直接以 {} 的方式自定义这几个参数的值,详细介绍
// 默认不开启批量发送
batch_send:false,
// 开启批量发送
batch_send:true,

//或者
batch_send:{
      datasend_timeout: 6000,  //一次请求超过多少秒的话自动取消,防止请求无响应。
      send_interval: 6000,    //间隔几秒发一次数据。
      one_send_max_length: 6  //一次请求最大发送几条数据,防止数据太大
  },

原理:

写入策略:触发事件就写入 localStorage,localStorage 的兼容性请 参考文档,如浏览器不支持 localStorage,还是使用实时发送数据的方式。

发送策略:定时触发发送,或者,遇到 $pageview(或者使用 quick('autoTrack'); 方法)和 $SignUp 也会立即存储并且发送。

重复策略:必须请求 success 后,才会删除数据,不然会一直请求,直到数据满一定数量。

注意:

  • 1、批量发送功能和神策 SDK 提供的接口回调函数功能不可同时使用,比如 track,login 等。
  • 2、批量发送默认使用跨域 ajax 的方式发送数据,且用客户端系统时间标识数据,如浏览器不支持跨域 ajax 发送数据,还是默认使用 img 且实时发送数据的方式。
  • 3、如果 localStorage 里已经存了超过 200 条数据,会导致批量发送功能失效,localStorage 中只保存这 200 条数据,新产生的数据使用 img 且实时发送数据的方式。当刷新页面或进入同域名的新页面时,如果网络条件恢复正常,会继续发送缓存的数据,批量发送功能也会恢复。