# @bbtfe/tracking

> 埋点sdk

Latest version **0.3.21** (published 2022-09-23) · 0 weekly downloads

## Install

```sh
npm install @bbtfe/tracking
pnpm add @bbtfe/tracking
yarn add @bbtfe/tracking
bun add @bbtfe/tracking
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.21 |
| Published | 2022-09-23 |
| First published | 2019-12-24 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 384.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | bbtfe |
| Maintainers | showstin, juhengze, most_xiaoya, huxinli, sisimengchen, huijuan_lv |

## Links

- npm: https://www.npmjs.com/package/@bbtfe/tracking
- npm.io page: https://npm.io/package/@bbtfe/tracking

## Dependencies (1)

- [intersection-observer](https://npm.io/package/intersection-observer.md) 0.12.0

## Recent versions

- 0.3.21 (latest) — 2022-09-23
- 0.3.20 — 2022-08-17
- 0.3.19 — 2022-07-15
- 0.3.18 — 2021-11-22
- 0.3.17 — 2021-11-12
- 0.3.16 — 2021-11-12
- 0.3.15 — 2021-06-07
- 0.3.14 — 2021-04-02
- 0.3.13 — 2021-04-02
- 0.3.12 — 2021-04-02
- 0.3.11 — 2021-03-15
- 0.3.10 — 2021-03-05
- 0.3.9 — 2021-03-01
- 0.3.8 — 2021-02-02
- 0.3.7 — 2021-02-01
- … 9 more at https://npm.io/package/@bbtfe/tracking/versions

## README

# @bbtfe/tracking

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

社区全埋点脚本

## 引用方式

### npm 引用

```bash
npm i @bbtfe/tracking
```

```js
import bbtTracking from '@bbtfe/tracking';
```

### script 引用

```html
<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

```js
// 旧的使用方式是直接调用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

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

### 埋停留时长：registerHeart

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

### 自动曝光：registerExposure

```js
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

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

### 其他 api

```js
// 自定义一些配置，不知道干啥就别用，也基本用不上，有可能会导致埋点数据错误
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”是固定的，所有端使用的统计都是这同一个。

### 上报数据结构

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

上报数据格式

```javascript
{
    // 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），~~产出公用库~~（结论比较简单，没有输出公用库，参考[浏览器页面卸载事件监听](http://testudy.cc/tech/2018/01/05/unload-event.html)）

2. Cookie，非登录用户的计算
   现状猜测：Cookie 由客户端 myurchin 计算，第一次数据上报时，Cookie 未计算完成
   客观原因：Cookie 特征的获取不能依赖于外部
   主观原因：思考不足，对 cookie 字段的获取和 myunchin 深究不够
   1. [ ]拆解 myunchin，将两者的计算统一；
   2. [ ]进一步思考，非登录用户的 ID 标识如何计算？

## 参考资料

1. [社区埋点字段细则](http://space.babytree-inc.com/pages/viewpage.action?pageId=5440424)

## Track 修改记录

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

---
_Source: https://npm.io/package/@bbtfe/tracking · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._