数据采集方式

既然是要收集数据，那么首先需要思考的事情肯定是如何收集。收集数据的方式有很多，下面我就简单为大家介绍两种较为常见的方式。以点击事件为例：

手动上报数据

这是最简单的一种数据上报方式了，直接在点击事件的回调函数中收集我们需要上报的数据即可。

function clickHandler() {
  let params = {
     event: 'click',
     value: ''
  }
}

• 优势：比较简单，只需要在对应的回调函数中添加上报的代码即可
• 缺点:埋点上报代码与常规的业务代码过度耦合，不利于维护

通过给元素添加属性上报

通过给元素添加特定的属性，并在全局添加点击事件，利用点击事件的传透，遍历找到触发该事件的元素，判断元素上是否有绑定相关的属性，有则取相关的值进行上报，没有则不进行上报操作。

首先需要为全局添加点击事件，并且事件触发时需要找到对应触发事件的元素，判断是否拥有需要上报的属性。

// 获取点击追踪的元素
function getClickTraceElement(target) {
  let ele = target
  let clickTraceAction = ele.getAttribute('click-trace-action')
  while (ele.tagName !== 'BODY' && !clickTraceAction) {
    ele = ele.parentNode
    clickTraceAction = ele.getAttribute('click-trace-action')
  }
  return ele.tagName !== 'BODY' ? ele : null
}

// 全局添加点击事件
document.body.addEventListener(
    'click',
    (event) => {
      // 此方法用于找到触发事件的元素
      let ele = getClickTraceElement(event.target)
      // 如果点击的元素有绑定该属性，则返回元素，否则返回null
      if (ele) {
        // 自定义事件名称，可以自行修改判断
        let traceAction = ele.getAttribute('click-trace-action')
        let traceParams = ele.getAttribute('click-trace-params') || {}

        // 由于绑定的数据通过 JSON.stringfy() 处理成字符串，这里需要转化一下，具体看传递的参数值
        if (typeof traceParams === 'string') {
          traceParams = JSON.parse(traceParams)
        }

        let params = {
          event: traceAction,
          ecommerce: traceParams
        }
        axios.post(url, params)
      }
    },
    false
  )

使用方式如下：

<div
  onClick={handleFullScreen}
  className={classnames(styles['header-icon'], styles['header-unfold'])}
  data-click-trace-action={'click_fullscreen'}
  data-click-trace-params={JSON.stringify({ value: 'fullscreen' })}
 >
 </div>

• 优势：不需要在业务代码中再编写埋点相关的代码，与业务代码进行隔离。

当然，实际项目开发中建议两种都预留，可能存在使用组件库无法区分点击内容的情况，这个时候可以使用手动上报的方式进行上报。