头图

老大喊我做一个项目埋点方案,我给他这么搞,做前端的都用得上!

vannvan
English

啰里八嗦的话

众所周知,做C端产品对用户体验的要求是极高的。同时产品实施是否到位,投入回报是否成正比,成了一个团队是否有奖励的关键因素(这是一个最实际的软件团队的真实诉求“之一“哈哈哈)。尽管前期会做众多的用户调研,收集收据等等,明确哪些是用户基础需求,哪些是用户兴奋需求,但还是需要一个具体的可以量化的数据支撑,来评估某项业务是否满足了用户真实的需求,以及为产品后期迭代做参考等等。

那么基于以上的实际情况,对于整个产品线而言,做一个埋点业务收集是非常必要的。当然做埋点还有更多的意义,在这里暂不展开讨论。

以下将对该方案实施过程进行全面的分析,同时也将提供一个简单的合理的可复用的方案输出,感兴趣的客官请留步~✌

当前现状

  • 目前3个产品业务线产品,对于前端项目而言是分开管理的,现有业务也会有源源不断的需求增加,后面还会增加新的产品线。
  • 主要使用Vue.js@2.0版本,但有一个项目是采用3.0版本开发的。
  • 项目已开发迭代历经8个月,主要产品业务代码已超17万行。

整体分析

  • 对接第三方没有可以既可以满足当下需求,又可以满足强扩展性的关键要素的现成方案,同时对于隐私信息的收集不能交给第三方。
  • 现有代码量不具备可精准卖点的条件。
  • pv类型的数据收集可暂时交给某度统计,这种大而笼统的数据只有运营会关注,埋点对用户分析的粒度更小。
  • 埋点尽量不影响具体业务功能及代码,甚至绝对的不影响。

实际需求

  • 收集粒度到按钮级别的用户。
  • 页面进入时间,停留时间,也就是要拿到enterTimeleaveTime
  • 要具备可对某页面使用量,某按钮使用量,某用户使用轨迹,某时间段按钮使用量,用户浏览器基本信息,后台最好具备前端页面功能点击量的可视化还原。

把需求转换成数据

以下是大致的需要收集到的数据

userAgent // 浏览器信息,包含设备信息,分辨率等

path // 访问页面 可以用router也可以用location.href

pageInfo // 页面信息 enterTime和leaveTime

userInfo // 用户信息 当前登录用户个人信息

eventData // 操作事件信息 事件类型,操作DOM节点,操作时间,节点名称(html节点名称),节点文本

代码怎么下手

  • 不影响现有业务,抽离成公共类是必须的。
  • 用户信息以及其他后期可能记录的属于扩展性信息,应可以外部传入。
  • 目前使用开源UI框架,项目整体按钮节点都是button标签(部分不是的可以改过来)。
  • 数据记录和发送,发送不能太频繁,需要一个记录数据的队列,设定一个阈值,到达阈值后进行发送并清空。

代码大概的雏形

基本结构

class Monitor {
  constructor() {
    
  }
  /**
   * @description 初始化方法:
   *    extentData 用于传入基于业务的数据信息,
   *    router 是vue-router对象,这里既可以通过init传入,也可以在当前类模块直接引入,
   *    config 是配置信息
   * @param {*} { extentData = null, router = null, config = {} }
   * @memberof Monitor
   */
  init({ extentData = null, router = null, config = {} }) {
        //TODO
    // 这里可以做一些覆盖默认配置,初始化监听事件等操作
    let { vpt } = config
    this.vpt = vpt ? vpt : this.vpt
    this.uaHandler()
    
    // 这里下面会讲
    this.eventHandler = this.eventCallback.bind(this) // 关键
    document.addEventListener('click', this.eventHandler, true) 
  }
}

使用方式

// 这里建议在项目封装的router管理模块使用
import Monitor from './monitor'

const monitor = new Monitor()
monitor.init({
  router: router,
  extentData: {
    userInfo: {
      userName:"张三",
      account:"13666666666"
    }
  }
})

Monitor类应具备的数据

 constructor() {
    // 发送队列的阈值
    this.vpt = 10

    // 事件节点类型限制
    this.limitNodeType = ['button']

    // 用户浏览器信息
    this.uaInfo = {}

    // 页面级别的数据队列
    this.pageDataQuene = []

    // 当前操作队列ID
    this.currentQueneId = null

    // 此属性用于保存bind返回的匿名函数
    this.eventHandler = null
 }

埋点功能结构

浏览器信息记录

这里可以自定义获取更多的信息,后面如果对首屏加载,网速检测等数据也有收集需求也可以加进去。

 /**
  * @description ua信息记录
  * @memberof Monitor
 */
uaHandler() {
  this.uaInfo = {
    userAgent: navigator.userAgent,
    dpiWidth: window.screen.width,
    dpiHeight: window.screen.height
  }
}

记录页面维度信息

由于最终上传数据是一个整合的数组对象,而单项数据又是跟着页面走的,同一个页面可能在阈值范围内反复访问,所以需要一个guid用于标识”当前页面“确保唯一性,guid生成方法如下,一般在阈值内可保证唯一性,没必要搞得太复杂。

