用于热力图成像的方法、装置、电子设备及可读介质与流程

本发明涉及大数据分析处理领域，具体而言，涉及一种用于热力图成像的方法、装置、电子设备及可读介质。

背景技术

热力图是以特殊高亮的形式显示访客热衷的页面区域和访客所在的地理区域的图示。通过热力图可以直观清楚地看到页面上每一个区域的访客兴趣焦点，无须报告数据分析，图形化展现，无需任何页面分析经验。根据热力图的显示数据，可以为优化和调整网页设计提供科学依据，还可以动态考量页面调整前后的点击效果。可例如，在点击行为集中和访客多的页面地方可以多放广告，点击率会更高，效果更为突出；通过链接点击图了解同一栏目下不同文字链接被点击的次数，判断该链接标题和内容的受欢迎程度，以优化排版。

但是由于访问终端的多样性，尤其是手机端，为了适配各种类型分辨率屏幕，大多页面在开发时使用响应式去设计，也就是会根据屏幕大小自适应宽高。由于自适应宽高后，页面内各元素块位置宽高会发生变化，所以根据用户点击数据绘制热力图时，会出现不统一或偏移的情况，或者只能按不同分辨率去分开看热图，不能统一还原出页面实际热力图。而且，如果页面中存在ajax加载部分，或是点击、滚动加载展开内容，网页整体高度会发现巨大变化，所以在计算距离页面顶部百分比数据会出现较大的偏差，造成绘制数据出现较大偏差。响应式页面在大屏展示时，页面两侧会出现留白部分，该留白占比会根据屏幕宽度变化，屏幕越大，留白部分所占比例就越大，所以计算左边距百分比也会出现较大偏差。

因此，需要一种新的用于热力图成像的方法、装置、电子设备及可读介质。

在所述背景技术部分公开的上述信息仅用于加强对本发明的背景的理解，因此它可以包括不构成对本领域普通技术人员已知的现有技术的信息。

技术实现要素：

有鉴于此，本发明提供一种用于热力图成像的方法、装置、电子设备及可读介质，能够解决热力图绘制时出现的偏差问题。

本发明的其他特性和优点将通过下面的详细描述变得显然，或部分地通过本发明的实践而习得。

根据本发明的一方面，提出一种用于热力图成像的方法，该方法可用于生成响应式热力图，该方法包括：监听用户在网页页面的点击行为；确定点击行为所在的网页元素；确定点击行为在网页元素中的位置；以及通过网页元素与点击行为在网页元素中的位置生成热力图。

在本公开的一种示例性实施例中，确定点击行为所在的网页元素，包括：通过路径语言确定点击行为所在的网页元素。

在本公开的一种示例性实施例中，确定点击行为所在的网页元素，还包括：通过网页元素获取网页元素相关信息。

在本公开的一种示例性实施例中，确定点击行为在网页元素中的位置，包括：获取点击行为在元素中的点击位置坐标；以及根据网页元素相关信息与点击位置坐标获取点击行为在网页元素中的位置。

在本公开的一种示例性实施例中，根据网页元素相关信息与点击位置坐标获取点击行为在网页元素中的位置，包括：根据网页元素相关信息，获取网页元素位置以及尺寸；将点击位置与网页元素左侧的距离作为第一距离；将点击位置与网页元素顶部的距离作为第二距离；以及通过第一距离、第二距离以及网页元素位置及尺寸生成点击位置在网页元素中的位置。

在本公开的一种示例性实施例中，点击位置在网页元素中的位置用相对位置的形式表示。

在本公开的一种示例性实施例中，还包括：记录点击行为的数量。

在本公开的一种示例性实施例中，通过网页元素与点击行为在网页元素中的位置生成热力图，包括：以网页元素为单位生成第一热力图；以点击行为的点击位置为单位在网页元素内生成第二热力图；以及根据第一热力图与第二热力图生成热力图。

在本公开的一种示例性实施例中，以网页元素为单位生成第一热力图，包括：获取来自网页元素的点击行为的数量；以及根据点击行为的数量与网页元素生成第一热力图。

在本公开的一种示例性实施例中，以点击位置为单位在网页元素内绘制第二热力图，包括：获取来自网页元素的点击行为的数量以及点击行为的位置；以及通过点击行为的数量以及点击行为的位置在网页元素内生成第二热力图。

