You need to enable JavaScript to run this app.
导航
Web/JS SDK 集成场景实践
最近更新时间:2025.05.29 16:08:31首次发布时间:2025.05.29 16:08:31
我的收藏
有用
有用
无用
无用

user_unique_id相关

用户登录态设置

比如业务有账号体系,并希望SDK同步用户状态。就可以考虑在用户登录后立即对SDK设置user_unique_id,在用户登出后立即对SDK清除user_unique_id。

说明

提示:用户登录态概念是站在业务角度的一个说法,SDK本身是没有用户登录/登出概念的,SDK只关心user_unique_id是否有被主动设置。

// 如您的产品中有账户体系,请在用户登录后立即设置uuid,以保证用户登录前后口径一致性。
window.collectEvent('config', {
    user_unique_id: "zhangsan"  
});

//如果您希望用户退出回复匿名状态时,则在退出登录时调用
window.collectEvent('config', {
    user_unique_id: null  
});

另外SDK也提供单独的setUserUniqueID方法来设置user_unique_id。

// 用户登录后立即设置user_unique_id
window.collectEvent('setUserUniqueID', 'zhangsan'); // 值可以考虑为能关联到用户的一些属性

// 用户登出后立即清除user_unique_id
window.collectEvent('setUserUniqueID', null); // 值可以考虑为能关联到用户的一些属性

用户口径相关处理

如果要设置用户口径,需要在设置user_unique_id的同时设置user_unique_id_type。

window.collectEvent('config', {
    user_unique_id: 'zhanshan',
    user_unique_id_type: 'huoshan', // user_unique_id_type的值是预制好的
});

说明

提示:user_unique_id_type的值是提前预制好的,具体找您的项目经理或客户成功经理。

多用户口径类型处理

如果要进行多口径绑定,在设置user_unique_id的同时设置user_unique_id_type后,还需要调用bind方法处理。注意:SDK版本要求5.2.0+,并且仅在SAAS云原生、私有化支持。

// 类型定义,bind参数,回调,重试次数
  window.collectEvent(params: Record<string, any>, callback: Function, retry?: boolean) {
window.collectEvent('bindToken',{
    phone: '130xxxxxxxx',
    email: 'xxx@yyy.com'
}, (status) => {
  // 业务根据status进行后续处理,可选处理
}, 3);

APP打通H5上报

如果在客户端内嵌了H5页面,您希望将产生的事件和属性数据统一上报到客户端应用中,(即,H5页的数据不通过Web SDK单独上报到Web的应用中),并复用客户端设置的user_unique_id(实现用户数据打通)和公共属性,此时,您需要在客户端应用和H5页面分别集成APP端SDK、Web端SDK,并同时打开H5页面的打通开关。
以下为在Web SDK中打开打通H5开关的示例。客户端的H5开关设置可参见对应SDK文档。

// H5内嵌到原生端并打通
window.collectEvent('init', {
    // ...... 其他初始化配置
    enable_native: true 
    // 5.1.3以下版本参数名为Native,
    // 5.1.3以上版本修改名为enable_native,但仍然兼容了Native的设置
})

如果客户端初始化的时候采用了多实例的方式,可能会导致打通失败。有以下两种方式来调整:

  1. 客户端调用上报方式,使用默认实例初始化,不用多实例。
  2. H5页面手动绑定以下多实例的appid。在init方法之后,start方法之前调用如下代码。
window.collectEvent('setNativeAppId', appid)

多实例相关

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

功能设置

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

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

// 实例2,上报到appid={{APPID_2}}
// 此处"finder"可用任意的名称,只需同一个实例保持一致即可。禁止使用default,SDK占用了。
window.collectEvent('finder.init', {  
    app_id: {{APPID_2}},
    // .....其他初始化配置
});
// 此处"finder"可用任意的名称,只需同一个实例保持一致即可。禁止使用default,SDK占用了。
window.collectEvent('finder.start');

事件(含预置)、事件属性、事件公共属性相关

过滤事件

您可以调用filterEvent对事件进行过滤,调用后,事件上报前都会经过filterEvent处理。如果没有返回值,则会用原始eventData进行上报。

window.collectEvent('filterEvent', (eventData) => {
// 具体请根据eventData的数据结构来修改
  eventData[0].events.forEach(event => {
     // dosomething
  })
  return eventData // 这一步必须要
})

设置事件公共属性

如需在每个事件中都包括某属性,可通过公共属性设置,无需在每个事件中重复设置。公共属性只需设置一次,即可包括在所有代码埋点事件、预置事件和全埋点事件中。当页面发生跳转后,需要重新加载SDK和重新设置需要的公共属性(单页应用除外).

// 示例:设置自定义的公共属性,属性名为key_public,属性值为value_public
window.collectEvent('config', {
   key_public: 'value_public'
});

页面跳转上报

请注意,在埋点设计时,不建议在发送事件后紧接着进行页面跳转。这种情况下,上报请求可能会失败,统计数据可能缺失。请考虑以下两种方式之一:

beaconEvent

beaconEvent会将埋点通过浏览器的特性sendbeacon来发送,允许页面关闭后,仍可发送一些少量数据到服务端,但数据大小有限制,通常不能超过64000个字节。

window.collectEvent('beconEvent', 'event', {})
window.location.href = 'https://xxx.com';

注意

如果是直接杀掉浏览器,或者APP,这种方式也会失效,所以尽量避免在这种场景下上报埋点。

延时发送

给埋点请求一些时间,一般小于300ms即可。

window.collectEvent('test_event');
setTimeout(()=>{
    window.location.href = 'https://xxx.com'
}, 150)

SPA单页应用

SPA项目正常情况下只在SDK初始化后发送一次PV,开启SPA后,则会在切换路由的时候自动上报新页面的PV(如果开启了全埋点功能,也会在切换路由时自动上报PV)

window.collectEvent('init', {
  spa: true, // 是否是单页应用
  allow_hash: true // V5.1.3开始支持,是否采集hash路由,默认false,如果不是hash路由,则不需要此参数
})