Web/JS SDK分类功能

1.1 停留时长介绍

页面停留（浏览）时长是网站分析中很常见的一个指标，用于反映用户在某些页面上浏览时间的长短，体现了用户对网站的黏性。

1.2 功能开启

请先参考Web/JS SDK 集成 接入SDK，并在初始化时开启停留时长功能。

window.collectEvent('init', {
    // ...... 其他初始化配置
    enable_stay_duration: true // true：开启停留时长
});

1.3 上报事件介绍

1.3.1 predefine_page_alive

开启功能之后，predefine_page_alive事件会在页面活跃状态下，每分钟定时上报一次，或者在切换为非活跃状态时上报一次。
活跃状态：页面处于可视，或者可操作的状态。
非活跃状态：页面处于后台，隐藏，最小化等不可视状态。
事件上报参数：

1.3.2 predefine_page_close

开启功能之后，会记录用户每次【进入页面，切换状态，离开页面】的时间戳，然后在离开或者关闭页面的时候上报predefine_page_close事件，将每一段【活跃状态】的时长相加作为整体的使用时长。

1.4 重置时长

当你的页面是单页应用，点击页面上的tab访问了其他页面时，需要将停留时长进行重置。

window.collectEvent('resetStayDuration', url_path?: string, title?: string, url?: string);
// 参数可不传，不传则取默认当前页面的值

注：此API的含义，重置停留时长。假设你初始访问了页面A，后续点击页面上的按钮，将要访问页面B，此时可调用此API，传入B页面的相关参数。调用此API会立刻发起alive和close事件（事件的内容为A页面的参数和你访问A页面的时长）。而B页面的时长则需要等到B页面关闭，或者你再次调用此API（将要访问页面C）才会真正上报。

1.5 自动重置时长

当路由发生变化时，自动重置停留时长(初始化设置spa: true)（即SDK会自动调用resetStayDuration），获取的参数都是取的当前页面的值，如果你觉得参数获取的不准确，或者希望自己控制此行为可关闭路由监听。

window.collectEvent('init', {
   disable_route_report: true
});

1.6 验证埋点

由于停留时长大多数情况下，会在页面离开或者关闭时触发，所以SDK使用了sendBeacon api 来发送，此请求你需要在浏览器控制台的network（网络）分类中，选择ALL分类来查看（type类型为ping，非正常请求的xhr）

2.1 全埋点介绍

相较于自定义埋点，全埋点可以自动监听用户的访问、点击等行为，然后自动上报相关的埋点。

2.2 设置代码

请先参考Web/JS SDK 集成 接入SDK，并在初始化时开启全埋点

window.collectEvent('init', {
    // ...... 其他初始化配置
    autotrack: true
});

2.3 配置说明

autotrack除了可以设置boolean类型外，还支持对象传入。

2.3.1 配置示例

window.collectEvent('init', {
    autotrack: {
      text: false, // 不采集元素文本
      svg: true, // 采集svg元素
      track_attr: ['attr1', 'attr2'],
      collect_url: () => {
        if (location.href === 'xxx') {
           // 页面地址是xxx则不采集
           return false
        }
        // 其他页面采集                
        return true
      }
    }
})
window.collectEvent('start')

2.3.2 设置自定义属性

1. 自定义属性方式一

开启全埋点后，支持自定义属性的采集，代码如下：

window.collectEvent('init', {
    autotrack: {
       track_attr: ['attr1', 'attr2']
    }
})

<div attr1='ss'  attr2='ddd'></div>
// SDK会采集att1 和 attr2的属性和属性值

2. 自定义属性方式二

window.collectEvent('init', {
   autotrack: {
     custom_attr: 'datastring'
   }
})

<div id="test" datastring="%7B%22id%22%3A2%2C%22name%22%3A3%7D">测试属性采集</div>

datastring的原始值是 
{
  id:2,
  name:3
}

经过encodeURIComponent(JSON.stringify({id:2, name:3})) 填到dom上

2.3.3 设置页面采集

开启全埋点后，支持设置哪些页面需要采集，哪些页面不需要采集

window.collectEvent('init', {
    autotrack: {
      collect_url: () => {
        if (location.href === 'xxx') {
           // 页面地址是xxx则不采集
           return false
        }
        // 其他页面采集                
        return true
      }
    }
})

2.3.4 设置元素采集

如果某个元素本身不会被采集到，可以设置属性让SDK采集到

