网站网页分析工具之热点图专题

添加时间: 2013-04-02    点击:0

(一)何为热点图?

    热点图是通过使用不同的标志将图或页面上的区域按照受关注程度的不同加以标注并呈现的一种分析手段,标注的手段一般采用颜色的深浅、点的疏密以及呈现比重的形式,不管使用哪种方式最终得到的效果是一样的,那就是以前枯燥的数据变得如此清晰明了,眼前豁然开朗。

 

    目前热点图有三种主要的实现形式:

 

    1、点击热点图(clickmap):基于鼠标的点击行为采集、分析、呈现。

    2、页面兴趣热点图(clickareamap):基于鼠标的点击行为采集、分析、呈现,通过html的层次结构展现数据。

    3、注意力热点图(Attation heatmap):不需要采集分析鼠标行为数据,而是使用综合多种神经学相关的算法来对人的视觉注意力进行模拟而生成以吸引注意力程度不同的热点图,风鬼(Feng-Gui)在这方面已有多年的经验积累,相当不错。

 

    下面分别予以介绍。

 

(二)点击热点图

 

    点击热点图的生成过程我们可以简单划分成三个部分:

 

    第一:鼠标点击数据采集与上传

 

       第一部分的实现需要在企业网站的产品展示页面埋设相应javascript代码,代码核心思想是利用鼠标点击时会触发onMouseDown事件,然后在事件中添加脚本捕捉鼠标点击的具体位置坐标、相应链接以及屏幕分辨率等相关数据,然后通过httpRequest对象将数据发送到访客鼠标点击数据采集服务器保存,数据采集服务器会将数据以某种固定格式保存,方便数据分析服务器提取和分析这些数据。

 

    第二:数据的分析建模生成点击热点图

 

       第二部分是主要部分,当网站决策者需要查看某页面的热点图时,触发系统向鼠标点击数据分析服务器发出生成热点图请 求,分析服务器通过在获得相应的访客鼠标点击数据后进行汇总分析,形成该请求页面的点击数据集,在数据集基础上进行图形建模,最终形成产品关注度热点图, 主要的步骤解释如下:

 

    Ø  解析鼠标点击数据记录:我们在采集鼠标点击数据时会按照一种固定的预先定义好的格式进行记录,那么解析的过程遵守同样的规则进行解析,最终还原各数据项,为建模做准备

 

    Ø  还原鼠标点击位置:首先生成空白热点图,然后在获得的点击数据基础上进行点击位置等数据还原

 

    Ø  点击数据集建模:使用预先设计好的单位点击效果图来标识每个点击行为,直到完成整个点击数据集的建模

 

    Ø  生 成热点图:将已经完成的点击数据建模图进行格式转换,转换后的图形将根据点击的密集程度分成不同的颜色区域,点击越密集的地方颜色将越鲜艳,相反点击稀疏 的地方颜色相应的要淡一些,最后转换后的图片需要进行透明化的处理,这个主要为为了后续展现过程服务,我们最终是希望将这个生成的热点图直接置于产品展示 位置之上,透明的效果可以非常清楚的看到背后对应的产品信息。

 

    第三:热点图的呈现

 

       第三部分主要解决如何将服务器端生成的点击热点图展示给网站决策者,这个过程是比较简单的,可以结合新建层以及图片透明化处理等手段来完成,这一步好了我们就可以得到大致效果图,如下:

热点图

 

热点图

 

    当然上图是使用颜色的深浅来表示受关注的强弱,也可以使用点的密集程度以及百分比来进行标注,这方面crazy egg做的非常不错,大家可以去感受下。

 

(二)页面感兴趣热点图

 

 

 

 

(三)注意力热点图

 

    注意力热点图是通过模拟人类看见物体前几秒的视觉效果,同时使用一种预测一个真人最可能查看物体的方式的算法生成热点图,这个算法综合了几种神经科学研究理论,包括特征整合理论、显著性研究、视觉注意理论,眼动追踪, 人类感知和认知。使用注意力热点图,设计师、广告主、创作者可以通过分析图像吸引注意力的强弱来对这幅图像的效果进行预先测试,当然也可以用于跟踪注意力转移路线。视觉热点图一般由以下因素组成:

 

    Ø  热区:最感兴趣的区域

 

    Ø  热点排序:下一个感兴趣的点以及何时兴趣转移到其上(毫秒级)

 

    Ø  视觉串联:眼睛在热点间运动情况

 

    Ø  被忽略的区域

视觉图

    视觉关注度热点图不仅可以对图片进行热点和关注度分析,还可以对视频进行分析,这个是点击热点图无法做到的,但对于分析的准确性点击热点图的准确性要高于视觉关注度热点

 

 

    关于热点图的几个问题:

    1、谁需要这个工具?

    答:一般网站的UE、网站的运营人员

    2、什么时候用到热点图?

    答:适用在页面前后改动的比较中

     3、国内有哪些热图工具?

    答:百度热图http://yingxiao.baidu.com/support/topic/32.html

    答:phpstat热点图 http://www.phpstat.net/news/fangke-xihao-yimuliaoran-phpstat-tongji-re-litu-redian-tu-quyu-dianji-tuxing-hua-zhanxian-xingwei.html

推荐内容1
推荐内容
推荐内容
推荐内容