根据本发明的一方面，提出一种用于热力图成像的装置，该装置可用于生成响应式热力图，该装置包括：监听模块，用于监听用户在网页页面的点击行为；元素模块，用于确定点击行为所在的网页元素；位置模块，用于确定点击行为在网页元素中的位置；以及绘图模块，用于通过网页元素与点击行为在网页元素中的位置生成热力图。

在本公开的一种示例性实施例中，绘图模块，包括：第一子模块，用于以网页元素为单位生成第一热力图；第二子模块，用于以点击行为的位置为单位在网页元素内生成第二热力图；以及绘图子模块，用于根据第一热力图与第二热力图生成热力图。

根据本发明的一方面，提出一种电子设备，该电子设备包括：一个或多个处理器；存储装置，用于存储一个或多个程序；当一个或多个程序被一个或多个处理器执行，使得一个或多个处理器实现如上文的任一方法。

根据本发明的一方面，提出一种计算机可读介质，其上存储有计算机程序，其特征在于，程序被处理器执行时实现如上文中任一的方法。

根据本发明的用于热力图成像的方法、装置、电子设备及可读介质，能够解决热力图绘制时出现的偏差问题。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性的，并不能限制本发明。

附图说明

通过参照附图详细描述其示例实施例，本发明的上述和其它目标、特征及优点将变得更加显而易见。下面描述的附图仅仅是本发明的一些实施例，对于本领域的普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是根据一示例性实施例示出的一种用于热力图成像的方法的流程图。

图2是根据另一示例性实施例示出的一种用于热力图成像的方法中网页元素示意图。

图3是根据另一示例性实施例示出的一种用于热力图成像的方法的流程图。

图4是根据一示例性实施例示出的一种用于热力图成像的装置的框图。

图5是根据另一示例性实施例示出的一种电子设备的框图。

具体实施例

现在将参考附图更全面地描述示例实施例。然而，示例实施例能够以多种形式实施，且不应被理解为限于在此阐述的实施例；相反，提供这些实施例使得本发明将全面和完整，并将示例实施例的构思全面地传达给本领域的技术人员。在图中相同的附图标记表示相同或类似的部分，因而将省略对它们的重复描述。

此外，所描述的特征、结构或特性可以以任何合适的方式结合在一个或更多实施例中。在下面的描述中，提供许多具体细节从而给出对本发明的实施例的充分理解。然而，本领域技术人员将意识到，可以实践本发明的技术方案而没有特定细节中的一个或更多，或者可以采用其它的方法、组元、装置、步骤等。在其它情况下，不详细示出或描述公知方法、装置、实现或者操作以避免模糊本发明的各方面。

附图中所示的方框图仅仅是功能实体，不一定必须与物理上独立的实体相对应。即，可以采用软件形式来实现这些功能实体，或在一个或多个硬件模块或集成电路中实现这些功能实体，或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。

附图中所示的流程图仅是示例性说明，不是必须包括所有的内容和操作/步骤，也不是必须按所描述的顺序执行。例如，有的操作/步骤还可以分解，而有的操作/步骤可以合并或部分合并，因此实际执行的顺序有可能根据实际情况改变。

应理解，虽然本文中可能使用术语第一、第二、第三等来描述各种组件，但这些组件不应受这些术语限制。这些术语乃用以区分一组件与另一组件。因此，下文论述的第一组件可称为第二组件而不偏离本公开概念的教示。如本文中所使用，术语“及/或”包括相关联的列出项目中的任一个及一或多者的所有组合。

本领域技术人员可以理解，附图只是示例实施例的示意图，附图中的模块或流程并不一定是实施本发明所必须的，因此不能用于限制本发明的保护范围。

下面结合附图对本公开示例实施方式进行详细说明。

图1是根据一示例性实施例示出的一种用于热力图成像的方法的流程图。

如图1所示，在s102中，监听用户在网页页面的点击行为。

在s104中，确定点击行为所在的网页元素。在本公开的一种示例性实施例中，确定点击行为所在的网页元素，可例如，包括：通过路径语言确定点击行为所在的网页元素。路径语言可例如为xpath，通过xpath值获取所述点击行为对应的网页元素。在本发明实施例中，网页元素为网页的基本元素。网页元素可例如包括：文本，图像、超级链接、导航栏，还可例如包括：动画、表格、框架、表单等。网页中除了上述最基本的构成元素外，还包括横幅广告、字幕、悬停按钮、日戳、计算器、音频、视频、javaapplet等网页元素。

