1.3.3.6 热图分析

点击热图通过可视化方式展示页面不同操作的的使用数据，方便你对数据进行分析。常用以对如下场景进行分析：

1. 页面交互设计优化：分析用户对不同元素的关注度差别，将重要的功能点放到显眼位置
2. 网站运营效果分析：分析图片或者页面元素对用户的吸引程度以及交互流程是否流畅
3. 渠道落地页分析：分析落地页的图片或者CTA按钮是否足够吸引人

备注：

1. 热图目前支持两种类型：
   1. 交互热图：基于页面元素，用以分析不同前端控件的触发次数以及趋势
   2. 点击热图：结合页面元素与位置，用以分析页面不同区域的受关注度差异。
2. 请确保升级到最新版JS SDK，并且手动开启热力图功能；
   1. 交互热图自动采集，其他自定义页面元素请使用自定义接口
   2. 点击热图默认关闭，开启之后所有页面元素将会自动采集
3. 目前热力图暂时支持网页热图，暂不支持客户端以及小程序。

1.1. 基本概念

1. 热图：根据数据大小的不同，在不同区域绘制相应的颜色来进行数据区分的一种可视化数据图形； Hubble网页热图默认仅采集可交互元素(a,input,button)，无效点击将会忽略
2. 原网页：通俗理解为一个完整URL对应的页面；请输入完整的URL信息(包括https://)，建议直接拷贝网页的URL，如果是官网首页请检查URL后边是否有“/"
3. 网页组：将一组页面结构相同的网页合并到一起（计算数据的时候会按照整体计算）；
4. UV：访问这个网页的用户数，不同日期数据去重；
5. PV：网页或者页面组的访问量；
6. 点击次数：某一个按钮或者页面元素的触发次数；
7. 点击用户数：某一个按钮或者页面元素的触发用户数；
8. 点击率：点击次数/PV*100%

1.2. 功能说明

1.2.1. 交互热图示例

1. 通过热区颜色深浅显示不同元素相对点击率对比
2. 通过数字显示某一元素该段时间绝对点击数据（鼠标移上去显示趋势）
3. 网易支持交互，点击之后将会跳转到到下一页面。

1.2.2. 点击热图示例

1. 结合元素以及位置，显示不同内容的点击数据对比
2. 不支持数值显示，不支持交互

1.2.3. 原网页模式

1. 选择你关注的热图，你可以选择原网页，并通过输入URL查看网页的数据(推荐打开网页直接复制原网页的URL地址）;
2. 主要操作区，在操作区你可以实现对网页的进一步细化：
   1. 选择事件条件，你可以筛选热图网页的浏览器，站外来源，省份，城市等等；
   2. 选择用户条件，你可以筛选预定义好的用户与用户分群条件，从而实现对点击热图的进一步细分；
3. 网页热图的主要控制区，在这个区域你可以选择：
   1. 选择你希望分析的日期范围；
   2. 选择你想要显示的平台（仅作展示用，并非数据的筛选）；
   3. 点击原网页打开，你可以选择在自己的网站上展示相关的热图数据，从而带来更加直观的数据效果。
4. 数据主展示区，也即主要热图视图区的控制工具条
   1. 热图类型选择：点击热图+交互热图
   2. 热图热力色标识区域，颜色从左往右代表点击量的增加；
   3. 热图数值显示区域：总点击数，PV，UV

1.2.4. 网页组模式

当你相对一组相同功能的页面（社区页面，详情页页面），或者具有相同结构的页面进行分析时，你可以选择网易组模式。

1. 输入URL或者选择已经预定义好的网页组；
2. 你可以选择新建，编辑以及删除网页组；操作如图：
   1. 编辑网页组的名称；
   2. 选择网页热图的模板（请确保这个页面跟所选择的页面保持相同的页面结构）； 模板仅用以绘制网页热图，数据来源于第三步中所选择网页
   3. 选择网页组满足的条件，你可以通过URL或者页面路劲来选择你关注的网页；

1.3. FAQ

当天埋点之后，是不是第二天才可以查看数据？

不是，Hubble可以对当天的埋点数据进行分析。一般数据在上报20分钟左右，可以在分析功能上看到。

为什么输入URL之后看不到热图数据？

遇到这种情况，请按以下步骤JS使用姿势：

1. JS SDK是否开启全埋点，Hubble SDK默认关闭全埋点；
2. 请检查网页URL是否输入正确，建议打开浏览器直接复制网页地址；特别关注URl中是否有"/"等特殊字符

为什么我关注的某一个重要区块没有点击？

1. 请检查是否开启自定义元素或者其他元素数据采集，Hubble默认只采集，自定义控件以及跳转的超链接请调用相关的接口。

2. 如果用户点击当前按钮时，页面发生跳转（超链接），此时数据将会丢失。我们SDK提供相应方法来进行分析

js //一般这种情况如下方式解决 $('#sidebar-left').on('click', 'a', function(e) { e.preventDefault(); var title = $(this).find('.autocut').text(); var hasCalled = false; var href = $(this).attr('href'); function track_callback() { if(!hasCalled) { hasCalled = true; location.href = href; } } //如果没有回调成功，设置超时回调 setTimeout(track_callback, 500); DATracker.track(title, {}, track_callback); }); 
我们就封装了这个方法，方便使用 js //使用 DATracker.track_links('a.two','testLink', {ff:'sss'})