CN107562811A - 点击热力图生成方法及装置 - Google Patents

Abstract

本申请提出点击热力图生成方法及装置。方法包括：实时检测用户在Web页面上的点击位置，将Web页面地址、用户的点击时间及用户的点击位置作为一条用户点击数据进行记录；当要生成所述Web页面在一时间段内的点击热力图时，从记录的用户点击数据中，获取该时间段内所述Web页面的所有用户点击位置；生成一张大小与所述Web页面完全相同的透明背景图；将所获取的所有用户点击位置绘制在所述透明背景图上；将绘制好的所述透明背景图和所述Web页面进行蒙板叠加，得到所述Web页面在所述时间段内的点击热力图。本申请在Web页面发生更新时，能够快速完成点击热力图切换。

Description

点击热力图生成方法及装置

技术领域

本发明涉及数据可视化技术领域，尤其涉及点击热力图生成方法及装置。

背景技术

在互联网产品的运营中，随着用户的多样性，数据运营起到的作用越来越重要，不同类型的用户对产品内容的消费和对功能的使用都各不相同。用户和产品的交互(如：点击、浏览等)数据中隐含了大量的用户习惯和偏好信息，这些信息对于产品的优化能够起到非常积极的作用。

然而，随着数据量和数据指标的快速增长，数据并不能被简单形象地呈现出来，多数互联网团队选择通过点击热力图来观察用户的点击习惯和偏好，但是由于点击数据量的庞大和Web页面内容的频繁更新，如何快速且高效地更新点击热力图成为难题。

常用的点击热力图绘制算法是把所有点击行为数字化，然后根据坐标点位置和密度，将“点”按一定透明度绘制在背景图即Web页面上，形成点击热力图。

发明内容

本申请提供点击热力图生成方法及装置，以在Web页面发生更新时，实现点击热力图的快速切换。

本发明的技术方案是这样实现的：

一种点击热力图生成方法，该方法包括：

实时检测用户在Web页面上的点击位置，将Web页面地址、用户的点击时间及用户的点击位置作为一条用户点击数据进行记录；

当要生成所述Web页面在一时间段内的点击热力图时，从记录的用户点击数据中，获取该时间段内所述Web页面的所有用户点击位置；

生成一张大小与所述Web页面完全相同的透明背景图；

将所获取的所有用户点击位置绘制在所述透明背景图上；

将绘制好的所述透明背景图和所述Web页面进行蒙板叠加，得到所述Web页面在所述时间段内的点击热力图。

所述将所获取的所有用户点击位置绘制在所述透明背景图上包括：

对于每个用户点击位置，以该用户点击位置为圆心，以预设长度为半径，在所述透明背景图中生成一个圆形点图，其中，该圆形点图上各像素点的颜色值按照距离圆心越远颜色越浅的规则分布。

所述该圆形点图上各像素点的颜色值按照距离圆心越远颜色越浅的规则分布包括：

计算f(p)＝(d_pq/r)×255

其中，q为圆心，即用户点击位置；p为圆形点图上的任一点；r为圆形点图的半径；d_pq为点p到点q的距离。

所述将绘制好的所述透明背景图和所述Web页面进行蒙板叠加包括：

计算f_m(x)＝αf_d(x)+(1-α)f_u(x)

其中，α为透明度系数，0<α<1；x为所述透明背景图和所述Web页面上的任一相同位置，f_d(x)为所述Web页面上位置x处的颜色值，f_u(x)为绘制好的所述透明背景图上位置x处的颜色值，f_m(x)为生成的点击热力图上位置x处的颜色值。

0.3≤α≤0.7。

所述将所获取的所有用户点击位置绘制在所述透明背景图上之后进一步包括：

保存绘制好的所述透明背景图，并记录所述透明背景图对应的Web页面地址和时间段；

所述方法进一步包括：

当所述Web页面发生更新时，根据Web页面地址查找到对应的绘制好的所述透明背景图，将绘制好的所述透明背景图和更新后的Web页面进行蒙板叠加，得到更新后的Web页面在所述时间段内的点击热力图。

一种点击热力图生成装置，该装置包括：

用户点击数据记录模块：实时检测用户在Web页面上的点击位置，将Web页面地址、用户的点击时间及用户的点击位置作为一条用户点击数据进行记录；

透明背景图绘制模块：当要生成所述Web页面在一时间段内的点击热力图时，从用户点击数据记录模块记录的用户点击数据中，获取该时间段内所述Web页面的所有用户点击位置；生成一张大小与所述Web页面完全相同的透明背景图；将所获取的所有用户点击位置绘制在所述透明背景图上；

蒙板叠加模块：将透明背景图绘制模块绘制好的所述透明背景图和所述Web页面进行蒙板叠加，得到所述Web页面在所述时间段内的点击热力图。

