前端埋点系统之如何实现网页热力占比图（二）

Hello，大家好。上次我们介绍了，如何利用heatmap.js来画网页热力图，今天我们要介绍一下热力图的另一种展示形式 - 热力占比图。

可能大家还不太理解热力占比图是什么，我把两种效果都列出来，给大家对比看一下；想看实际效果的同学可以来看看我们的Demo效果，Webfunny前端埋点系统DEMO

1. 网页热力图，通过heatmap.js库把热力值画出来的效果，看起来比较直观。

2. 热力占比图，把用户点击的元素位置和具体人数以百分比的形式展示出来，看起来比较具体。

接下来我就来讲讲如何实现这个效果。

一、采集网页热力数据

采集热力数据的方式跟上边热力图的方式是一样的，通过鼠标点击位置（x坐标，y坐标），来锁定页面坐标，计算热力值；采集代码如下：

/**
 * 启动点击事件监听
 */
export function startClickRecord() {
  window.addEventListener('click',function(e){
    console.log('触发点击事件！', e)
    if (!e) return

    /** 检查定时器是否开启 */
    if (store.timerStatus === 'off') {
      console.log('定时器已结束，触发鼠标点击，则重新开启')
      store.timerStatus = 'on';
      startGlobalTimer()
    }

    try {
      const scrollWidth = (document.body ? document.body.scrollWidth : 0) || window.innerWidth
      const weTitle = document.title
      const wePath = Utils.b64Code(Utils.getPath())
      const weFullPath = Utils.b64Code(Utils.getPath('full'))
      const weScrollWidth = scrollWidth - scrollWidth % 20
      const weScrollHeigh = (document.body ? document.body.scrollHeight : 0) || window.innerHeight
      const weXPath = Utils.getXPath(e)
      const wePageX = e.pageX
      const wePageY = e.pageY
      // const weScrollX = window.scrollX
      // const weScrollY = window.scrollY
      const weRatio = parseInt(window.devicePixelRatio)

      // 上报点击数据
      const data = {weTitle, wePath, weScrollWidth, weScrollHeigh, weXPath, weFullPath, wePageX, wePageY, weRatio}
      webfunnyGlobal.webfunnyEvent('Webfunny-Replace-HeatMapClickPointId').trackEvent(data);
    } catch(e) {
      console.error('click error', e)
    }
    
  }, true);
}

 

二、获取网页热力值，并生成tip浮框

获取热力值后，在页面上查找对应元素，并在该元素上生成一个小小的浮框，展示点击百分比。当你把鼠标移动到浮框上时，也会展示该热力值的详细数据，包括点击次数，点击人数，点击比例以及总次数和总人数等；

创建代码如下：

const createHeatDataTip = (param) => {
  const {xPath, percentage, count, userCount, totalCount, totalUserCount, webfunnyStartTime, webfunnyEndTime} = param
  let color1 = ''
  let color2 = ''
  if (percentage >= 50) {
    color1 = '#FFA166'
    color2 = '#FF8639'
  } else if (percentage >= 10) {
    color1 = '#7A79FF'
    color2 = '#6D6CE5'
  } else if (percentage >= 0) {
    color1 = '#28C989'
    color2 = '#24B27A'
  }
  const bgColor = ` background: linear-gradient(180deg, ${color1} 0%, ${color2} 116.67%); filter: drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.20));`
  // 创建浮框元素
  const tooltip = document.createElement('div');
  const ele = getEleByXpath(xPath)
  if (!(ele && ele !== null)) {
    return
  }
  const { x, y, width } = ele.getBoundingClientRect()
  const letValue = x + width / 2 - 25
  const topValue = y - 10
  tooltip.className = 'webfunny-tip';
  tooltip.style = `top: ${topValue}px; left: ${letValue}px; ${bgColor}`;
  tooltip.textContent = percentage + '%'

  // 下三角
  const triangle = document.createElement('div');
  triangle.className = 'webfunny-triangle';
  triangle.style = ` border-top: 5px solid ${color2}; `;
  tooltip.appendChild(triangle)

  const tempXpath = utils.b64Code(xPath)
  const clickPointId = utils.getWfCookie("wf_click_pointId")
  const jumpUrl = `//${utils.getWfCookie("wf_fe_domain")}/wf_event/eventSearch.html?projectId=${PROJECT_ID}&pointId=${clickPointId}&xPath=${tempXpath}&startDate=${webfunnyStartTime}&endDate=${webfunnyEndTime}`
  
  // 详细信息
  const info = document.createElement('div');
  info.className = 'webfunny-info';
  info.innerHTML = `
  <label>点击次数：${count}次</label><br>
  <label>点击人数：${userCount}人</label><br>
  <label>点击比例：${percentage}%</label><br>
  <label>总数：${totalCount}次、${totalUserCount}人</label><br>
  <label><a target="_blank" href="${jumpUrl}" style="color: #fff;">查看详情</a></label>
  `
  tooltip.appendChild(info)

  document.body.appendChild(tooltip);
}

三、查看热力数据详情

对于分析师而言，除了观察热力占比结果，很多时候还需要查看详情数据。比如：有100个人点击了购买按钮，具体是哪100个人？需不需要继续跟进呢等等，有了这些诉求，我们就必须有个可以查询的地方。、

通过锁定筛选条件，就可以准确的找到所有点击过这个按钮的人，进行进一步的处理。

总结

热力占比图同样也是埋点热力图的一种重要呈现形式，它的数据更加具体，同时也可以查找到对应每条记录，可以帮助业务做更深入的分析。