网站点击热图（Heat Map）

网站分析通过统计点击流数据及网站产生的其他各类数据，提供各种数据报表来监控网站的运营状态，为网站的优化和改进提供参考依据。但网站分析能提供的绝不仅有数据，其中点击热图（Heat Map）是对网站分析的一个很好的扩充，目前网上介绍点击热图的文章也比较多，很多网站交互设计师用点击热图来评估用户与网站之间的交互状况从而改善用户体验。这里简单介绍几个点击热图的实现工具以及用我的博客做的点击热图的实验。

几款点击热图工具

Sidney的博客中很早以前就介绍过一款点击热图的分析工具——Crazy Egg，文章是由Tenly写的。另外网上介绍比较多的点击热图工具还有ClickTable和tealeaf，这些工具都是通过JS来实现的，只要在相应的页面上嵌入JS代码，就能在这些工具的网站上查看该页面的点击效果图，实现机制跟Google Analytics较为类似。这些工具一般都需要收费，但会有1个月的免费试用期，有兴趣的可以去试试。

另外有一款开源的工具——ClickHeat，可以下载它的源代码部署到自己的服务器上，并在网站页面中嵌入相应的JS代码来生成点击热图，然后通过调用相应的页面查看。要部署ClickHeat，服务器需要支持PHP，同时因为点击的日志和所有统计结果都保存到了部署的服务器上，所以对服务器的空间和资源占用都比较高。

点击热图应用实例

前段时间用我的博客做了下网站点击热图的试用实验，我用的是Click Density，跟ClickTable和Crazy Egg类似，也是通过嵌入JS的方法来实现的，在结果的输出页面可以选择点击的时间段、浏览器类型等条件对结果进行筛选，下面的生成的几张点击效果图：

Heat Map

因为我的博客访问量不大，所以热图的分布不是很明显，但还是能看出主要的点击集中在博客最新的文章上面；另外右侧的搜索、订阅和分类目录模块也占据了一定的点击比例。一般网站的点击都会聚集在全局导航栏的下面那一块，并且呈“F”型分布，在需要下拉的页面部分点击一般就会剧减（对于需要下拉查看的内容，除非用户找到了他们需要的信息，否则一般不会过多地进行点击）。

Click Map

这张是点击分布图，红叉代表无效的点击，绿叉代表有效点击。这个图似乎比上面单纯的显示点击分布或点击密度更有价值，因为它显示了页面的有效点击，从图上可以看出用户在浏览我的博客时除了点击文章标题和搜索框外，订阅按钮上面也分布了大量的有效点击数，这个对于博客来说至关重要，因为博客类网站的一个重要目标就是产生订阅，所以通过这个图可以查看有多少有效点击转化成了网站目标，占总的点击比例及占总的有效点击的比例。

另外可以看到图上的某些有效点击并非一定落在可点击的对象上，正是因为博客内容更新时导致页面元素（标题位置、内容摘要行数等）的偏移，而生成的点击不会跟随页面元素移动，导致了生成图片显示上的误差。

Hover Map

这个图其实相当与网页覆盖图（Overlay）或点击密度图（Click density），Google Analytics上面也提供了类似的功能。网页上可点击的位置会由虚线框圈起来，鼠标放到某个框上面就会显示该模块被点击的次数及点击转化率（CTR）；另外如果你为你的网站设定了目标，那么同时也会显示点击该模块的目标转化率，对于分析网站的重要页面是个不错的选择。

点击热图的价值及缺陷

点击热图的价值

1、通过点击热图发现用户经常点击的模块或聚焦的内容；

2、观察页面中的哪些模块具有较高的有效点击数，用户会尝试去点击哪些模块；

3、应用于A/B测试，比较不同页面的点击分布情况；

4、用于改进网站交互和用户体验。

点击热图的缺陷

1、网站点击热图虽然提供了一种很直观的网站分析途径，但其功能还需完善，因为实现机制一般都是根据页面的坐标来定位点击位置，所以不同的分辨率和网站布局方式（居中等）都会导致结果的不准确；

2、在使用点击热图时需要记录用户每次点击的行为，所以会对网页的性能产生影响，导致网页的加载速度变慢；

3、当页面各元素的位置发生大范围变动时，点击热图的结果就失效了。

网站点击热图（Heat Map）相关推荐

热图(Heat Map)的绘制
热图是无监督聚类的一种第一行:标签无监督聚类的结果状态.绿色为一类,白色另一类第二行: 真实分类状态(金标准).绿色下的灰色为分类正确的,黑色为分类错误的.白色下的黑色为分类正确的,灰色为分类错 ...
跟着iMeta学做图｜ComplexHeatmap包绘制热图展示不同样本物种相对丰度
本教程相关代码已经上传至 https://github.com/iMetaScience/iMetaPlot/tree/main/221125HeatmapOfAbundance 如果你使用本代码,请 ...
matlab和r语言做热图,案例演示 | R语言绘制热图代码
本文是个人笔记,请谨慎付费[星球用户可免费看]. 我们在分析了差异表达数据之后,经常要进行热图的可视化展示. 热图(Heat map)是一个以颜色变化来显示数据的矩阵.虽然"热图" ...
power bi 创建空表_使用Power BI创建足球热图
power bi 创建空表 When I watched the 2018 FIFA World Cup Russia match, at the end of the match I saw a v ...
input onclick点击button无反应_热图分析：精确洞察用户点击偏好
导读易观方舟V4.4版本上线,值得一提的是,在上一版本中新增上线的"热图分析"功能,再一次升级,新增元素点击图(Web.APP). 目前,易观方舟热图分析模型,支持分析 Web/ ...
245热图展示微生物组的物种和功能丰度或有无、距离矩阵
245热图展示微生物组的物种和功能丰度或有无本节作者:吴一磊中科院微生物所版本1.0.7,更新日期:2020年8月13日本项目永久地址:https://github.com/YongxinLi ...
R语言绘制heatmap热图
From:http://bbsunchen.iteye.com/blog/1271580 介绍如何使用 R 绘制 heatmap 的文章. 今天无意间在Flowingdata看到一篇关于如何使用 R ...
【R】绘制热图 heatmap
最近发现pheatmap画热图挺好看的,有机会也使用一下~~~ http://www.bjt.name/tag/heatmap/ R 绘制 heatmap NBA联盟50位顶级球员的指标表现介绍如何 ...
网站点击流数据分析系统揭晓
网站点击流数据分析项目业务背景 1.1 什么是点击流数据 1.1.1 WEB访问日志即指用户访问网站时的所有访问.浏览.点击行为数据.比如点击了哪一个链接,在哪个网页停留时间最多,采用了哪个搜索项. ...

网站点击热图（Heat Map）

网站点击热图（Heat Map）相关推荐

最新文章

热门文章