<div data-tea-container="true"></div>

2.3.5 设置元素不采集

如果某个元素不需要被采集到，可以设置属性让SDK过滤

<div data-tea-ignore="true"></div>

2.3.5 设置曝光采集

window.collectEvent('init', {
    autotrack: {
      exposure: true // 也可以传入对象
      exposure: {
        radio: 0.5 // 元素曝光比例，0-1，默认0.5，即元素展示面积超过50%时曝光
        eventName: '' //可以自定义上报的曝光事件名，默认是bav2b_exposure
      }
    }
})

只有元素含有data-exposure属性，才会对此元素进行曝光。

2.4 全埋点事件

2.4.1 bav2b_page

页面浏览事件，在页面打开，或者路由变化时上报。上报时机分独立页面和SPA（单页应用），独立页面的话则在页面打开后，SDK初始化完成后上报一次。如果是SPA页面，除了SDK初始化完成后上报一次，在点击切换页面时也会上报一次。主要采集的数据为页面浏览的一些参数，用于分析页面浏览行为。

2.4.2 bav2b_click

元素点击事件，在页面发生点击时上报。

2.4.3 bav2b_page_statistics

页面访问事件，在页面访问时上报。上报时机为页面打开后，SDK初始化完成后上报一次（独立页面和SPA都只上报一次），采集的数据主要是页面加载耗时、页面宽高等统计信息，用于分析页面加载统计等信息。

2.4.4 bav2b_beat

页面心跳事件，分别在页面访问，滚动页面后停止500ms，离开页面时上报各上报一次。

2.4.5 bav2b_exposure

V5.1.1以上版本支持。

元素曝光事件，当一个元素滚动到可视区域内，且符合曝光比例时，则上报一个曝光事件。在可视区域内的反复滚动，只会算一次，直到移出可视区域后，再滚动出现才会再次曝光。

2.5 全埋点采集元素过滤规则

2.6 产品功能开启

SDK设置完成后，进入到「数据管理-圈选事件」页面中，将「全埋点数据采集」开关打开即可正常使用。

2.7 曝光埋点使用详细示例

1. 集成web JS SDK。

2. 开启曝光埋点。

   window.collectEvent('init', {
      autotrack: {
         exposure: {
           ratio: 0.4 , //0-1 曝光比例
           stay: 500 // 单位ms 停留时长达到500ms时上报
           //以上两个条件可以只设置一个，两个都设置的情况下需要同时满足才上报
           callback: (data) => {
            // 可以修改data，data是曝光上报的属性
             return data
           }
         }
      }
   })
   

3. 设置要曝光的元素

   <div data-exposure>我是需要曝光的元素</div>
   

4. 设置修改属性的函数

   window.collectEvent('init', {
      autotrack: {
         exposure: {
           callback: (data) => {
            // 可以修改data，data是曝光上报的属性, 也可以新增
             data.element_class_name = 'sijie'
             return data
           }
         }
      }
   })
   
   还有另外一种通用的方式，元素上有attr1和attr2属性也会采集
   window.collectEvent('init', {
      autotrack: {
         track_attr: ['attr1', 'attr2']
      }
   })
   
   <div attr1='ss'  attr2='ddd'></div>
   

5. 自定义事件名
   曝光事件名默认：$bav2b_exposure 自定义事件名有2种方式：

   • 全局生效

     window.collectEvent('init', {
        autotrack: {
           exposure: {
             eventName: 'customexposure'
           }
        }
     })
     

   • 绑定元素生效

     // 上报自定义事件 customexposure
     <div data-exposure data-exposure-event="customexposure"></div>
     

6. exposure_type属性详细介绍

   • $exposure_type:0 首次曝光
   • $exposure_type:3 重复曝光
   • $exposure_type:6 从其他页面返回的曝光
   • $exposure_type:7 后台返回曝光

2.8 滑动埋点使用详细示例

1. 集成web JS SDK。

2. 开启滑动埋点。

   window.collectEvent('init', {
      autotrack: {
         scroll: {
           distance: 200 // 连续滑动距离超过200px后才上报，滑一下停一下不算
           callback: (data) => {
            // 可以修改data，data是滑动上报的属性
             return data
           }
         }
      }
   })
   
   <div id="test" data-scroll='true'></div>
   

