埋点

  • 数据采集 =》 上报 =》 分析 =》 监控
  • 一般需要上报的公共字段

1、埋点的标识信息 eventId eventType :click
pv uv
2、业务自定义的信息，电商网站 sku
3、通用的设备信息、用户信息 userId deviceId useragent :根据此数据可以考虑是否用新特性； 时间戳tiemstamp location

  • 一般怎么上报呢？

实时上报 http1.1里面 chome 同一个域名下，同时支持 6个并发
延时上报 sdk内部统一收集业务方要上报的信息，依托于防抖或者在浏览器空闲时间requestIdCallbak或者在页面卸载前，上报失败做一些补偿措施，catch重新上报

埋点方式

  • 代码埋点：每添加一个或者需要修改都需要开发人员去动代码，函数功能单一，使用装饰器
  • 无埋点 ：监听了整个dom结构，点击任何地方都会上报一个唯一的路径xPath，后台分析；需要用延时上报控制性能
    • 无法太过个性化（太过业务化的自定义的需求）

  • 可视化埋点：后台分析可视化，后台通过iframe 嵌入线上的业务页面

    代码埋点

  • 一个公用的SDK ```javascript 1、延时上报 + 防抖 2、失败补偿，或者还没到执行时机用户就关闭了按钮，然后就下次再进入页面的时候补偿 3、异步队列，先进先出

  1. <a name="pcdPJ"></a>
  2. #### 无埋点
  4. - 监听所有事件，上报所有点击事件以及对应事件所在的元素，最后通过后台去分析数据
  5. - 获取元素的唯一标识xPath,递归
  6. <a name="DyixS"></a>
  7. ### 虚拟列表无限滚动
  8. ```javascript
  9. 1、一个元素展示真正渲染的数据
  10. 2、一个元素来撑开高度保证滚动
  11. 3、容器

比如统计一个按钮点击了多少次：点击按钮：isLogin ,身份
埋点名称，携带数据

标识信息，type :click/pv（曝光次数）/uv()
业务自定义的信息，sku (红+size),比如加入购物车上报商品信息 ，或者贝壳房子的筛选条件

用户信息：userId ,deviceId，userAgent,设备信息。判断是否使用新的API，
时间戳 ，当前页面url，

实时上报\延时上报 ，chorme最多支持6个TCP链接
pv uv 一般是延时上报，
防抖、浏览器空闲时机，页面卸载前（不可靠），部分浏览器检测不到直接关闭

上报失败处理？

无埋点：监听整个dom ,任何点击就上报xPath,后台分析，
问题：性能问题，所以需要延时上报
无法太过自定义，如跟业务相关的

可视化埋点：上报通过无埋点，后台通过iframe嵌入线上页面。然后通过Xpath标识出 点击次数，

代码埋点的优雅实现：基于防抖，丢失补偿

1、一个异步任务队列
2、locastrarage ,补偿失败的上报，初始化的时候如果存储过，就拿出来
3、数据变化的时候存入缓存 ，
4、queueData ，有值就直接上报，上报成功就置空

基础上报逻辑的SDK，约束实体类必须实现某个抽象方法（比如说具体的上报方式+ ）