xpath即为xml路径语言，是一种用来确定xml(标准通用标记语言的子集)文档中某部分位置的语言。xpath基于xml的树状结构，提供在数据结构树中找寻节点的能力。xpath使用路径表达式来选取xml文档中的节点或者节点集。这些路径表达式和我们在常规的电脑文件系统中看到的表达式非常相似。路径表达式是从一个xml节点(当前的上下文节点)到另一个节点、或一组节点的书面步骤顺序。这些步骤以“/”字符分开，每一步有三个构成成分：轴描述(用最直接的方式接近目标节点)；节点测试(用于筛选节点位置和名称)；节点描述(用于筛选节点的属性和子节点特征)。

在本发明实施例中，xpath可例如通过如下方法定位网页元素：通过绝对路径做定位；通过相对路径做定位；通过元素索引定位；使用xpath+节点属性定位；使用部分属性值匹配；使用前几种方法的组合。然而，本发明不以此为限。通过xpath获取网页元素的的同时，还可例如，读取网页元素相关的信息。网页元素相关的信息可例如包括，网页元素功能、网页元素属性、网页元素的位置以及网页元素的尺寸等。

在s106中，确定点击行为在网页元素中的位置。在本发明实施例中，可例如，根据确定之后的网页元素，根据网页元素位置以及尺寸，以及点击行为发生的位置，确定点击行为在网页元素中的位置。点击行为在网页元素中的位置可例如通过相对位置表示，还可例如，通过百分比的形式表示。可例如，将所述点击位置与所述网页元素左侧的距离作为第一距离(第一距离可例如为相对距离，通过点击位置与网页元素边缘之间的实际距离/网页元素自身的尺寸得到)；将所述点击位置与所述网页元素顶部的距离作为第二距离(第二距离可例如为相对距离，通过点击位置与网页元素边缘之间的实际距离/网页元素自身的尺寸得到)；还可例如，通过所述第一距离、所述第二距离以及所述网页元素位置及尺寸生成所述点击位置在所述网页元素中的位置。

在s108中，通过网页元素与点击行为在网页元素中的位置生成热力图。可例如，在生成响应式热力图时，先在页面上按网页元素块的点击热度数据去绘制热度，热区绑定到元素块上。此时页面内点击热门区域已经可以绘制出来，只不过热点区域是以元素块为单位，粒度较粗。然后按点击排序，取出元素块小区域内相对位置点击量较高的若干点击位置，并进一步在网页元素内按百分比绘制点击热度，以生成最终的热力图。

根据本发明的用于热力图成像的方法，通过将用户点击的位置与用户点击的网页元素关联的方式，获取点击位置在网页元素中的相对位置的方式，进而绘制热力图，能够解决热力图绘制时出现的偏差问题。

应清楚地理解，本发明描述了如何形成和使用特定示例，但本发明的原理不限于这些示例的任何细节。相反，基于本发明公开的内容的教导，这些原理能够应用于许多其它实施例。

图2是根据另一示例性实施例示出的一种用于热力图成像的方法中网页元素示意图。如图2所示，在本公开的一种示例性实施例中，所述确定所述点击行为在所述网页元素中的位置，包括：获取所述点击行为在所述元素中的点击位置坐标；以及根据所述网页元素相关信息与所述点击位置坐标获取所述点击行为在所述网页元素中的位置。在本公开的一种示例性实施例中，所述根据所述网页元素相关信息与所述点击位置坐标获取所述点击行为在所述网页元素中的位置，包括：根据所述网页元素相关信息，获取所述网页元素位置以及尺寸；将所述点击位置与所述网页元素左侧的距离作为第一距离；将所述点击位置与所述网页元素顶部的距离作为第二距离；以及通过所述第一距离、所述第二距离以及所述网页元素位置及尺寸生成所述点击位置在所述网页元素中的位置。在本公开的一种示例性实施例中，所述点击位置在所述网页元素中的位置用相对位置的形式表示。