3. 设置需要上报滑动埋点的元素。

   window.collectEvent('init', {
      autotrack: {
         scroll: {
           callback: (data) => {
            // 可以修改data，data是滑动上报的属性，也可以新增
             data.element_class_name = 'sijie'
             return data
           }
         }
      }
   })
   
   还有另外一种通用的方式，元素上有attr1和attr2属性也会采集
   window.collectEvent('init', {
      autotrack: {
         track_attr: ['attr1', 'attr2']
      }
   })
   
   <div attr1='ss'  attr2='ddd'></div>
   

4. 曝光事件名默认：$bav2b_slide 自定义事件名有2种方式

• 全局生效

  window.collectEvent('init', {
     autotrack: {
        scroll: {
          eventName: 'customscroll'
        }
     }
  })
  

• 绑定元素生效

  // 上报自定义事件 customscroll
  <div id="test" data-scroll data-scroll-event="customscroll" style="width:200px;height:200px;">
    <div style="width:2000px;height:200p0x;">我才是真正滑动的元素</div>
  </div>
  

5. 滑动方向属性：direction

   $direction:1 向上滑动 
   $direction:2 向下滑动 
   $direction:3 向左滑动 
   $direction:4 向右滑动 
   这里的滚动方向均代指滚动条滚动的方向
   

6. 滑动偏移量属性：offset
   初始化值均为0，向下滑为正，向上滑为负
   

3.1 多实例介绍

多实例上报是用于一个页面上有上报到多个应用的需求（多个appid），同时只需引入一个SDK。

3.2 功能设置

请先参考Web/JS SDK 集成 接入SDK，并在初始化时开启停留时长功能

// 实例1，上报到appid={{APPID_1}}

window.collectEvent('init', {
    app_id: {{APPID_1}},
    // .....其他初始化配置
});
window.collectEvent('start');

// 实例2，上报到appid={{APPID_2}}
// 此处"finder"可用任意的名称，只需与下文start处保持一致
window.collectEvent('finder.init', {  
    app_id: {{APPID_2}},
    // .....其他初始化配置
});
// 此处"finder"可用任意的名称，只需与上文init处保持一致
window.collectEvent('finder.start');

V5.1.1 以上版本支持

4.1 事件介绍

4.1.1 startTrackEvent

开始追踪一个事件

// 开始追踪play事件
window.collectEvent('startTrackEvent', 'play')

调用此方法，不会上报play事件

4.1.2 endTrackEvent

结束追踪一个事件，可以传入事件和事件属性

// 开始追踪play事件
window.collectEvent('endTrackEvent', 'play', {
  name: '播放结束了'
})

调用此事件后才会最终上报play事件，并带上duration参数，参数值为整个play事件发生期间的耗时。

4.1.3 pauseTrackEvent

暂停监听某个事件

// 暂停追踪play事件
window.collectEvent('pauseTrackEvent', 'play')

4.1.4 resumeTrackEvent

重新开始监听某个事件

// 重新追踪play事件
window.collectEvent('resumeTrackEvent', 'play')

SPA项目正常情况下只在SDK初始化后发送一次PV，开启SPA后，则会在切换路由的时候自动上报新页面的PV（如果开启了停留时长功能，也会自动上报）

// 开始追踪play事件
window.collectEvent('init', {
  spa: true, // 是否采集单页应用
  allow_hash: true // V5.1.3开始支持，是否允许监听hash变化，默认false，如果不是hash路由，则不需要此参数
})

使用数据加密上报功能，请将SDK升级至官网最新版，且仅支持私有化，saas版本不支持，最小支持版本5.1.6，且不支持IE11以下的浏览器。

6.1 开启加密

// 以下参数都必须要设置
   window.collectEvent('init', {
      enable_encryption: true,
      crypto_publicKey: 'xxxxx', //加密公钥，公钥需以04开头
      encryption_type: 'sm', // 加密类型，目前只支持 sm 类型
      encryption_header: 'gm_sm2' // 加密request header类型，目前只支持 gm_sm2 类型
   })

开启加密后，数据将以国密加密的方式上报

6.1 适用接口

此功能适用于以下接口
1.数据上报 /list
2.用户属性上报 /profile/list
3.设备注册 /webid
4.ab实验 /abtest_config
5.请求ssid /tobid

6.2 在线解密

可以在此网站，解密加密的数据在线解密

7.1 暂停

暂停SDK的数据采集和上报

window.collectEvent('stop'}

7.2恢复

恢复SDK的数据采集和上报

window.collectEvent('reStart'}