You need to enable JavaScript to run this app.
A/B测试

A/B测试

复制全文
Web JS SDK
Web/JS SDK埋点与属性(实验指标)
复制全文
Web/JS SDK埋点与属性(实验指标)

上报事件和属性前,请先阅读数据格式介绍。

1. 用户与用户属性

1.1 登录态变化调用

1.1.1 账户登录

如您的产品中有账户体系,请在用户登录后立即设置uuid,以保证用户登录前后口径一致性。

window.collectEvent('config', {
    user_unique_id: "{{USER_UNIQUE_ID}}"  
});

1.1.2 账户登出

在账户登出时调用。

window.collectEvent('config', {
    user_unique_id: null 
});

1.2 设置用户属性

1.2.1 profileSet

设置用户属性,存在则覆盖,不存在则创建。

// 示例:设置用户属性,属性名为key,属性值为value
window.collectEvent('profileSet', {
    key: 'value' // 值支持字符串,数字,数组
})

1.2.2 profileSetOnce

设置用户属性,存在则不设置,不存在则创建,适合首次相关的用户属性,比如首次访问时间等。

// 示例:设置用户属性,属性名为key_once,属性值为value_once
window.collectEvent('profileSetOnce', {
    key_once: 'value_once' // 值支持字符串,数字,数组
})

1.2.3 profileIncrement

设置数值类型的属性,可进行累加。

// 示例:设置用户属性,属性名为key,属性值为1
window.collectEvent('profileIncrement', {
    key: 1
})

1.2.4 profileAppend

设置List类型的用户属性,可持续向List内添加。

// 示例:设置用户属性,属性名为key,原本已有属性值,现添加属性值为value_append
window.collectEvent('profileAppend', {
    key: 'value_append'
})

1.2.5 profileUnset

删除用户的属性。

// 示例:删除用户属性,属性名为key
window.collectEvent('profileUnset', 'key')

1.3 匿名ID

匿名用户ID,用于代替webid的功能。开启匿名用户ID的设置后,不再请求和上报webid,统一由匿名ID代替。

1.3.1 开启匿名ID

// 示例
window.collectEvent('init', {
   enable_anonymousid: true
})

1.3.2 设置匿名ID

// 示例
window.collectEvent('setAnonymousId', 'xxxx')

2. 获取实验参数

「A/B 测试」通常在SDK 初始化后会向分流服务发送一个分流请求('/service/2/abtest_config/'),在获取到分流服务的结果后,客户端开发可以根据分流的结果参数完成代码分支。

  • 请注意此步骤的前置条件:已经根据实验的需求方创建好了实验及相关的参数,请参照:创建实验
window.collectEvent('getVar', 'ab-key', 'ab-default-value', (value) => { 
//ab-key 为实验参数的 key ,用户开发做代码分支,ab-default-value 为异常时的兜底方案,建议和对照组 value 一致
    // 以下为业务代码
    window.collectEvent('发送业务指标事件')
})

getVar是一个异步方法,getVar的回调只有在ab实验结果返回之后才会执行,所以如果想要业务自定义的事件指标也能带上ab_sdk_version,那么需要在getVar的回调中调用业务自定义事件。完整代码如下:

window.collectEvent('getVar', 'abcdefg', 'default', (res)=> {
   window.collectEvent('自定义事件')
   // 这样,你的自定义事件上报时就会有对应的ab_sdk_version
})

注意:在web端和小程序中,「A/B 测试」在调用getVar成功后,会自动上报一个曝光事件(abtest_exposure),如果业务并没有自定义的指标事件作为统计,可以使用abtest_exposure作为内部处理进组用户的相关统计。

3. 上报实验指标(行为事件)

「A/B 测试」 中的实验指标计算依赖Finder中的事件日志,示例代码如下:

  • 也可参见Finder SDK 集成文档 “上报埋点日志” 部分:

3.1 上报事件

用户行为日志采用事件event+属性params的形式,事件一般对应多个属性,也可以仅有事件没有属性。代码埋点方案一般由数据分析师或产品运营设计。
仅上报事件的代码埋点,示例如下:

// 示例:上报事件event,该事件不包含属性
// 置于业务逻辑对应位置
window.collectEvent('event');

上报事件和对应属性的代码埋点,示例如下:

// 示例:上报事件event,该事件包含两个属性
//      一个string类型的属性,属性名为key_string,属性值为value_string
//.     一个int类型的属性,属性名为key_int,属性值为10
// 置于业务逻辑对应位置
window.collectEvent('event', {
   key_string: 'value_string',
   key_int: 10
});

3.2 事件公共属性

如需在每个事件中都包括某属性,可通过公共属性设置,无需在每个事件中重复设置。公共属性只需设置一次,即可包括在所有代码埋点事件、预置事件和全埋点事件中。

3.2.1 设置公共属性

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

