@bbtfe/tracking

社区用全埋点脚本，支持浏览器中和孕育、时光或第三方 App 内 WebView 中，babytree.com、meitun.com 等宝宝树页面。

社区全埋点脚本

引用方式

npm 引用

npm i @bbtfe/tracking

import bbtTracking from '@bbtfe/tracking';

script 引用

<script src="//h5cdn.babytreeimg.com/h5_fe_lib/release/track/0.3.21/index.js"></script>
<script src="//h5cdn.babytreeimg.com/h5_fe_lib/release/track/0.3.21/index.min.js"></script>

强烈推荐使用的方式 使用构造函数初始化 tack

// 旧的使用方式是直接调用bbtTracking上的api，这种方式如果调用了config方法，很可能会在spa页面中导致pt，pi的混乱。

this.track = new bbtTracking({
  debug: false, // 调试模式开开关
  maxBufferSize: 10 // app外最大可合并提交埋点的数量，默认值：0 不开启合并
});

this.track.send({
  bpi: 'bpi',
  pi: 'pi',
  pt: 'pt'
});

this.track.destroy(); // 这个api一定要在spa组件析构的时候调用，销毁当前的对象

API

App 内部会过滤掉 App SDK 上报的公共字段。 注意：APP 内使用，需要在 pageLoadFinish 之后使用。

发送埋点：send

bbtTracking.send({ pt: 'pt', pi: 'pi', bpi: 'bpi' });

埋停留时长：registerHeart

bbtTracking.registerHeart({
  isSend38601: true, // 如果设置true则使用bpi=38601上报，data中不需要再埋bpi，否则需要在data中自己使用自定义的bpi
  data: {
    pi: 'pi', // 必传
    pt: 'pt' // 必传：埋点后台中该页面的真实pt，用于上报停留时长字段belong_pt取值
  }
});

自动曝光：registerExposure

const doms = [...document.querySelectorAll('[data-track]')];
const configList = doms.map((dom, number) => ({
  dom, // 为兼容旧版本写成 el: dom 也可兼容  dom优先级更高
  data: {
    pt: 'pt',
    pi: 'pt',
    an: '1',
    ...dom.dataset
  }
}));
bbtTracking.registerExposure({
  exposureType: 'one', // multi：曝光多次 | one：只曝光一次
  autoExposure: true, // true：自动发送埋点 | false：不自动发送埋点，可以支持在callBack中手动调用send发送
  callback: (ele, data) => {
    // 曝光回调为兼容旧版本  callback，callBack 都可以使用，callback优先级更高
    window.console.log('曝光元素:', ele, '曝光数据:', data);
  },
  configList // 为兼容旧版本写成 ele: configList 也可兼容  configList优先级更高
});

完读率曝光：finishRateReport

bbtTracking.finishRateReport({
  // 这个以registerExposure 为基础开发，配置参考registerExposure
  dom: document.querySelector('[data-finish]'),
  data: {
    bpi: 'bpi',
    pt: 'pt',
    pi: 'pi',
    an: '1'
  }
});

其他 api

// 自定义一些配置，不知道干啥就别用，也基本用不上，有可能会导致埋点数据错误
const config = {
  geolocation: true, // app外发送地理信息，需要用户授权
  heartbeat: {} // 配置同registerHeart
};
//  config中的额外字段会被浅拷贝到bbtTracking.data对象中 并且会被合并提交到埋点中（一个很操蛋的设计）
bbtTracking.config(config);
// 清除registerExposure行为
bbtTracking.clearExp();
// 清除指定dom的registerExposure行为（兼容旧版，第一个参数无效）
bbtTracking.removeExp(undefined, eles);

接口

1. 支持团队：武汉
2. 对接人：曹丁柱（负责人）、陈兀（API 的开发）、李凡（数据采集入库）

接口信息

URL: http(s)://tracking.babytree.com/warlock-collector/service/T0003
Method: POST
Content-Type: application/json

目前应用名“warlock-collector”和服务编号“T0003”是固定的，所有端使用的统计都是这同一个。

上报数据结构

{
    "head": {
        "version": "0.1.11",
        "appid": "BRS-0000-0005",
        "sign": "md5(html)"
    },
    "body": {
        "ja": [{/*上报数据1*/}, {/*上报数据2*/}, ...],
    }
}