/**
* @description 生成guid,当前操作队列的唯一标识
* @returns {*}
* @memberof Monitor
*/
guid() {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
    var r = (Math.random() * 16) | 0,
        v = c == 'x' ? r : (r & 0x3) | 0x8
    return v.toString(16)
  })
}

到达阈值需要上传现有数据并清空数据,上传数据应该是外部自行处理的,所以应向外部暴露一个get()方法用于获取数据,clear()用于清空数据

获取数据

/**
   * @description 用于外部获取操作队列
   * @returns {*} Array[]
   * @memberof Monitor
   */
get() {
  return this.pageDataQuene
}

清空数据

 /**
   * @description 用于清空队列
   * @memberof Monitor
   */
clear() {
  //TODO
  this.pageDataQuene = []
}

当然这里也可以采用内部上传数据的方法,就是需要引入接口请求方法,把这项功能交给Monitor处理,这里仅需在内部同时监听队列即,如是可以有vptHandler方法

/**
   * @description 阈值监听,达到阈值就发送数据
   * @memberof Monitor
   */
vptHandler() {
  if (this.pageDataQuene.length >= this.vpt) {
    this.sendData()  // 这里用于走上传数据业务,上传完毕后清空数据,可根据实际情况进行处理
  }
}

记录页面访问的基本信息

router.afterEach(async (to) => {
  // 离开监听
  this.updateLeaveTime()
  // 阈值监听
  this.vptHandler()
    // 当前操作页面的唯一标识
  this.currentQueneId = this.guid()
  let initPageData = [
    {
      id: this.currentQueneId,
      path: to.path, // 因为当前项目目录结构和菜单路由命名是高度一致的,所以可以采用path进行记录
      uaInfo: this.uaInfo,
      pageInfo: {
        entryTime: this.getTime() //注意这里只有enterTime,更新leaveTime的时机交给👆上面的updateLeaveTime方法
      },
      ...extentData,
      eventData: [] // 事件记录置空
    }
  ]
  this.pageDataQuene = this.pageDataQuene.concat(initPageData) // 将当前页面数据追加到操作队列
})

离开页面监听

此时是完成一个页面数据的闭环的关键要素

/**
   * @description 页面离开时间更新
   * @memberof Monitor
   */
updateLeaveTime() {
  let index = this.pageDataQuene.findIndex(
    (el) => el.id == this.currentQueneId
  )
  if (index >= 0) {
    this.pageDataQuene[index].pageInfo.leaveTime = this.getTime()
  }
}

事件的监听

事件的监听需要一个中转,对于eventCallback应该具备针对不同事件类型方法的转发,当然目前只考虑点击事件。

/**
   * @description 事件回调中转
   * @param {*} e
   * @memberof Monitor
   */
  eventCallback(e) {
    if (e.type == 'click') {
      this.clickEventHandler(e)
    }
  }

点击事件的监听

上面提到由于项目整体采用统一的UI框架,几乎所有的按钮都是采用的标准button标签,故可以根据DOM节点获取到如下数据进行记录

const { innerText, localName, formAction, type } = ele.target
 /**
   * @description 页面点击事件收集
   * @param {*} ele 事件节点
   * @memberof Monitor
   */
clickEventHandler(ele) {
  const { innerText, localName, formAction, type } = ele.target
  let isEv = this.limitNodeType.includes(localName) 
  if (isEv) {
    let eventData = [
      {
        innerText,
        localName,
        formAction,
        eleType: type,
        eventType: 'click',
        clickTime: this.getTime()
      }
    ]
        
    // 找到当前页面中的eventData,将当前操作追加进去
    let index = this.pageDataQuene.findIndex(
      (el) => el.id == this.currentQueneId
    )
    if (index >= 0) {
      this.pageDataQuene[index].eventData = this.pageDataQuene[
        index
      ].eventData.concat(eventData)
    }
  }
}

监听事件销毁

针对特定场景我们不需要记录用户的行为,可以对Monitor的监听事件进行销毁,以避免多余的性能消耗

// 销毁监听事件
destroy() {
  document.removeEventListener('click', this.eventHandler, true)
}

结果输出

至此我们可以获取到如下结构的数据,根据阈值设定的时机进行上传。ß

W3TBdO.png

总结成果

以上整体方案根据各项实际情况对需求进行了分析,从整体分析到代码落地,结合项目整体特点,同时兼顾低成本开发与接入,满足后期扩展性,甚至该思路可以满足其他单页面框架。

像这种类似的需求,在团队规模不大的情况下,可能不会被产品关注到,有些没有类似经验的产品也无从下手,不知道怎么收集,怎样展示。所以往往是项目经理去向开发直接提出的需求,也没有具体的原型输出,这时候就需要开发去从各种维度思考问题,将这种“一句话需求”转化成可实施的代码方案应用到工作当中。

此文章涉及到的代码某些部分考虑的可能不算周全,同时对问题分析的角度可能还有众多其他的看法和讨论,更多的本意还是将这种方法分享给诸多同行(肯定不是最好,哈哈哈哈),欢迎路过的XDM随时滴我。

不要吝啬留下你的脚印哈👇

阅读 1.2k

Be a moral integrity programmer!

648 声望
54 粉丝
0 条评论
你知道吗?

Be a moral integrity programmer!

648 声望
54 粉丝
宣传栏