3.3 页面跳转前上报埋点

请注意,在埋点设计时,不建议在发送事件后紧接着进行页面跳转。这种情况下,上报请求可能会失败,统计数据可能缺失。请考虑以下两种方式之一:
1)使用beconEvent
beconEvent会将埋点通过浏览器的特性sendbeacon来发送,尽可能补偿数据上报。

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

2)添加延时,给ajax一些时间。

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

4. API说明

4.1 config(paramsObj)

config 命令用于设置上报自定义字段和一些配置项。

  • 需在 init 之后调用
  • 可多次调用,新的配置会和旧的配置合并,同名的设置会被覆盖(等同 Object.assign)
  • 参数为一个对象
    • 参数分类:
      • SDK自身配置项及调试相关字段
      • 用户标识相关字段
      • 用户属性(公共属性),
        • 预设
        • 自定义
      • 事件共有的事件属性
// 1. 第1次调用,此时发送的事件都包含 cn , Monday

window.collectEvent('config', {
    language: 'cn',
    weeks: 'Monday',
})
// 2.  第2次调用,此时发送的事件都包含 en , Monday

window.collectEvent('config', {
    language: 'en',
})

config中包含预设字段,例如用户标识、用户属性、公共属性、系统占用等。以下字段为被SDK占用的字段,每个字段有特定的含义,可设置字段的优先级高于SDK默认的赋值。

类型

字段

值类型

字段说明

实例

用户标识

user_unique_id

string

用户唯一标识。 没有设置 user_unique_id 时,则设置为 web_id。

业务方自行设置 * 设置为以下值时,会被忽略。 【'null', 'undefined', '0', '', 'None'】

公共属性

device_model

string

设备机型

3.3.4开始,针对移动端做简单的ua解析。如:(iphone/ipad/mi1 metal/SM-A8000/等)

公共属性

os_name

string

操作系统

sdk 默认上报:windows/mac/android/ios

公共属性

os_version

string

操作系统版本

sdk 默认上报

公共属性

platform

string

平台类型

默认上报 wap/web

公共属性

browser

string

浏览器名

默认上报

公共属性

browser_version

string

浏览器版本

默认上报

公共属性

language

string

浏览器语言

默认上报

公共属性

referrer

string

前向地址

默认上报

公共属性

referrer_host

string

前向域名

默认上报

公共属性

resolution

string

分辨率

默认上报

公共属性

screen_height

number

屏幕高度

默认上报

公共属性

screen_width

number

屏幕宽度

默认上报

公共属性

sdk_version

string

ByteFinder-sdk版本

默认上报

公共属性

timezone

int

时区

默认上报

公共属性

region

string

地域

业务方自行设置

公共属性

traffic_type

string

流量类型

公共属性

utm_source

string

推广来源

SDK默认采集

公共属性

utm_campaign

string

推广活动

SDK默认采集

公共属性

utm_medium

string

推广媒介

SDK默认采集

公共属性

utm_content

string

推广内容

SDK默认采集

公共属性

utm_term

string

推广关键词

SDK默认采集

系统占用

custom

4.2 页面浏览事件

4.2.1 SDK 默认调用

predefine_pageview事件默认调用,如需关闭,请参考3.4节。

4.2.2 业务手动调用

调用该方法以主动上报一次 pv 事件,参数类型同普通事件的事件属性。
如果传入了自定义的事件属性,会和预设的事件属性进行合并;如果有同名属性,则会覆盖掉预设属性。

window.collectEvent("predefinePageView")
window.collectEvent("predefinePageView", {/**...*/})
// 覆盖默认的属性

window.collectEvent("predefinePageView", {
    url: 'xxx',
    url_path: 'xxx'
    // ...
})

4.2.3 事件预置属性

字段

类型

必传

说明

取值示例

url

string

当前页面地址

url_path

string

当前页面路径,不含协议和主机头部分

/tea/app/10000/behaviorDetail

title

string

页面标题

首页

time

number

时间戳

referrer

string

页面来源,document.referrer的值

4.2.4 对SPA的支持

因为默认情况下,SDK只会在页面加载后,并初始化完成后上报一次 pv 事件,但SPA页面会存在多个页面路由,SDK只会在主页面加载一次,所以在切换页面的时候不会再发起pv,造成后续的页面没有pv数据。因此可以开启SPA参数,SDK会在路由变化时重新上报PV:

window.collectEvent("init", {
    spa: true
})

当然,可能会存在SDK监听到路由变化时,一些页面参数并不是最新的,您也可以手动在路由变化时去上报PV。以react示例:

// <Router history={history} onUpdate={onUpdate}>

function onUpdate() {
    window.collectEvent("predefinePageView")
}

4.3 获取平台生成的各种ID

获取SDK的token信息,里面包含web_id、ssid、user_unique_id信息。 如果您需要获取SDK的ID信息,进行其他设置的话,可以如下:

window.collectEvent('getToken', (token) => {
    //token数据内容类似如下:
    {
        "web_id":"6748002161499735560",
        "ssid":"579bc89a-bd45-4021-8314-669c35f38e3d",
        "user_unique_id":"xxx",
    }
    window.collectEvent('test', {
      id: web_id/ssid
    })
});

4.4 开启实验及实验相关方法

开启模块

使用此模块,在SDK初始化时,在init接口中除了通用参数需要配置外,还需打开A/B实验的模块开关:enable_ab_test: true,同时配置A/B实验的分流地址(ab_channel_domain字段)。

window.collectEvent('init', {
    enable_ab_test: true,
    ab_channel_domain: 'https://tab.volces.com',
    enable_multilink: false,// 是否开启多链接实验,默认false
    enable_ab_visual: false, //是否开启可视化实验,默认false
    ab_timeout: 10000// 分流请求的超时时间,默认10000ms
    disable_ab_reset: false // 是否禁止切换用户时重新获取A/B实验的配置信息,默认false
    ...
});

getVar:获取实验参数

  • 方法:getVar

  • 作用:​获取AB实验配置中的实验对应的配置项值,同时SDK会收集对应的vid(业务一般不用直接关心该vid),命中实验后,会自动上报一个abtest_exposure事件。

  • 参数:

    参数名

    类型

    必填

    说明

    name

    string

    实验配置中的key。

    说明

    提示:业务调用getVar方法,SDK发现实验配置中有对应的key时,会上报一个预置事件abtest_exposure

    defaultValue

    any

    兜底值,当实验配置中没有相应的key的配置项,该方法会返回这个兜底值。

    callback

    (value: any) => void

    当获取到实验配置项值时,如果有设置callback就会执行该callback,并把实验配置项值作为callback的参数。

  • 示例:
    ```TypeScript

    window.collectEvent('getVar',' color', 'red', (value) => {
        // 当配置中存在color实验,value值为配置中的color对应的值,否则值为red
    });
    ```
    

getAllVars:获取实验所有配置信息

  • 方法:getAbSdkVersion

  • 作用:​获取已曝光的实验,返回的结果是所有曝光实验的vid,使用逗号连接起来,格式例如:123,234,678

  • 返回值:

    类型

    说明

    string

    所有曝光实验的vid,使用逗号连接起来,格式例如:123,234,678

  • 示例:

    // vids值类似 123,234,678
    const vids = window.collectEvent('getAbSdkVersion');
    

getAbSdkVersion:获取实验版本ID

注意

开展AB实验必须调用获取实验参数的api(详情请参见 获取实验参数 章节)。如需获取用户所有曝光或命中实验的版本ID(vid)时,可使用此API,此API不会上报abtest_exposure曝光事件。

window.collectEvent('getAbSdkVersion', function(vids) {
    // vids
});

setExternalAbVersion:手动设置额外的AB实验配置

  • 方法:setExternalAbVersion

  • 作用:​手动设置额外的AB实验配置。

  • 参数:

    参数名

    类型

    必填

    说明

    vids

    string 或 null

    vids的格式要求:使用逗号将vids值连接起来,大概这样'123,234,678'。

    • 通过此方式设置的额外的实验配置vids,会合并到通过getVar处理获得到的vids中。
    • 多次调用时,最后一次设置的额外的实验配置vids会覆盖之前的。
    • 当设置null时,SDK会清空设置的额外的实验配置vids,并且不会影响通过getVar处理获得到的vids。
  • 示例:

    • 设置额外的实验配置
      // 手动设置额外的
      window.collectEvent('setExternalAbVersion', '25,225,2225');
      

4.5 自定义webid

如需更改SDK默认的webid,请在SDK初始化的时候设置enableCustomWebid: true,然后通过setWebIDviaUnionID或者setWebIDviaOpenID设置,示例如下:

window.collectEvent('init', {
    enableCustomWebid: true
});
window.collectEvent('setWebIDviaUnionID', 'ssss')
window.collectEvent('setWebIDviaOpenID', 'ssss')

需要注意的是,当设置了enableCustomWebid,必须调用setWebIDviaUnionID或者setWebIDviaOpenID其中的一个设置了webid后,SDK才会继续执行后续的流程。
这种场景适合H5页面在微信小程序中打开,需要传递微信的unionID或者openID给H5页面。

4.6 打开遮罩层

在页面上打开一个全局的遮罩层(相当于白屏),当你需要用AB实验修改页面的UI时,防止用户看到明显的UI变化,可以进行使用。注,当你手动打开遮罩层后,一定记得手动关闭。
开启遮罩层

window.collectEvent('openOverlayer')

关闭遮罩层

window.collectEvent('closeOverlayer')
最近更新时间:2025.12.03 16:27:59
这个页面对您有帮助吗?
有用
有用
无用
无用