@zhou.lang/track v1.1.4

埋点

• 收集的数据

  • 设备信息

    浏览器、操作系统、屏幕信息、是否wifi

  • 登录用户

    用户ID、用户名...

  • cookie

  • 当前页面信息

    当前页面的url、query、referrer

  • 触发DOM元素的信息

    tagName、class、id、内容、当前DOM到body 的dom树。

  • 搜索引擎、关键字

  • 来源网站

• 上报数据方式

  • ajax 默认方式

    ajax方式用于数据量比较大的时候，使用image方式拼接出来的url超出了浏览器限制。

  • Image

    Image方式用于数据流较小，并且它能实现跨域。对于那些需要跨域，且上报的数据较小的网站，这是一很好的上报方式。

  • fetch

  • native.beacon

• 内置track事件

  • $pageview

    页面进入事件，会记录当前页面的地址、查询参数。默认当路由跳转的时候，会开启自动记录。可以关闭自动记录，手动触发这个事件。

    // track 是 Track 实例
    track.track_pageview()

  • $pageleave

  • $page_load

    用于分析页面加载的各个阶段的时间

  • $input_time

    相对于输入控件，会记录输入后的值、输入前的值、输入时长、输入前的时间、输入后的时间....。这个事件会自动触发。

• 不会收集数据情况

  • DOM元素过滤 （可自定义配置）

    默认对html、body不会触发收集

  • 属性过滤(DOM属性和其他自定义属性)（可自定义配置）

    默认对无障碍属性过滤收集

  • DOM事件

    • click: 除配置了DOM元素过滤的以外所有元素。
    • change: type值非submit和button以外的所有input，textarea、select。
    • submit: form

  • class属性包含ph-no-track的DOM元素的

• 自动埋点

  • 开启可配置

• 对埋点数据的过滤

  • 敏感数据

    信用卡信息、密码、社保账号、身份证信息、手机号...

• 性能方面的埋点

  • 页面加载各个阶段耗时
  • 每个http请求耗时

• 问题

  • 路由切换收集放在哪里做
  • userAgent 分析在客户端还是服务端
  • 设备信息需要哪些

• 其他

  • 客户端ip属性需要服务端获取

• 批量发送数据

  开启全埋点模式会导致频繁的数据上报，可能会影响用户正常功能。需要批量上传减少请求数。在达到指定条数之后上传。

  问题点：

  1. 当数据条数没有到达指定数，关闭了页面或跳转到了其他页面，导致未上报的数据丢失。 2. 当上报的同时，页面跳转或关闭了，异步发送请求会导致上报失败。 3. 网络问题导致上报失败

API