《头条前端埋点设计》一文小节

头条的前端埋点
https://mp.weixin.qq.com/s/QanYnjRN5TM_NlJtQzCALg

先明确埋点分类，头条定义了两种类型埋点，一种是页面事件，另一种是触发事件。
前者又包括两部分，一种页面级别的，一种元素级别的埋点。对应于阿里的页面埋点和曝光埋点。

页面事件

页面级别

页面在前端的定义中以location.pathname区分
页面级别可以统计页面的可见时间和活跃时间
可见的判断标准：（visible）页面在当前浏览器的 viewport 中，且浏览器窗口未被最小化；（invisible）页面不在当前浏览器的 viewport 中，或因浏览器最小化导致其无法被看到。
活跃的判断标准：（active）用户在网页中有活动（例如鼠标、键盘活动及页面滚动等）；（inactive）用户在网页中没有任何活动。

web lifecycle

问题

1. 单页面应用
   history或hash路由变化切换，页面不会重载。需要补偿页面termiated逻辑等。
2. discard状态无法上报数据
   解法：提前做持久化存储localStorage（invisible时），visible时上报并清理，尽最大限度送出数据。

组件级别

两个问题

• 哪些组件要监控
• 怎样统计可见时间

哪些组件要监控

标记监控组件

为组件增加特殊标记属性monitor-pv data-monitor-pv（react 16仅支持data-自定义属性）

Ant Design等组件库可能会被组件过滤，DOM元素上不存在属性。
解法：babel插件，编译时再外层包裹一层，同时不带任何样式，不影响原有组件。

怎么监控

需要监听DOM变化
时机：不能DOM一变化就监控，性能受不了。所有DOM操作结束之后触发。
（注：退一步讲，如果做不了所有DOM结束后的回调，那么可以定时间隔触发，如每隔3s判一下有没有DOM变化）

怎样统计可见时间

• 页面可见
• 组件是否在viewport中
• 组件自身是否设置可见
  • visibility: hidden
  • display:none
  • opacity:0

触发事件

类指令

最基础的，如通过monitor-click指令
// 指令式埋点示例
<Button
monitor-click={JSON.stringify({
type: “func_operation”,
params: { value: 3 },
})}

Click Me

原理：
对当前document注册监听,监听hover click input focus
monitor会从target逐层向上查找，上层有同样指令则也上报。
问题：

• 数据处理不便
• 不是所有要上报的类型都能监听到
• 上报时机自由度不好控制（说到底还是前两条的因素）

装饰器

（前方对客户端来说高能）

// @monitorBefore 使用示例
@monitorBefore((value: string) => ({
    type: 'func_operation',
    params: { keyword: value },
}))
handleSearch() {
    console.log(
        '[Decorators Demo]: this should happen AFTER a monitor event is sent.',
    );
}

return (
    <AutoComplete
        onSearch={handleSearch}
/>
)

monitorBefore是一个高阶函数，即返回值是一个函数。具体可以参考JS的装饰器，返回值的形式很固定(target: object, name: string, descriptor: object)=>{return newDescriptor}，这样就最后执行newDescriptor.value()，在这里最后是执行this.defineDecorator

// monitorBefore 函数源代码
monitorBefore = (event: MonitorEvent) => {
  return (target: object, name: string, descriptor: object) =>
    this.defineDecorator(event, descriptor, this.before);
};

入参是event（可函数可对象）
重点看下 this.defineDecorator(event, descriptor, this.before);

// defineDecorator 函数源代码
before = (event: MonitorEvent, fn: () => any) => {
  const that = this;
  return function (this: any) {
    const _event = that.evalEvent(event)(...arguments);
    that.sendEvent(_event);
    return fn.apply(this, arguments);
  };
};

defineDecorator = (
  event: MonitorEvent,
  descriptor: any,
  decorator: (event: MonitorEvent, fn: () => any) => any
) => {
    // 注意event不仅仅可以是obejct哦
  if (isFunction(event) || isObject(event) || isArray(event)) {
    // 里面就是具体的事件上报逻辑，同时还不能把原descriptor.value落下
    const wrapperFn = decorator(event, descriptor.value);
    // 这里只是传一下arguments做了个合并
    function composedFn(this: any) {
      return wrapperFn.apply(this, arguments);
    }
    // newDiscriptor诞生
    set(descriptor, "value", composedFn);
    return descriptor;
  } else {
    console.error(
      `[Monitor SDK @${decorator}] the event argument be an object, an array or a function.`
    );
  }
};

monitorBefore = (event: MonitorEvent) => {
  return (target: object, name: string, descriptor: object) =>
    this.defineDecorator(event, descriptor, this.before);
};

react钩子

useMonitor

// useMonitor 源代码
useMonitor = (fn: () => any, event: MonitorEvent) => {
  if (!event) return fn;
  const that = this;

  return function (this: any) {
    const _event = that.evalEvent(event)(...arguments);
    that.sendEvent(_event);

    return fn.apply(this, arguments);
  };
};