用户行为分析系列（四）- 热力图

热力图的实现方式有两种，一种是把页面上所有点击的地方都给画出来，画图的方式是在页面最上层蒙上一层mask，根据点击的坐标位置在canvas上画出热力图，由于页面被canvas盖住了，所以这种方式的页面是不可交互的。如果使用这种方式，在采集事件时需要采集屏幕的宽、高，点击的x、y的坐标等信息。

另外一种实现方式是画出被点击的元素的热力图，意思是只采集特定元素的点击事件，并且画图的时候不是采用canvas的方式，而是在被点击元素的伪元素：before上给予一个背景色，这样实现的好处是不影响元素本身的交互。我们选择了第二种，这种方式实验很简单，流程如下图：

我们会在iframe里面显示你的网页，初次加载时会在url后面加上一个标志，由于你的网页里已经接入了我们的SDK，所以SDK会识别url上面的标志，展示当前页面的热力图。但是有2个问题：

• 当我点击网页内的超链接时，会跳到另外一个页面，这时候url上面是不带标志的，这个时候我们的解决方式是在初次加载时把标志保存到sessionStorage中，当进入新页面时查看sessionStorage中是否有这个标志，如果有则渲染热力图。但是由于sessionStorage只在当前窗口中有效，所以你的超链接是打开新的tab，还是需要在条件中重新设置url。
• 由于某些网站的安全性设置，不能在我们的iframe中登录或者访问，需要提供一个打开原网页的功能。意思是【原网页】这个按钮是个超链接，href指向你的网页地址，只是在url后面增加了一个热力图的标志。后面的流程就与在iframe中显示的流程一样了。
• 前面所提到的功能都是通过url的精准匹配查询数据的。还有一种需求场景是我所有的商品详情页的页面结构都是一样的，我并不想看具体某一个商品详情页的热力图，我想看的是所有商品详情页或者某一类商品详情页的热力图情况。我们的解决方案是：提供一个网页组的功能，其原理就是对url进行模糊匹配和条件筛选，通过筛选出的这些url查出所有的数据，然后以某一个商品详情页为模板画出热力图。因为这些详情页的结构几乎是一样的，像【加入购物车】这类的按钮的路径path也是相同的，所以这些页面的【加入购物车】的点击数据都会画到模板页的【加入购物车】这个按钮上。