如图2所示，在获取点击行为在网页元素中的位置时，可例如，通过如下方式计算：点击坐标x轴坐标值/网页元素宽度，以便计算出点击位置与网页元素左边百分比；点击坐标y轴坐标值/网页元素高度，以便计算出点击位置与网页元素顶部百分比。可例如，通过点击位置与网页元素左边百分比以及点击位置与网页元素顶部百分比，生成所述点击位置在所述网页元素中的位置。即以元素块为参照物，计算元素块小区域内部点击的相对位置，通过相对位置作为点击位置在网页元素中的位置。

在本公开的一种示例性实施例中，还包括：记录所述点击行为的数量。可例如，在绘制响应式热力图时，上报点击数量时元素的xpath值以及点击距离该元素左边百分比及距离顶部百分比。

图3是根据另一示例性实施例示出的一种用于热力图成像的方法的流程图。

如图3所示，在s302中，以网页元素为单位生成第一热力图。可例如，获取来自所述网页元素的所述点击行为的数量；以及根据所述点击行为的数量与所述网页元素生成所述第一热力图。如上文所述，绘制热力图时，先基于元素的xpath定位到元素，然后在页面上按元素块的点击热度数据去绘制热度，热区绑定到元素块上。此时页面内点击热门区域已经可以绘制出来，只不过热点区域是以元素块为单位，粒度较粗。

在s304中，以点击行为的点击位置为单位在网页元素内生成第二热力图。获取来自所述网页元素的所述点击行为的数量以及所述点击行为的位置；以及通过所述点击行为的数量以及所述点击行为的位置在所述网页元素内生成所述第二热力图。然后还可例如，按点击排序，取出元素块小区域内相对位置点击量较高的若干点击位置，并进一步在元素内按百分比绘制点击热度，此时，就能够更细粒度的还原页面内真正点击热力图。

在s306中，根据第一热力图与第二热力图生成热力图。做两次汇总。按元素块汇总元素块的点击数，然后按元素块为一个小区域，汇总数每个小区域块内各相对位置的点击数据。通过两次汇总的结果生成第一热力图与第二热力图，进而生成热力图。

根据本发明的用于热力图成像的方法，由于响应式页面会根据屏幕大小的变化而变化，本身就是通过控制元素块样式属性而形成会根据屏幕大小去自适应的效果。所以只要首先绑定到元素块，无论页面怎么变化，热点区域都会跟随变化，而不会出现偏移问题。

本领域技术人员可以理解实现上述实施例的全部或部分步骤被实现为由cpu执行的计算机程序。在该计算机程序被cpu执行时，执行本发明提供的上述方法所限定的上述功能。所述的程序可以存储于一种计算机可读存储介质中，该存储介质可以是只读存储器，磁盘或光盘等。

此外，需要注意的是，上述附图仅是根据本发明示例性实施例的方法所包括的处理的示意性说明，而不是限制目的。易于理解，上述附图所示的处理并不表明或限制这些处理的时间顺序。另外，也易于理解，这些处理可以是例如在多个模块中同步或异步执行的。

下述为本发明装置实施例，可以用于执行本发明方法实施例。对于本发明装置实施例中未披露的细节，请参照本发明方法实施例。

图4是根据一示例性实施例示出的一种用于热力图成像的装置的框图。

其中，监听模块402用于监听用户在网页页面的点击行为。

元素模块404用于确定所述点击行为所在的网页元素。

位置模块406用于确定所述点击行为在所述网页元素中的位置。

绘图模块408用于通过所述网页元素与所述点击行为在所述网页元素中的位置生成热力图。

绘图模块408，可例如包括：第一子模块(图中未示出)用于以所述网页元素为单位生成第一热力图；第二子模块(图中未示出)用于以所述点击行为的位置为单位在所述网页元素内生成第二热力图；以及绘图子模块(图中未示出)用于根据所述第一热力图与所述第二热力图生成所述热力图。

根据本发明的用于热力图成像的装置，通过将用户点击的位置与用户点击的网页元素关联的方式，获取点击位置在网页元素中的相对位置的方式，进而绘制热力图，能够解决热力图绘制时出现的偏差问题。

图5是根据另一示例性实施例示出的一种电子设备的框图。

下面参考图5，其示出了适于用来实现本申请实施例的电子设备500的结构示意图。图5示出的电子设设备仅仅是一个示例，不应对本申请实施例的功能和使用范围带来任何限制。

