点击热力图:查看访客实际点击网页的位置
页面浏览量告诉您有多少人访问了一个页面。点击热力图则告诉您他们进来后做了什么。这种差异对于理解您的页面布局是否有效、CTA 是否引起注意或访客是否在点击非链接元素等问题至关重要。
本指南解释什么是点击热力图、要寻找什么样的模式,以及如何在 statpx 中使用热力图数据对您的页面进行具体改进。
什么是点击热力图?
点击热力图是访客在网页上点击位置的可视化表现,表现为色彩梯度叠加层。 每条记录的点击都会增加一个区域的强度。点击量大的区域显示为暖色——橙色和红色——而点击量少或没有点击的区域则显示为冷色蓝和绿。零点击的区域保持透明。
结果是访客注意力的即时视觉总结。不用阅读行行事件数据,您可以一目了然地看到模式:您的英雄按钮上的红色热点表示它正在获得持续的互动;页脚的冷蓝色表示访客很少滚动到那里或与那里的内容互动。
点击热力图不同于鼠标移动热力图,后者追踪光标位置而不是实际点击。点击热力图更具可操作性——点击总是有意的,而光标移动可能是被动的或意外的。
热力图数据揭示了什么
热力图可以揭示在表格分析数据中几乎不可能发现的模式。以下是最常见的发现:
页面折叠线以上的主导地位
在大多数页面上,顶部部分(不滚动就能看到)获得了不成比例的点击份额。如果您最重要的 CTA 埋在长介绍部分下方,热力图会确认:顶部附近有一个温暖的集群,您的 CTA 周围有一个寒冷的区域。这是最常见的发现之一,也是最容易修复的——将 CTA 向上移动。
没人点击的导航项目
如果您的顶部导航有五个项目,但热力图只显示两个获得任何点击,这是一个信号。您可能正在用访客不关心的项目使导航混乱,这会减少真正重要的项目获得的注意力。考虑简化导航或按实际使用情况重新排序项目。
在非交互元素上的点击
最令人惊讶和最可行的发现是当访客在文本、图像或不是链接的图形元素上点击时。这告诉您访客期望这些元素是可点击的——他们试图导航到某个地方或获取更多信息。使这些元素成为链接(或添加工具提示)可以立即改善体验。
被忽视的 CTA
如果您的主要号召性用语按钮在热力图上只显示为淡蓝色,这意味着访客登陆页面、阅读它,然后离开而不与您最想让他们点击的内容互动。问题可能是位置、按钮颜色、文案,或仅仅是周围的内容不足以驱动行动。
如何在 statpx 中启用热力图
热力图记录是可选的,并在 statpx 追踪脚本加载前添加一行 JavaScript 来激活:
启用后,页面上的每次点击都会被记录及其坐标,按页面布局尺寸标准化。点击与当前路径相关联,因此如果您的网站有许多 URL,每个路径都会获得自己的热力图。
要查看特定页面的热力图,在您的 statpx 控制台中导航到 heatmap.php 并使用顶部的路径选择器。选择器显示您点击量最高的 20 个路径,按页面浏览量排序。选择一个路径并选择您的日期范围来加载点击叠加层。
阅读热力图控制板
路径选择器和日期范围标签
热力图视图顶部的路径选择器列出您最常访问的 20 个页面。选择您想分析的路径,然后选择日期范围:今天、7天、30天或90天。更宽的范围会聚合更多点击并产生更清晰、更代表性的热力图。较窄的范围(今天、7天)在您刚刚进行了页面布局更改并想看新版本如何运行时很有用。
点击计数和密度
热力图下方,摘要显示选定路径和范围的总点击计数。高密度区域在您悬停时显示精确点击计数,因此您可以看到不仅一个区域很热,而且准确有多少访客点击了那里。这在重新设计后比较页面的两个版本时很有帮助——您可以量化更改,而不仅仅是用眼睛估计。
热力图与滚动深度:一起使用两者
热力图和滚动深度追踪回答不同但互补的问题。热力图显示访客点击的位置——页面上接收互动的特定元素。滚动深度显示访客读得多深——他们在离开前实际看到页面的百分之几。
一起使用两者可以获得更完整的图景。如果滚动深度数据显示 70% 的访客到达您的中页部分,但热力图显示该部分的点击几乎没有,您知道访客正在阅读内容,但没有发现它足够令人信服来采取行动。反过来,如果滚动深度很低,但热力图热点仅出现在顶部附近,访客可能快速找到了他们需要的东西——或在看到您的信息前离开了。
这种组合对长篇幅登陆页面和博客文章特别强大,您想同时了解阅读行为和点击行为。将热力图分析与自定义事件追踪配对,用于最重要的互动,您将获得每个页面如何运行的完整图景。
核心要点
点击热力图将抽象的流量数字转变为真实访客行为的视觉地图。它们揭示了在页面浏览量数据中看不到的问题——CTA 被忽视、非链接被点击、没人使用的导航项目——并以立即可行的方式做到这一点。您看到问题,您理解要修复什么,您可以通过比较修改前后的热力图来衡量修复是否有效。今天在 statpx 中启用热力图记录,给它一周时间在您最高流量的页面上积累数据,看看您的访客在登陆您的网站时实际在做什么。