上报数据格式

{
    // meta信息
    cookie: '',     // uniqueid，何赓确认
    ti: Date.now(), // 同App SDK
    px: '21',       // 产品名称，App外部是21，内部同App
    ts: Date.now(), // 时间戳
    sv: '0.1.11',    // 本SDK版本

    // 设备信息
    sr: navigator.userAgent,    // 其他扩展字段，ua
    nt: '',                     // 网络状态，如wifi等
    os: '',                     // 操作系统，Android或iOS
    ov: '',                     // 暂时为空，操作系统版本
    db: '',                     // 暂时为空，设备品牌
    dm: '',                     // 暂时为空，机型
    br: '',                     // 浏览器名称
    bv: '',                     // 浏览器版本
    dr: `${screen.width}x${screen.height}`),                   // 分辨率，"1080x1920"

    // 来源页面信息
    rp: data.rp || '',          // 来源页ID，和pi对应
    rt: data.rt || '',          // 来源页页面类型
    rf: data.rf || '',          // 不统计来源页页面值
    ru: document.referrer,      // 来源页URL

    // 当前页面信息，比较复杂
    // 1. 当pi不存在，pt且pv存在时，pi=`${pt}_${pv}`;
    // 2. 当pi不存在，pt存在，pv不存在时，pi=pt；
    // 3. 当pi存在，pt不存在，pv不存在时，pt=pi。
    pi: pi,                     // 当前页ID
    pt: pt || '',               // 当前页页面类型
    pv: pv || '',               // 当前页页面值
    url: location.href,         // 当前页面URL

    // 业务参数
    user_id: '',        // 用户ID
    bb: '',
    ii: '',             // 栏位ID
    ps: '',             // 区域内横向顺位，如左数第X个
    po: '',             // 区域内纵向顺位，如向下第Y个
    ci: '',             // 当前展示或点击的内容id或物料id
    cs: '',             // 内容来源id
    cy: '',             // 数据来源类型id
    ct: '',             // 内容类型id
    ae: '',             // 行为扩展字段
    ce: '',             // 内容扩展字段
    sr: '',             // 其他扩展字段，（覆盖ua）
    ap: '',             // 事件参数id
    ad: '',             // 页面停留时长

    //v0.1.8新增字段
    la: '',             // 经度，保留小数点后6位
    lo: '',             // 维度，保留小数点后6位
    gl: '',             // 经纬度详细地址
    ip: '',             // 访问ip
    ud: ''              // 设备唯一标示符
}

“head”数据节暂时无用，没有做相应的验证。

1. “version”是改脚本库的版本号；
2. “appid”中的 0021 部分取自和凌丽华商定的代表 app_id 的 px 字段，跟“社区埋点字段细则”中为 wap 分配的“app_id”不一致；
3. “sign”是随便写的。

“body”数据节是要上报数据的主体，“ja”参数可以接收一组数据统一上报。如上示例所示。

Todo

1. 页面卸载时数据的上报

   1. [x]A 标签的事件选择
   2. [x]卸载监测事件的选择（beforeunload，pagehide，unload），~~产出公用库~~（结论比较简单，没有输出公用库，参考浏览器页面卸载事件监听）

2. Cookie，非登录用户的计算 现状猜测：Cookie 由客户端 myurchin 计算，第一次数据上报时，Cookie 未计算完成 客观原因：Cookie 特征的获取不能依赖于外部 主观原因：思考不足，对 cookie 字段的获取和 myunchin 深究不够

   1. [ ]拆解 myunchin，将两者的计算统一；
   2. [ ]进一步思考，非登录用户的 ID 标识如何计算？

参考资料

1. 社区埋点字段细则

Track 修改记录

| 修改人 | 修改时间 | 修改点 | | :----- | :--------- | :---------------------------------------------------- | | xxx | 2020 | 孕育外上报埋点增加 ud 等字段的上报, 调用方法不变 | | xxx | 2020 | 对于埋点停留时长做了兼容，2 种上报方式 | | bsw | 2020-08-03 | 升级滚动曝光，用 IntersectionObserver 替换原 onscroll | | bsw | 2020-08-04 | 拆分代码 |