如图5所示，计算机系统500包括中央处理单元(cpu)501，其可以根据存储在只读存储器(rom)502中的程序或者从存储部分508加载到随机访问存储器(ram)503中的程序而执行各种适当的动作和处理。在ram503中，还存储有系统500操作所需的各种程序和数据。cpu501、rom502以及ram603通过总线504彼此相连。输入/输出(i/o)接口505也连接至总线504。

以下部件连接至i/o接口505：包括键盘、鼠标等的输入部分506；包括诸如阴极射线管(crt)、液晶显示器(lcd)等以及扬声器等的输出部分507；包括硬盘等的存储部分508；以及包括诸如lan卡、调制解调器等的网络接口卡的通信部分509。通信部分509经由诸如因特网的网络执行通信处理。驱动器510也根据需要连接至i/o接口505。可拆卸介质511，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器510上，以便于从其上读出的计算机程序根据需要被安装入存储部分508。

特别地，根据本公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分509从网络上被下载和安装，和/或从可拆卸介质511被安装。在该计算机程序被中央处理单元(cpu)501执行时，执行本申请的系统中限定的上述功能。

需要说明的是，本申请所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(ram)、只读存储器(rom)、可擦式可编程只读存储器(eprom或闪存)、光纤、便携式紧凑磁盘只读存储器(cd-rom)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本申请中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本申请中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、rf等等，或者上述的任意合适的组合。

附图中的流程图和框图，图示了按照本申请各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

描述于本申请实施例中所涉及到的单元可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的单元也可以设置在处理器中，例如，可以描述为：一种处理器包括发送单元、获取单元、确定单元和第一处理单元。其中，这些单元的名称在某种情况下并不构成对该单元本身的限定，例如，发送单元还可以被描述为“向所连接的服务端发送图片获取请求的单元”。

作为另一方面，本申请还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的设备中所包含的；也可以是单独存在，而未装配入该设备中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被一个该设备执行时，使得该设备包括：监听用户在网页页面的点击行为；确定所述点击行为所在的网页元素；确定所述点击行为在所述网页元素中的位置；以及通过所述网页元素与所述点击行为在所述网页元素中的位置生成热力图。

本领域技术人员可以理解上述各模块可以按照实施例的描述分布于装置中，也可以进行相应变化唯一不同于本实施例的一个或多个装置中。上述实施例的模块可以合并为一个模块，也可以进一步拆分成多个子模块。

通过以上的实施例的描述，本领域的技术人员易于理解，这里描述的示例实施例可以通过软件实现，也可以通过软件结合必要的硬件的方式来实现。因此，根据本发明实施例的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是cd-rom，u盘，移动硬盘等)中或网络上，包括若干指令以使得一台计算设备(可以是个人计算机、服务器、移动终端、或者网络设备等)执行根据本发明实施例的方法。

通过以上的详细描述，本领域的技术人员易于理解，根据本发明实施例的用于热力图成像的方法、装置、电子设备及可读介质具有以下优点中的一个或多个。

根据一些实施例，本发明的用于热力图成像的方法，通过将用户点击的位置与用户点击的网页元素关联的方式，获取点击位置在网页元素中的相对位置的方式，进而绘制热力图，能够解决热力图绘制时出现的偏差问题。

根据另一些实施例，本发明的用于热力图成像的方法，由于响应式页面会根据屏幕大小的变化而变化，本身就是通过控制元素块样式属性而形成会根据屏幕大小去自适应的效果。所以只要首先绑定到元素块，无论页面怎么变化，热点区域都会跟随变化，而不会出现偏移问题。

以上具体地示出和描述了本发明的示例性实施例。应可理解的是，本发明不限于这里描述的详细结构、设置方式或实现方法；相反，本发明意图涵盖包含在所附权利要求的精神和范围内的各种修改和等效设置。

此外，本说明书说明书附图所示出的结构、比例、大小等，均仅用以配合说明书所公开的内容，以供本领域技术人员了解与阅读，并非用以限定本公开可实施的限定条件，故不具技术上的实质意义，任何结构的修饰、比例关系的改变或大小的调整，在不影响本公开所能产生的技术效果及所能实现的目的下，均应仍落在本公开所公开的技术内容得能涵盖的范围内。同时，本说明书中所引用的如“上”、“第一”、“第二”及“一”等的用语，也仅为便于叙述的明了，而非用以限定本公开可实施的范围，其相对关系的改变或调整，在无实质变更技术内容下，当也视为本发明可实施的范畴。