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

一步一个脚印一个坑 8天前 ⋅ 106 阅读
ad

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个人?需不需要继续跟进呢等等,有了这些诉求,我们就必须有个可以查询的地方。、

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

总结

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

关于Webfunny

Webfunny专注于前端监控系统,前端埋点系统的研发。 致力于帮助开发者快速定位问题,帮助企业用数据驱动业务,实现业务数据的快速增长。支持H5/Web/PC前端、微信小程序、支付宝小程序、UniApp和Taro等跨平台框架。实时监控前端网页、前端数据分析、错误统计分析监控和BUG预警,第一时间报警,快速修复BUG!支持私有化部署,Docker容器化部署,可支持千万级PV的日活量!

  点赞 0   收藏 0
  • 一步一个脚印一个坑
    共发布127篇文章 获得4个收藏
全部评论: 0