所述透明背景图绘制模块将所获取的所有用户点击位置绘制在所述透明背景图上包括：

对于每个用户点击位置，以该用户点击位置为圆心，以预设长度为半径，在所述透明背景图中生成一个圆形点图，其中，该圆形点图上各像素点的颜色值按照距离圆心越远颜色越浅的规则分布。

所述蒙板叠加模块将透明背景图绘制模块绘制好的所述透明背景图和所述Web页面进行蒙板叠加包括：

计算f_m(x)＝αf_d(x)+(1-α)f_u(x)

其中，α为透明度系数，0<α<1；x为所述透明背景图和所述Web页面上的任一相同位置，f_d(x)为所述Web页面上位置x处的颜色值，f_u(x)为绘制好的所述透明背景图上位置x处的颜色值，f_m(x)为生成的点击热力图上位置x处的颜色值。

所述透明背景图绘制模块进一步用于，保存绘制好的所述透明背景图，并记录所述透明背景图对应的Web页面地址和时间段；

所述蒙板叠加模块进一步用于，当所述Web页面发生更新时，根据Web页面地址在透明背景图绘制模块中查找到对应的绘制好的所述透明背景图，将查找到的所述透明背景图和更新后的Web页面进行蒙板叠加，得到更新后的Web页面在所述时间段内的点击热力图。

本申请通过首先单独在透明背景图上绘制用户点击位置，使得用户点击位置的绘制和Web页面解耦，从而在Web页面变化时，无需再重新绘制用户点击位置，实现了点击热力图的快速切换。

附图说明

图1为本申请一实施例提供的点击热力图生成方法流程图；

图2为本申请另一实施例提供的点击热力图生成方法流程图；

图3为本申请实施例生成的单个圆形点图的示意图；

图4为本申请实施例生成的包含了圆形点图的透明背景图的示意图；

图5为本申请实施例提供的点击热力图生成装置的组成示意图。

具体实施方式

下面结合附图及具体实施例对本发明再作进一步详细的说明。

发明人经过分析发现：现有的将用户点击的“点”按一定透明度直接绘制在背景图即Web页面上，形成点击热力图，这样会产生如下缺陷：

一、当Web页面发生更新时，必须重新绘制点击热力图；

二、直接将用户点击的“点”绘制在背景图上，视觉上比较突兀。

图1为本申请一实施例提供的点击热力图生成方法流程图，其具体步骤如下：

步骤101：实时检测用户在Web页面上的点击位置，将Web页面地址、用户的点击时间及用户的点击位置作为一条用户点击数据进行记录。

步骤102：当要生成一Web页面一时间段内的点击热力图时，从记录的用户点击数据中，获取该时间段内该Web页面的所有用户点击位置。

步骤103：生成一张大小与该Web页面完全相同的透明背景图。

步骤104：将所获取的所有用户点击位置绘制在透明背景图上。

步骤105：将绘制好的透明背景图和该Web页面进行蒙板叠加，得到该Web页面的点击热力图。

图2为本申请另一实施例提供的点击热力图生成方法流程图，其具体步骤如下：

步骤201：实时检测用户在Web页面上的点击位置，将Web页面地址、用户的点击时间及用户的点击位置作为一条用户点击数据进行记录。

其中，用户的点击位置可以该点击位置对应的Web页面上的像素点坐标表示。

由于Web用户数量众多，因此，每天记录的用户点击数据量巨大，可以采用分布式大数据平台对用户点击数据进行存储。

在数据平台上存储用户点击数据之前可先对数据进行清洗。

对数据进行清洗指的是，按照预设清洗规则，对数据进行清洗。清洗规则如：若任一条用户点击数据不合乎预先定义的格式，则清洗即删除该条数据。

步骤202：当要生成一Web页面一时间段内的点击热力图时，从记录的用户点击数据中，获取该时间段内该Web页面的所有用户点击位置。

步骤203：生成一张大小与该Web页面完全相同的透明背景图。

步骤204：对于每个用户点击位置，以该用户点击位置为圆心，以预设长度为半径，在透明背景图中生成一个圆形点图，其中，该圆形点图上各像素点的颜色值，按照距离圆心越远颜色越浅(即颜色值越大)的规则分布。

其中，预设长度可根据Web页面的大小进行设定，单位为像素点。

例如：该圆形点图上任一像素点p的颜色值f(p)如下公式进行计算：

f(p)＝(d_pq/r)×255 (1)

其中，q为圆心，r为半径，d_pq为点p到点q的距离。

从式(1)可以看出：f(p)与d_pq成正比，即点p距离点q越远，f(p)的取值越大。即，距离圆心越远的像素点，其颜色越浅。

图3为单个圆形点图的示意图。

步骤205：当针对该时间段内该Web页面的所有用户点击位置都在透明背景图上生成圆形点图时，将绘制好的透明背景图与该Web页面进行蒙板叠加，得到该Web页面在该时间段内的点击热力图。

图4为包含了圆形点图的透明背景图的示意图。

在进行蒙板叠加时，Web页面在下层，包含了圆形点图的透明背景图在上层。

设透明度系数为α，0<α<1，较佳地，本发明中，0.3<α<0.7。

即，对于上、下层图像上某一相同位置x处的某个像素点，设下层图像该点的颜色值为f_d(x)，上层图像该点的颜色值为f_u(x)，则蒙板处理后该点的颜色值f_m(x)为：f_m(x)＝αf_d(x)+(1-α)f_u(x)。

可以看出，若α＝1，则上层图像完全透明，就是完全蒙住上层图像的内容，完整显示下层图像的内容；若α＝0，则上层图像为完全不透明，就是完全显示上层图像的内容；若0<α<1，则是半透明状，下层图像的内容若隐若现。

需要说明的是，在实际应用中，Web页面是频繁更新的，不仅包括内容的更新，也包括版面设计的更新等，在已经针对一Web页面生成了一时间段内的点击热力图时，若该Web页面发生了更新，由于种种原因，存在：希望看到在相同时间段内更新后的Web页面的点击热力图。此时采用本发明，直接将之前采用步骤102～104或者步骤202～204绘制好的包含了用户点击位置的透明背景图与更新后的Web页面进行蒙板叠加即可，即只需进行一次蒙板叠加处理，而无需再进行用户点击位置的绘制过程了。当然，步骤102～104或者步骤202～204后需要保存已经绘制好的包含所有用户点击位置的透明背景图，并记录对应的Web页面地址和时间段信息，以便后续直接使用。

在实际应用中，可针对各Web页面定期生成最新的点击热力图，将生成的点击热力图以邮件的方式推送给相关产品和运营人员；或者，将本发明提供的点击热力图生成方法做成组件加载到数据可视化平台中，进行更加灵活的配置和展示。

本申请的有益技术效果如下：

一、通过首先单独在透明背景图上绘制用户点击位置，使得用户点击位置的绘制和Web页面解耦，从而在Web页面由于版本更新等发生变化时，或者在蒙板叠加使用的透明度发生变化时，无需再重新绘制用户点击位置，直接利用原来的绘制了用户点击位置的透明背景图即可，只需再将该绘制了用户点击位置的透明背景图与Web页面进行一次蒙板叠加处理即可，从而实现了点击热力图的快速切换。

二、通过以用户点击位置为圆心，以预设长度为半径，生成一个由圆心向外颜色渐浅的圆形点图，更加形象生动地反映了用户的点击习惯和偏爱的点击位置，从而使得生成的点击热力图更形象化。

图5为本申请实施例提供的点击热力图生成装置的组成示意图，其主要包括：用户点击数据记录模块51、透明背景图绘制模块52和蒙板叠加模块53，其中：

用户点击数据记录模块51：实时检测用户在Web页面上的点击位置，将Web页面地址、用户的点击时间及用户的点击位置作为一条用户点击数据进行记录。

透明背景图绘制模块52：当要生成一Web页面在一时间段内的点击热力图时，从用户点击数据记录模块51记录的用户点击数据中，获取该时间段内该Web页面的所有用户点击位置；生成一张大小与该Web页面完全相同的透明背景图；将所获取的所有用户点击位置绘制在该透明背景图上。

蒙板叠加模块53：将透明背景图绘制模块52绘制好的透明背景图和对应的Web页面进行蒙板叠加，得到该Web页面在对应时间段内的点击热力图。

在实际应用中，透明背景图绘制模块52将所获取的所有用户点击位置绘制在该透明背景图上包括：

对于每个用户点击位置，以该用户点击位置为圆心，以预设长度为半径，在该透明背景图中生成一个圆形点图，其中，该圆形点图上各像素点的颜色值按照距离圆心越远颜色越浅的规则分布。

在实际应用中，蒙板叠加模块53将透明背景图绘制模块52绘制好的透明背景图和对应的Web页面进行蒙板叠加包括：

计算f_m(x)＝αf_d(x)+(1-α)f_u(x)

其中，α为透明度系数，0<α<1；x为透明背景图和Web页面上的任一相同位置，f_d(x)为Web页面上位置x处的颜色值，f_u(x)为绘制好的透明背景图上位置x处的颜色值，f_m(x)为生成的点击热力图上位置x处的颜色值。

在实际应用中，透明背景图绘制模块52进一步用于，保存绘制好的透明背景图，并记录透明背景图对应的Web页面地址和时间段；

蒙板叠加模块53进一步用于，当Web页面发生更新时，根据Web页面地址在透明背景图绘制模块52中查找到对应的绘制好的透明背景图和对应的时间段，将查找到的透明背景图和更新后的Web页面进行蒙板叠加，得到更新后的Web页面在对应时间段内的点击热力图。

以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明保护的范围之内。

Claims (10)

1.一种点击热力图生成方法，其特征在于，该方法包括：

实时检测用户在Web页面上的点击位置，将Web页面地址、用户的点击时间及用户的点击位置作为一条用户点击数据进行记录；

当要生成所述Web页面在一时间段内的点击热力图时，从记录的用户点击数据中，获取该时间段内所述Web页面的所有用户点击位置；

生成一张大小与所述Web页面完全相同的透明背景图；

将所获取的所有用户点击位置绘制在所述透明背景图上；

将绘制好的所述透明背景图和所述Web页面进行蒙板叠加，得到所述Web页面在所述时间段内的点击热力图。

2.根据权利要求1所述的方法，其特征在于，所述将所获取的所有用户点击位置绘制在所述透明背景图上包括：

对于每个用户点击位置，以该用户点击位置为圆心，以预设长度为半径，在所述透明背景图中生成一个圆形点图，其中，该圆形点图上各像素点的颜色值按照距离圆心越远颜色越浅的规则分布。

3.根据权利要求2所述的方法，其特征在于，所述该圆形点图上各像素点的颜色值按照距离圆心越远颜色越浅的规则分布包括：

计算f(p)＝(d_pq/r)×255

其中，q为圆心，即用户点击位置；p为圆形点图上的任一点；r为圆形点图的半径；d_pq为点p到点q的距离。

4.根据权利要求1所述的方法，其特征在于，所述将绘制好的所述透明背景图和所述Web页面进行蒙板叠加包括：

计算f_m(x)＝αf_d(x)+(1-α)f_u(x)

其中，α为透明度系数，0<α<1；x为所述透明背景图和所述Web页面上的任一相同位置，f_d(x)为所述Web页面上位置x处的颜色值，f_u(x)为绘制好的所述透明背景图上位置x处的颜色值，f_m(x)为生成的点击热力图上位置x处的颜色值。

5.根据权利要求4所述的方法，其特征在于，0.3≤α≤0.7。

6.根据权利要求1至5任一所述的方法，其特征在于，所述将所获取的所有用户点击位置绘制在所述透明背景图上之后进一步包括：

保存绘制好的所述透明背景图，并记录所述透明背景图对应的Web页面地址和时间段；

所述方法进一步包括：

当所述Web页面发生更新时，根据Web页面地址查找到对应的绘制好的所述透明背景图，将绘制好的所述透明背景图和更新后的Web页面进行蒙板叠加，得到更新后的Web页面在所述时间段内的点击热力图。

7.一种点击热力图生成装置，其特征在于，该装置包括：

用户点击数据记录模块：实时检测用户在Web页面上的点击位置，将Web页面地址、用户的点击时间及用户的点击位置作为一条用户点击数据进行记录；

透明背景图绘制模块：当要生成所述Web页面在一时间段内的点击热力图时，从用户点击数据记录模块记录的用户点击数据中，获取该时间段内所述Web页面的所有用户点击位置；生成一张大小与所述Web页面完全相同的透明背景图；将所获取的所有用户点击位置绘制在所述透明背景图上；

蒙板叠加模块：将透明背景图绘制模块绘制好的所述透明背景图和所述Web页面进行蒙板叠加，得到所述Web页面在所述时间段内的点击热力图。

8.根据权利要求7所述的装置，其特征在于，所述透明背景图绘制模块将所获取的所有用户点击位置绘制在所述透明背景图上包括：

对于每个用户点击位置，以该用户点击位置为圆心，以预设长度为半径，在所述透明背景图中生成一个圆形点图，其中，该圆形点图上各像素点的颜色值按照距离圆心越远颜色越浅的规则分布。

9.根据权利要求7所述的装置，其特征在于，所述蒙板叠加模块将透明背景图绘制模块绘制好的所述透明背景图和所述Web页面进行蒙板叠加包括：

计算f_m(x)＝αf_d(x)+(1-α)f_u(x)

其中，α为透明度系数，0<α<1；x为所述透明背景图和所述Web页面上的任一相同位置，f_d(x)为所述Web页面上位置x处的颜色值，f_u(x)为绘制好的所述透明背景图上位置x处的颜色值，f_m(x)为生成的点击热力图上位置x处的颜色值。

10.根据权利要求7所述的装置，其特征在于，所述透明背景图绘制模块进一步用于，保存绘制好的所述透明背景图，并记录所述透明背景图对应的Web页面地址和时间段；

所述蒙板叠加模块进一步用于，当所述Web页面发生更新时，根据Web页面地址在透明背景图绘制模块中查找到对应的绘制好的所述透明背景图，将查找到的所述透明背景图和更新后的Web页面进行蒙板叠加，得到更新后的Web页面在所述时间段内的点击热力图。