CN111104608A - 一种网页数据处理方法以及相关装置 - Google Patents

Abstract

本申请实施例公开了一种网页数据处理方法以及相关装置，准确地向用户展示热力图。本申请实施例方法包括：服务器确定第一页面中位置可修改的元素的元素标识，第一页面为目标网页对应的页面中需要绘制热力图的页面；服务器获取与元素标识对应的历史点击信息，历史点击信息包括至少一次历史点击操作的相对位置信息，相对位置信息是根据历史点击操作在第二页面对应的位置以及元素在第二页面对应的位置确定的；服务器根据相对位置信息以及元素在第一页面中对应的位置确定历史点击操作在第一页面对应的位置；服务器向终端设备发送历史点击操作在第一页面对应的位置，以使得终端设备在第一页面上显示热力图，热力图用于展示元素被点击的热度。

Description

一种网页数据处理方法以及相关装置

技术领域

本申请实施例涉及数据处理领域，尤其涉及一种网页数据处理方法以及相关装置。

背景技术

热力图指以特殊高亮的形式显示用户热衷的页面区域的图示。随着互联网技术的不断发展，在网站的发展方向决策和运营销售决策时，使数据变成用户可视化的、直观的图像是十分重要的。由于，用户通过热力图的数据分析方式可以得到很好的决策参考依据，所以，热力图的研究意义深远。

一般情况下，服务器获取每个用户在整个网页中的点击操作的位置对应的坐标值，然后，将这些坐标值在网页中的对应位置渲染为由颜色区分热度的热力图。

在这种方案中，由于服务器获取的点击位置的坐标值是基于整个网页的，当该网页中的元素的位置变化时，该坐标值所对应的点击位置将不再与用户原本做出点击操作的那个元素对应的位置对应，所以，热力图不能准确展示各个元素的点击量，热力图的参考价值降低。

发明内容

本申请实施例提供了一种网页数据处理方法以及相关装置，用于元素位置发生改变时时向用户展示准确的热力图。

第一方面，本申请实施例提供了一种网页数据处理方法，包括：

当用户向服务器发送查看该第一页面的热力图的请求时，该服务器可以先确定第一页面中位置可修改的元素的元素标识，然后，获取与该元素标识对应的历史点击信息，其中，该历史点击信息包括至少一次历史点击操作的相对位置信息，该相对位置信息是根据该历史点击操作在第二页面对应的位置以及该元素在该第二页面对应的位置确定的，然后，该服务器根据该相对位置信息以及该元素在该第一页面中对应的位置确定每次历史点击操作在该第一页面对应的位置，最后，该服务器向终端设备发送该每次历史点击操作在该第一页面对应的位置，以使得该终端设备在该第一页面上显示热力图。

需要注意的是，在本申请实施例中，该第一页面为目标网页对应的页面中需要绘制热力图的页面，该第二页面为该目标网页对应的页面中产生该历史点击操作的页面。

本申请实施例中，服务器先获取了第一页面中元素的元素标识以及与该元素标识对应的历史点击操作的相对位置信息，然后，服务器根据该相对位置信息以及该元素在该第一页面对应的位置确定每次历史点击操作在该第一页面对应的位置，然后，服务器发送该历史点击操作的相关数据给终端设备，以使得该终端设备采用每次历史点击操作在该第一页面对应的位置绘制该第一页面的热力图。由于，服务器获取的是每次历史点击操作的相对位置信息，并且，该相对位置信息是根据该历史点击操作在第二页面对应的位置以及该元素在该第二页面对应的位置确定的，也就是说，服务器获取到的是每次历史点击操作相对于该点击操作所对应的元素的位置信息，当元素所在位置发生移动时，每次历史点击操作相对于该点击操作所对应的元素的位置信息是不变的，所以，服务器根据该相对位置信息以及该元素在该第一页面对应的位置确定的每次历史点击操作在该第一页面对应的位置是准确的，因此，采用该每次历史点击操作在该第一页面对应的位置绘制的第一页面的热力图是准确的，因此，提高了该热力图的参考价值。

根据第一方面，本申请实施例第一方面的第一种实施方式中，该服务器获取与该元素标识对应的历史点击信息之前，该方法还包括：

针对每一次历史点击操作，该服务器确定该历史点击操作在该第二页面对应的位置；

若该历史点击操作在该第二页面对应的位置位于该元素在该第二页面对应的区域内，则该服务器根据该元素在该第二页面对应的位置以及该历史点击操作在第二页面对应的位置确定该历史点击操作对应的相对位置信息，并将该相对位置信息与该元素标识对应存储。

本申请实施例中，明确了该服务器在获取与该元素标识对应的历史点击信息之前还需要确定该历史点击操作在该第二页面对应的位置的步骤，并且，当该历史点击操作在该第二页面对应的位置位于该元素在该第二页面对应的区域内时，该服务器才会根据该元素在该第二页面对应的位置以及该历史点击操作在第二页面对应的位置确定该历史点击操作对应的相对位置信息，这样的步骤可以过滤到没有作用于元素所对应的区域上的点击操作的相关信息，因此，提高了方案的可行性。

根据第一方面的第一种实施方式，本申请实施例第一方面的第二种实施方式中，该服务器根据该元素在第二页面对应的位置以及该历史点击操作在第二页面对应的位置确定该历史点击操作对应的相对位置信息包括：

该服务器将该历史点击操作在第二页面对应的坐标值减去该元素在第二页面对应的坐标值得到的相对坐标值；

该服务器根据该相对位置信息以及该元素在该第一页面对应的位置确定每次历史点击操作在该第一页面对应的位置包括：

针对每次历史点击操作，该服务器将该历史点击操作的相对坐标值加上该元素在该第一页面对应的坐标值得到该历史点击操作在第一页面对应的坐标值。

本申请实施例中，明确了元素在第二页面对应的位置、该历史点击操作在第二页面对应的位置以及该历史点击操作对应的相对位置信息之间的转换关系，因此，提高了方案的可行性。

根据第一方面的第一种实施方式，本申请实施例第一方面的第三种实施方式中，该方法还包括：

该服务器确定该元素在该第二页面对应的横坐标值，纵坐标值，宽度值以及高度值，该宽度值指该元素在第二页面中的水平方向的几何尺寸，该高度值指该元素在第一页面中的竖直方向的几何尺寸。

该服务器根据该横坐标值以及该宽度值确定横坐标范围，根据该纵坐标以及该高度值确定纵坐标范围；

若该历史点击操作在第二页面对应的横坐标值在该横坐标范围内，且该历史点击操作在第二页面对应的纵坐标值在该纵坐标范围内，则该服务器确定该历史点击操作在该第二页面对应的位置位于该元素在第二页面对应的区域内。

本申请实施例中，明确了判断该历史点击操作是否作用于元素所对应的区域内的方式，即历史点击操作在第二页面对应的横坐标值在该横坐标范围内，且该历史点击操作在第二页面对应的纵坐标值在该纵坐标范围内时，该服务器将确定该历史点击操作在该第二页面对应的位置位于该元素在第二页面对应的区域内，因此，提高了方案的可行性。

根据第一方面，本申请实施例第一方面的第四种实施方式中，该服务器向终端设备发送该历史点击操作在该第一页面对应的位置，以使得该终端设备在该第一页面上显示热力图，该热力图用于展示各个元素被点击的热度包括：

该服务器向终端设备发送目标坐标值，以使得该终端设备在该目标坐标值对应的位置绘制热力图，该目标坐标值用于表示该历史点击操作在该第一页面对应的位置，该热力图用于展示各个元素被点击的热度。

本申请实施例中，明确了服务器将目标坐标值发送给终端设备，以使得终端设备绘制热力图的方式，因此，增加了方案的可行性。

根据第一方面，本申请实施例第一方面的第五种实施方式中，该服务器向终端设备发送该历史点击操作在该第一页面对应的位置，以使得该终端设备在该第一页面上显示热力图，该热力图用于展示各个元素被点击的热度包括：

该服务器在该历史点击操作在该第一页面对应的位置绘制灰度圆得到灰度图；

该服务器设置该灰度图中的灰度圆的颜色和亮度得到热力图，该热力图用于展示各个元素被点击的热度；

该服务器向终端设备发送该热力图，以使得该终端设备在该第一页面上显示热力图。

本申请实施例中，该服务器先根据目标坐标值绘制热力图，然后发送给终端设备，由终端设备显示该热力图，因此，增加了方案的实现灵活性。

根据第一方面，本申请实施例第一方面的第六种实施方式中，该服务器确定第一页面中位置可修改的元素的元素标识包括：

该服务器获取第一页面中所有元素的元素标识；

判断该元素标识中是否存在位置可修改的元素的元素标识；

若该元素标识中存在位置可修改的元素的元素标识，则确定该位置可修改的元素的元素标识。

本申请实施例中，该服务器在确定位置可修改的元素的元素标识之前，可以先确定该页面中所有元素的元素标识，然后，从所有元素的元素标识中找出位置可修改的元素的元素标识，因此，增加了方案的可行性。

第二方面，本申请实施例提供了一种服务器，该服务器执行如前述第一方面中的方法，该服务器包括：

处理器、存储器、总线以及输入/输出设备；

该处理器、该存储器以及该输入/输出设备与该总线连接；

该存储器用于存储程序；

该处理器用于执行该程序，具体包括如下步骤：

确定第一页面中位置可修改的元素的元素标识，该第一页面为目标网页对应的页面中需要绘制热力图的页面；

获取与该元素标识对应的历史点击信息，该历史点击信息包括至少一次历史点击操作的相对位置信息，该相对位置信息是根据该历史点击操作在第二页面对应的位置以及该元素在该第二页面对应的位置确定的；

根据该相对位置信息以及该元素在该第一页面中对应的位置确定每次历史点击操作在该第一页面对应的位置；

该输入/输出设备，用于向终端设备发送该每次历史点击操作在该第一页面对应的位置，以使得该终端设备在该第一页面上显示热力图，该热力图用于展示该元素被点击的热度。

本申请实施例中，处理器先获取了第一页面中元素的元素标识以及与该元素标识对应的历史点击操作的相对位置信息，然后，该处理器根据该相对位置信息以及该元素在该第一页面对应的位置确定每次历史点击操作在该第一页面对应的位置，然后，该处理器采用该每次历史点击操作在该第一页面对应的位置绘制该第一页面的热力图。由于，该处理器获取的是每次历史点击操作的相对位置信息，并且，该相对位置信息是根据该历史点击操作在第二页面对应的位置以及该元素在该第二页面对应的位置确定的，也就是说，该处理器获取到的是每次历史点击操作相对于该点击操作所对应的元素的位置信息，当元素所在位置发生移动时，每次历史点击操作相对于该点击操作所对应的元素的位置信息是不变的，所以，该处理器根据该相对位置信息以及该元素在该第一页面对应的位置确定的每次历史点击操作在该第一页面对应的位置是准确的，因此，采用该每次历史点击操作在该第一页面对应的位置绘制的第一页面的热力图是准确的，因此，提高了该热力图的参考价值。

根据第二方面，本申请实施例第二方面的第一种实施方式中，该处理器还用于执行如下步骤：

针对每一次历史点击操作，确定该历史点击操作在该第二页面对应的位置；

若该历史点击操作在该第二页面对应的位置位于该元素在该第二页面对应的区域内，则根据该元素在该第二页面对应的位置以及该历史点击操作在第二页面对应的位置确定该历史点击操作对应的相对位置信息，并将该相对位置信息与该元素标识对应存储。

本申请实施例中，明确了该服务器在获取与该元素标识对应的历史点击信息之前还需要确定该历史点击操作在该第二页面对应的位置的步骤，并且，当该历史点击操作在该第二页面对应的位置位于该元素在该第二页面对应的区域内时，该服务器才会根据该元素在该第二页面对应的位置以及该历史点击操作在第二页面对应的位置确定该历史点击操作对应的相对位置信息，这样的步骤可以过滤到没有作用于元素所对应的区域上的点击操作的相关信息，因此，提高了方案的可行性。

根据第二方面的第一种实施方式，本申请实施例第二方面的第二种实施方式中，该处理器具体用于执行如下步骤：

将该历史点击操作在第二页面对应的坐标值减去该元素在第二页面对应的坐标值得到的相对坐标值；

根据该相对位置信息以及该元素在该第一页面对应的位置确定每次历史点击操作在该第一页面对应的位置包括：

针对每次历史点击操作，该将该历史点击操作的相对坐标值加上该元素在该第一页面对应的坐标值得到该历史点击操作在第一页面对应的坐标值。

本申请实施例中，明确了元素在第二页面对应的位置、该历史点击操作在第二页面对应的位置以及该历史点击操作对应的相对位置信息之间的转换关系，因此，提高了方案的可行性。

根据第二方面的第一种实施方式，本申请实施例第二方面的第三种实施方式中，该处理器还用于执行如下步骤：

确定该元素在该第二页面对应的横坐标值，纵坐标值，宽度值以及高度值，该宽度值指该元素在第二页面中的水平方向的几何尺寸，该高度值指该元素在第一页面中的竖直方向的几何尺寸。

根据该横坐标值以及该宽度值确定横坐标范围，根据该纵坐标以及该高度值确定纵坐标范围；

若该历史点击操作在第二页面对应的横坐标值在该横坐标范围内，且该历史点击操作在第二页面对应的纵坐标值在该纵坐标范围内，则确定该历史点击操作在该第二页面对应的位置位于该元素在第二页面对应的区域内。

本申请实施例中，明确了判断该历史点击操作是否作用于元素所对应的区域内的方式，即历史点击操作在第二页面对应的横坐标值在该横坐标范围内，且该历史点击操作在第二页面对应的纵坐标值在该纵坐标范围内时，该服务器将确定该历史点击操作在该第二页面对应的位置位于该元素在第二页面对应的区域内，因此，提高了方案的可行性。

根据第二方面，本申请实施例第二方面的第四种实施方式中，该服务器具体用于执行如下步骤：

该服务器向终端设备发送目标坐标值，以使得该终端设备在该目标坐标值对应的位置绘制热力图，该目标坐标值用于表示该历史点击操作在该第一页面对应的位置，该热力图用于展示各个元素被点击的热度。

本申请实施例中，明确了服务器将目标坐标值发送给终端设备，以使得终端设备绘制热力图的方式，因此，增加了方案的可行性。

根据第二方面，本申请实施例第二方面的第五种实施方式中，该服务器具体用于执行如下步骤：

该服务器在该历史点击操作在该第一页面对应的位置绘制灰度圆得到灰度图；

该服务器设置该灰度图中的灰度圆的颜色和亮度得到热力图，该热力图用于展示各个元素被点击的热度；

该服务器向终端设备发送该热力图，以使得该终端设备在该第一页面上显示热力图。

本申请实施例中，该服务器先根据目标坐标值绘制热力图，然后发送给终端设备，由终端设备显示该热力图，因此，增加了方案的实现灵活性。

根据第二方面，本申请实施例第二方面的第六种实施方式中，该服务器具体用于执行如下步骤：

该服务器获取第一页面中所有元素的元素标识；

该服务器判断该元素标识中是否存在位置可修改的元素的元素标识；

若该元素标识中存在位置可修改的元素的元素标识，则该服务器确定该位置可修改的元素的元素标识。

本申请实施例中，该服务器在确定位置可修改的元素的元素标识之前，可以先确定该页面中所有元素的元素标识，然后，从所有元素的元素标识中找出位置可修改的元素的元素标识，因此，增加了方案的可行性。

第三方面，本申请实施例提供了一种服务器，该服务器执行如前述第一方面中的方法，该服务器包括：

第一确定模块，用于确定第一页面中位置可修改的元素的元素标识，该第一页面为目标网页对应的页面中需要绘制热力图的页面；

获取模块，用于获取与该元素标识对应的历史点击信息，该历史点击信息包括至少一次历史点击操作的相对位置信息，该相对位置信息是根据该历史点击操作在第二页面对应的位置以及该元素在该第二页面对应的位置确定的；

第二确定模块，用于根据该相对位置信息以及该元素在该第一页面中对应的位置确定每次历史点击操作在该第一页面对应的位置；

发送模块，用于向终端设备发送该每次历史点击操作在该第一页面对应的位置，以使得该终端设备在该第一页面上显示热力图，该热力图用于展示该元素被点击的热度。

本申请实施例中，服务器的第一确定模块确定了第一页面中元素的元素标识，并且，该服务器的获取模块获取了该元素标识对应的历史点击操作的相对位置信息，然后，该服务器的第二确定模块根据该相对位置信息以及该元素在该第一页面对应的位置确定每次历史点击操作在该第一页面对应的位置，然后，服务器发送该历史点击操作的相关数据给终端设备，以使得该终端设备采用该每次历史点击操作在该第一页面对应的位置绘制该第一页面的热力图。由于，服务器获取的是每次历史点击操作的相对位置信息，并且，该相对位置信息是根据该历史点击操作在第二页面对应的位置以及该元素在该第二页面对应的位置确定的，也就是说，服务器获取到的是每次历史点击操作相对于该点击操作所对应的元素的位置信息，当元素所在位置发生移动时，每次历史点击操作相对于该点击操作所对应的元素的位置信息是不变的，所以，服务器根据该相对位置信息以及该元素在该第一页面对应的位置确定的每次历史点击操作在该第一页面对应的位置是准确的，因此，采用该每次历史点击操作在该第一页面对应的位置绘制的第一页面的热力图是准确的，因此，提高了该热力图的参考价值。

根据第三方面，本申请实施例第三方面的第一种实施方式中，该服务器还包括：

第三确定模块，用于针对每一次历史点击操作，确定该历史点击操作在该第二页面对应的位置；

第四确定模块，用于当该历史点击操作在该第二页面对应的位置位于该元素在该第二页面对应的区域内时，根据该元素在该第二页面对应的位置以及该历史点击操作在第二页面对应的位置确定该历史点击操作对应的相对位置信息，并将该相对位置信息与该元素标识对应存储。

本申请实施例中，明确了该服务器在获取与该元素标识对应的历史点击信息之前还需要确定该历史点击操作在该第二页面对应的位置的步骤，并且，当该历史点击操作在该第二页面对应的位置位于该元素在该第二页面对应的区域内时，该服务器才会根据该元素在该第二页面对应的位置以及该历史点击操作在第二页面对应的位置确定该历史点击操作对应的相对位置信息，这样的步骤可以过滤到没有作用于元素所对应的区域上的点击操作的相关信息，因此，提高了方案的可行性。

根据第三方面的第一实施方式，本申请实施例第三方面的第二种实施方式中，该第四确定模块包括：

第一计算子模块，用于将该历史点击操作在第二页面对应的坐标值减去该元素在第二页面对应的坐标值得到的相对坐标值；

该第二确定模块包括：

第二计算子模块，用于针对每次历史点击操作，将该历史点击操作的相对坐标值加上该元素在该第一页面对应的坐标值得到该历史点击操作在第一页面对应的坐标值。

本申请实施例中，明确了元素在第二页面对应的位置、该历史点击操作在第二页面对应的位置以及该历史点击操作对应的相对位置信息之间的转换关系，因此，提高了方案的可行性。

根据第三方面的第一实施方式，本申请实施例第三方面的第三种实施方式中，该服务器还包括：

第五确定模块，用于确定该元素在该第二页面对应的横坐标值，纵坐标值，宽度值以及高度值，该宽度值指该元素在第二页面中的水平方向的几何尺寸，该高度值指该元素在第一页面中的竖直方向的几何尺寸。

第六确定模块，用于根据该横坐标值以及该宽度值确定横坐标范围，根据该纵坐标以及该高度值确定纵坐标范围；

第七确定模块，用于当该历史点击操作在第二页面对应的横坐标值在该横坐标范围内，且该历史点击操作在第二页面对应的纵坐标值在该纵坐标范围内时，确定该历史点击操作在该第二页面对应的位置位于该元素在第二页面对应的区域内。

本申请实施例中，明确了判断该历史点击操作是否作用于元素所对应的区域内的方式，即历史点击操作在第二页面对应的横坐标值在该横坐标范围内，且该历史点击操作在第二页面对应的纵坐标值在该纵坐标范围内时，该服务器将确定该历史点击操作在该第二页面对应的位置位于该元素在第二页面对应的区域内，因此，提高了方案的可行性。

根据第三方面，本申请实施例第三方面的第四种实施方式中，该发送模块包括：

第一发送子模块，用于向终端设备发送目标坐标值，以使得该终端设备在该目标坐标值对应的位置绘制热力图，该目标坐标值用于表示该历史点击操作在该第一页面对应的位置，该热力图用于展示各个元素被点击的热度。

本申请实施例中，明确了服务器将目标坐标值发送给终端设备，以使得终端设备绘制热力图的方式，因此，增加了方案的可行性。

根据第三方面，本申请实施例第三方面的第五种实施方式中，该发送模块还包括：

绘制子模块，用于在该历史点击操作在该第一页面对应的位置绘制灰度圆得到灰度图；

设置子模块，用于设置该灰度图中的灰度圆的颜色和亮度得到热力图，该热力图用于展示各个元素被点击的热度；

第二发送子模块，用于向终端设备发送该热力图，以使得该终端设备在该第一页面上显示热力图。

本申请实施例中，该服务器先根据目标坐标值绘制热力图，然后发送给终端设备，由终端设备显示该热力图，因此，增加了方案的实现灵活性。

根据第三方面，本申请实施例第三方面的第六种实施方式中，该第一确定模块包括：

获取子模块，用于获取第一页面中所有元素的元素标识；

判断子模块，用于判断该元素标识中是否存在位置可修改的元素的元素标识；

确定子模块，用于当该元素标识中存在位置可修改的元素的元素标识时，确定该位置可修改的元素的元素标识。

本申请实施例中，该服务器在确定位置可修改的元素的元素标识之前，可以先确定该页面中所有元素的元素标识，然后，从所有元素的元素标识中找出位置可修改的元素的元素标识，因此，增加了方案的可行性。

第四方面，本申请实施例提供了一种计算机可读存储介质，包括指令，当其在计算机上运行时，使得计算机执行如第一方面的方法。

第五方面，本申请实施例提供了一种包含指令的计算机程序产品，当其在计算机上运行时，使得计算机执行如第一方面的方法。

从以上技术方案可以看出，本申请实施例具有以下优点：

本申请实施例中，服务器先获取了第一页面中元素的元素标识以及与该元素标识对应的历史点击操作的相对位置信息，然后，服务器根据该相对位置信息以及该元素在该第一页面对应的位置确定每次历史点击操作在该第一页面对应的位置，然后，服务器采用该每次历史点击操作在该第一页面对应的位置绘制该第一页面的热力图。由于，服务器获取的是每次历史点击操作的相对位置信息，并且，该相对位置信息是根据该历史点击操作在第二页面对应的位置以及该元素在该第二页面对应的位置确定的，也就是说，服务器获取到的是每次历史点击操作相对于该点击操作所对应的元素的位置信息，当元素所在位置发生移动时，每次历史点击操作相对于该点击操作所对应的元素的位置信息是不变的，所以，服务器根据该相对位置信息以及该元素在该第一页面对应的位置确定的每次历史点击操作在该第一页面对应的位置是准确的，因此，采用该每次历史点击操作在该第一页面对应的位置绘制的第一页面的热力图是准确的，因此，提高了该热力图的参考价值。

附图说明

为了更清楚地说明本申请实施例的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例。

图1A为本申请实施例中网页数据处理方法的一个应用场景示意图；

图1B为本申请实施例中网页数据处理方法的另一个应用场景示意图；

图1C为本申请实施例中网页数据处理方法的另一个应用场景示意图；

图1D为本申请实施例中网页数据处理方法的另一个应用场景示意图；

图2为本申请实施例中网页数据处理方法的一个流程图；

图3A为本申请实施例中网页数据处理方法的一个实施例示意图；

图3B为本申请实施例中网页数据处理方法的另一个实施例示意图；

图4A为本申请实施例中网页数据处理方法的另一个实施例示意图；

图4B为本申请实施例中网页数据处理方法的另一个实施例示意图；

图4C为本申请实施例中网页数据处理方法的另一个实施例示意图；

图4D为本申请实施例中网页数据处理方法的另一个实施例示意图；

图5A为本申请实施例中网页数据处理方法的另一个实施例示意图；

图5B为本申请实施例中网页数据处理方法的另一个实施例示意图；

图5C为本申请实施例中网页数据处理方法的另一个实施例示意图；

图6为本申请实施例中服务器的一个实施例示意图；

图7为本申请实施例中服务器的另一个实施例示意图。

具体实施方式

本申请实施例提供了一种网页数据处理方法以及相关装置，用于元素位置发生改变时时向用户展示准确的热力图。

本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”、“第四”等(如果存在)是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

下面对本申请实施例涉及的一些术语进行介绍：

网页：一个包含超级文本标记(hyper text markup language，HTML)标签的纯文本文件，可以存放在世界某个角落的某一台计算机中，是万维网中的一“页”。网页需要通过网页浏览器进行阅读，一个网页浏览器可以展示多个页面，如图1A所示，“华为商城”是一个页面，“平板和穿戴-华为商城”是另一个页面，这两个页面可能有关联关系，具体此处不做限定。如图1B所示，该页面是关于“平板和穿戴-华为商城”的页面，该页面中的“手机”、“笔记本电脑”、“平板和穿戴”、该页面中的搜索栏以及该页面中的平板的图片等都是该页面中的元素(interface element)，这些元素可以满足用户与该网页所对应的网站的交互需求。

并且，一个网页中的某个元素在不同页面中对应的位置可能是不相同的，例如，用户进入“平板和穿戴-华为商城”网页时，终端设备的浏览器所显示的页面如图1B所示，然后，如果运维人员对“平板和穿戴-华为商城”网页中的“手机”、“笔记本电脑”和“平板和穿戴”等元素的位置进行了调整，那么，在调整之后，当用户再次进入“平板和穿戴-华为商城”网页时，终端设备所显示的页面可能如图1C所示，因此，这些可以被调整的元素称为位置可修改的元素。

元素标识：用于标识网页中的元素，网页中每个元素对应一个元素标识。

下面对本申请实施例所适应的应用场景进行介绍：

本申请实施例所提出的方法主要应用于卡片式页面向用户展示网页内容的场景。如图1B所示，该页面为卡片式页面，该卡片式页面通常由多个卡片状的元素构成，该卡片状的元素是指那些包含一定图片和文本信息在内的一个矩形，可以作为指向更多详细信息的一个入口。需要注意的是，该卡片式页面不仅限于某个浏览器所展示的网站的页面，还包括某些应用软件所展示的页面，或者终端设备的其他界面，具体此处不做限定。在本实施例以及后续实施例中仅以某个浏览器所展示的网站的页面为例进行介绍。一般地，用户在某个页面产生了点击操作之后，服务器采用超级文本标记技术以及层叠样式表技术将与这次点击操作相关的信息记录下来用于绘制热力图，然后，该热力图便可以以特殊高亮的形式显示页面中的各个元素被点击的次数，也就是说，用户可以通过热力图中的各个元素上的亮度或者颜色情况获知该页面中哪些元素更受欢迎，进而运维人员可以根据用户的喜好决定网站的规划策略。

需要注意的是，服务器在确定页面中各个元素的位置信息之前，需要先确定该页面的坐标系。应当理解的是该页面的坐标系可以如图1B所示，以页面的左上角顶点为坐标原点，以页面的左边线竖直向下的方向为y轴正方向，以页面的上边线水平向右的方向为x轴正方向。需要注意的是，根据不同用户的需求，该坐标系也可以是以页面的右下角顶点为坐标原点，以页面的右边线竖直向上的方向为y轴正方向，以页面的下边线水平向左的方向为x轴正方向，具体此处不做限定。在本实施例以及后续实施例中仅以图1B所示的坐标系为例进行介绍。

除此之外，元素在页面中的坐标值用于表示该元素在该页面中的位置。如图1D，元素的横坐标值指元素的竖直基准边线与坐标系中的y轴的最短距离，类似的，元素的纵坐标值指元素的水平基准边线与坐标系中的x轴的最短距离，并且，该竖直基准边线与水平基准边线的交点为该元素的基准参考点。需要注意的是，该元素的基准参考点可以为元素的左上角，也可以为元素的右下角，还可以为元素的几何中心，具体此处不做限定。在本实施例以及后续实施例中仅以基准参考点为元素的左上角为例进行介绍。除此之外，还应理解的是，由于，元素的竖直基准边线与y轴都是竖直方向的，所以，元素的竖直基准边线与y轴是平行的。需要注意的是，本实施例所涉及的坐标值是以像素的个数(pixel，PX)为单位,该像素是指基本原色素及其灰度的基本编码，是构成影像的最小单位。

除此之外，元素的基准参考点与元素的宽度值以及元素的高度值一起表征元素在该页面中的区域，如图1D所示，元素A的宽度值为元素A在水平基准线方向的尺寸，元素A的高度值为元素A在竖直基准线方向的尺寸，显然，如果已知元素A的基准参考点的坐标值、元素A的宽度值以和元素A的高度值，就可以计算出该元素A在该页面中所处的区域，即图1D中元素A对应的虚线框在该页面中的区域。

为便于更好地理解本申请实施例所提出的方案，下面对本实施例中的具体流程进行介绍，如图2所示，是本实施例提供的网页数据处理方法，该方法中的服务器执行如下步骤，包括：

201、确定第一页面中位置可修改的元素的元素标识；

本实施例中，当用户想要查看某网站的某一页面的用户访问情况时，该用户可以向服务器发送查看该页面的热力图的请求，该热力图用于展示该页面中的各个元素所处的位置，以及各元素被点击的次数。然后，服务器获取第一页面中所有元素的元素标识，并判断该元素标识中是否存在位置可修改的元素的元素标识，若该元素标识中存在位置可修改的元素的元素标识，则确定该位置可修改的元素的元素标识，以备后续使用。

本实施例中，第一页面指的是目标网页对应的页面中需要绘制热力图的页面，第二页面指的是目标网页对应的页面中产生历史点击操作的页面，目标网页中的元素在第一页面中对应的位置可以相同也可以不同，具体此处不做作限定。

本实施例中，该第一页面中至少存在一个位置可以修改的元素，也就是说，服务器在后台可以修改该元素的位置以移动该元素在该页面中所处的位置。于是，可能就同一网站的某个页面来说，A用户和B用户所看到的该网站的这个页面可能不同，例如，“平板和穿戴-华为商城”页面，A用户所看到的该页面中的元素A的位置位于页面中部的左边，如图1B所示，而B用户所看到的该页面中的元素A的位置位于页面中部的右边，如图1C所示。除此之外，还可能是同一用户对该页面中的元素的位置做出调整，于是，同一用户在不同时刻所看到的该页面中的元素的位置不相同。具体此处不做限定。为便于进一步介绍，在本实施例中，以图1B所示的页面为第二页面，以图1C所示的页面为第一页面。

应当理解的是，该元素标识用于标识页面中的元素，即一个元素对应一个标识，同一页面中的不同的元素所对应的元素标识不相同，并且，如果该元素中的内容不发生改变，则该元素的标识也不会发生改变，因此，服务器可以通过该标识将该元素与其他元素区分开来。

202、获取与该元素标识对应的历史点击信息；

本实施例中，当服务器确定了第一页面中位置可修改的元素的元素标识之后，该服务器可以获取与该元素标识对应的历史点击信息，其中，该历史点击信息包括至少一次历史点击操作的相对位置信息，该相对位置信息具体可以是以可修改元素的基准参考点为原点的相对坐标值，针对每次历史点击操作，该次历史点击操作的相对位置信息是根据该次历史点击操作在第二页面上所点击的位置，与该元素在该第二页面对应的位置确定的。

需要说明的是，本实施例中，与元素标识对应的历史点击操作指的是用户在目标网页对应的页面上输入的针对该可修改的元素的点击操作，该点击操作具体可以是单击操作，双击操作或者长按操作等，为了便于描述，本实施例中产生该历史点击操作的该目标网页对应的页面称为第二页面。

为便于理解，下面以“平板和穿戴-华为商城”页面中的元素A为例介绍服务器确定该相对坐标信息的过程，其中包括如下步骤：

S1、确定该元素在该第二页面对应的横坐标值，纵坐标值，宽度值以及高度值；

本实施例中，服务器可以确定在该第二页面中的每个元素的横坐标值、纵坐标值、宽度值以及高度值，如图3A所示，以“平板和穿戴-华为商城”页面中的元素A为例，在该图3A所示的坐标系中该元素A的横坐标值为x1，纵坐标为y1。除此之外，元素宽度值指该元素在第二页面中的水平方向的几何尺寸，该高度值指该元素在第二页面中的竖直方向的几何尺寸，例如，元素A的宽度值为w1，元素A的高度值为h1。

S2、根据该横坐标值以及该宽度值确定横坐标范围，根据该纵坐标以及该高度值确定纵坐标范围；

本实施例中，该横坐标范围指该元素的水平方向的尺寸在该第二页面中的范围，该横坐标范围为一个确定的开区间，该开区间的左区间为元素A的横坐标值x1，该开区间的右区间为元素A的横坐标值x1与该宽度值w1的和。依然以如图3A中的元素A为例，该元素A对应的横坐标范围为(x1，x1+w1)。类似的，该纵坐标范围指该元素的竖直方向的尺寸在该第二页面中的范围，该纵坐标范围也为一个确定的开区间，该开区间的左区间为元素A的纵坐标值y1，该开区间的右区间为元素A的纵坐标值y1与该宽度值h1的和。依然以如图3A中的元素A为例，该元素A对应的纵坐标范围为(y1，y1+h1)。

然后，该服务器可以判断该历史点击操作在第二页面对应的横坐标值是否在该横坐标范围内，以及，判断该历史点击操作在第二页面对应的纵坐标值是否在该纵坐标范围内。为便于理解，依然以如图3A中的元素A为例，假设某一历史点击操作在该第二页面中的坐标值为(xi，yi)，其中，xi为该点击操作的横坐标，用于表示该点击操作在该第二页面中水平方向的位置，yi为该点击操作的纵坐标，用于表示该点击操作在该第二页面中竖直方向的位置。本实施例中，如果x1<xi<x1+w1且y1<yi<y1+h1成立，则该历史点击操作在第二页面对应的横坐标值在该横坐标范围内，且该历史点击操作在第二页面对应的纵坐标值在该纵坐标范围内，则服务器执行步骤S3。还应理解的是，如果x1<xi<x1+w1且y1<yi<y1+h1成立，则该点击操作对应的元素为该坐标(x1，y1)对应的元素，即元素A，也就是说，该用户的点击操作的意图为点击该第二页面中的元素A以进入下一个页面或者获知更多的关于元素A的信息，具体此处不做限定。

S3、确定该历史点击操作在该第二页面对应的位置位于该元素在第二页面对应的区域内；

本实施例中，若该历史点击操作在第二页面对应的横坐标值在该横坐标范围内，且该历史点击操作在第二页面对应的纵坐标值在该纵坐标范围内，则该服务器确定该历史点击操作在该第二页面对应的位置位于该元素在第二页面对应的区域内。

除此之外，该服务器确定了该历史点击操作在该第二页面对应的位置位于该元素在第二页面对应的区域内之后，该服务器便可以确定该点击操作是有效的，则该服务器将执行步骤S4。

S4、确定该历史点击操作对应的相对位置信息，并将该相对位置信息与该元素标识对应存储。

本实施例中，若该历史点击操作在该第二页面对应的位置位于该元素在该第二页面对应的区域内，则根据该元素在该第二页面对应的位置以及该历史点击操作在第二页面对应的位置确定该历史点击操作对应的相对位置信息，该相对位置信息指该点击操作在该第二页面中与该被点击的元素的相对坐标值，该相对坐标值等于该历史点击操作在第二页面对应的坐标值减去该元素在第二页面对应的坐标值。为方便理解，本申请实施例以图3A为例进行介绍。如图3A中所示的手指所指向的位置代表用户的点击操作在该第二页面中的位置，该点击操作在该第二页面中的坐标值为(xi，yi)，该元素A在该第二页面中的坐标值为(x1，y1)，所以，该相对坐标值为(Δx，Δy)，其中，Δx＝xi-x1，Δy＝yi-y1。然后，该服务器将该相对坐标值与该元素A的元素标识对应存储，以便于该服务器通过查找该元素A的元素标识可以确定该相对坐标信息。由于，用户每做出一次点击操作该服务器记录的是该点击操作与该被点击的元素的相对位置信息，所以，即使该元素在该第二页面中的位置放生了改变，该相对位置信息依然可以准确地保留用户在做出点击操作时的位置信息。

203、根据该相对位置信息以及该元素在该第一页面中对应的位置确定每次历史点击操作在该第一页面对应的位置；

本实施例中，当服务器获取与该元素标识对应的历史点击信息之后，由于该历史点击信息是在第二页面中该点击操作相对于该第二页面中的元素的位置信息，所以，在该第一页面中，该元素的位置可能发生的变化，于是，针对每次历史点击操作，服务器将该历史点击操作的相对坐标值加上该元素在该第一页面对应的坐标值得到该历史点击操作在第一页面对应的坐标值。本实施例中，依然以元素A为例进行介绍，假设在该第一页面中，该元素A的位置如图3B所示，其中，相对坐标值为(Δx，Δy)，该元素A在该第一页面中的坐标值为(x2，y2)，则该点击操作在该第一页面中的坐标值为(xj，yj)，其中，xj＝x2+Δx，yj＝y2+Δy。类似地，该服务器可以将第一页面中的元素的所有的历史点击信息都换算为该第一页面中对应的位置，以便后期绘制热力图。

204、向终端设备发送该每次历史点击操作在该第一页面对应的位置，以使得该终端设备在该第一页面上显示热力图。

本实施例中，该服务器在确定了每次历史点击操作在该第一页面对应的位置之后，可以将这些位置信息发送给终端设备，以使得该终端设备在该第一页面上绘制热力图。本实施例中的终端设备可以是手机、个人计算机(personal computer，PC)或者掌上电脑(personal digital assistant，PDA)，具体此处不做限定。

本实施例中，每次历史点击操作在该第一页面对应的位置可以用目标坐标值来表示。当该终端设备接收到这些目标坐标值时，该终端设备可以在该第一页面上建立一张画布，该画布与该第一页面的尺寸相同且该画布所建的坐标系与该第一页面的坐标系重合，例如，如果，该第一页面的宽度值为w3，高度值为h3，则设置宽度值为w3且高度值为h3的画布覆盖在该第一页面之上。然后，终端设备设置灰度圆形半径r和透明度alpha值，具体的，该灰度圆形半径和透明度可以根据用户的需求做出适当的调整，具体此处不做限定。然后，在该画布上的目标坐标值对应的位置处绘制灰度圆得到灰度图，该灰度圆用于表示用户曾在此处发生过点击操作。应当理解的是，在页面中的同一个位置可能发生多次点击操作，而每一次点击操作都对应一个灰度圆，那么，当多个灰度圆之间产生重叠时，重叠的部分的灰度将加深，以此来表示此处被频繁点击。

由于点击操作产生重叠的部分的灰度加深可能会遮盖该第一页面的信息，导致用户看不清楚该第一页面中的部分元素。所以，该终端设备还需要设置热力图调色盘，以不同的颜色和亮度来显示用户点击操作的位置。本实施例中，该终端设备可以选取3个或3个以上的颜色值，具体此处不做限定。在本实施例以及后续实施例中，仅以颜色值1(rgb1)，颜色值2(rgb2)，颜色值3(rgb3)，以及颜色值4(rgb4)，这4种颜色为例进行介绍。本实施例中，将这四中颜色作为热力图基本色，例如，红(255，255，0)，黄(255，255，0)，绿(0，255，0)，黑(0，0，0)表示热力图从高亮到暗淡的色彩分布。于是，可以在灰度图中填充渐变色得到由不同颜色绘制而成的热力图，该渐变色可以由rgb1渐变至rgb2，再由rgb2渐变至rgb3，再由rgb3渐变至rgb4。通过观察该热力图中的颜色的分布以及明亮度可以确定该第一页面中的元素被点击的情况。例如，该第一页面中的元素A上面呈现出大面积的红色，则可以确定该元素A频繁地被用户点击，进而确定用户喜欢与元素A链接的页面。如果，该热力图中存在大面积的红色，但是与该红色阴影对应的第一页面中的元素并不包含链接，例如，该元素可能就只是一张图片，此时，则可以猜测该发生点击操作的用户可能想进一步查看该图片，或者想了解关于该图片的其他信息，所以，运维人员便可以通过该热力图分析出的结果修改该第一页面中的元素布局，以进一步确定网站的发展方向决策和运营销售决策等。

需要注意的是，本实施例中，该服务器也可以采用步骤204中的方法在服务器内部绘制热力图，然后，该服务器将该热力图发送给终端设备。于是，终端设备可以直接在显示器上显示该热力图。

上面对该网页数据处理方法的原理进行了详细的解释，下面本实施例结合具体的数据对该网页数据处理方法进行更详细的介绍。

本实施例中，服务器可以监控多个用户对网页的点击操作，并且记录与这些点击操作相关的信息。以图4A所示的页面为例，用户在使用终端设备时进入该页面，该页面中有多个元素，其中包括：搜索栏、“购物”、“钱包”、“活动”和“消息”这些元素，为便于表述，称搜索栏为元素1，“购物”为元素2，具体的如图4A所示，此处不再赘述。具体地，由于不同用户可以对同一元素执行点击操作，所以，对同一元素的历史点击操作可能来自于不同的用户，例如，图4B所示的作用于元素1的点击操作1来自于用户A，而作用于元素1的点击操作2来自于用户B。当然，用户除了可以对元素2执行点击操作以外还可能对其他元素执行点击操作，如图4C所示，元素1和元素4都可能被用户点击。还应理解的是，如果运维人员对该页面中的元素的位置调整，服务器依然可以记录用户对该页面中的元素的点击操作，如图4D所示，该页面中的元素2与元素5的位置被对换，服务器依然可以记录点击操作4对元素5的点击操作，以及点击操作5对元素2的点击操作。由于第二页面指产生历史点击操作的页面，所以，图4A、图4B、图4C以及图4D所示的页面都是第二页面。

本实施例中，服务器可以记录用户的每次点击操作，每次点击操作在该第二页面中的坐标值如图5A所示，每次点击操作的相对坐标值如表1所示。应当注意的是，该页面的坐标的建立方式如图5A所示，以页面的左上角为原点，以竖直向下方向为y轴的方向，以水平向右为x轴正方向。图中坐标值的具体单位不做限定，本实施例仅以每一单位距离代表20个像素点为例进行介绍。本实施例中，仅以图5A中的10次点击操作，以及图5B中的两次点击操作为例进行介绍，在实际应用中某一页面中的用户的点击操作的数量可达成百上千次，本实施例仅仅为了方便计算才以这12次点击操作为例，具体此处不做限定。图5A中的10次点击操作所对应的点击操作信息如表1所示：

表1

以该表1中的第一行为例，该点击操作3作用于元素1上，该点击在该第二页面中的坐标值为C(125,40)，也就是说，该点击操作3在以页面的左上角为原点，以竖直向下方向为y轴的方向，以水平向右为x轴正方向的坐标系中的坐标值为C(125,40)。由于该元素1所对应的基准参考点为a(5,20)，所以，该点击操作3相对于该基准参考点a的横坐标Δx＝125-5＝120，该点击操作3相对于该基准参考点a的纵坐标Δy＝40-20＝20，所以，该点击操作相对于该基准参考点a的相对坐标值为ΔC(120,20)，然后，该服务器将该相对坐标值与该元素1的元素标识对应存储。

类似的，该服务器可以计算出其他几次点击操作相对于基准参考点的坐标值，并与该点击操作所作用的元素的元素标识对应存储，具体结果如表1所示，具体此处不再赘述。

当用户想要查看如图5B所示的第一页面的热力图时，该用户向服务器发送查看热力图的请求，然后，该服务器可以通过第一页面中的元素的元素标识确定该第一页面中有哪些元素，并且，确定这些元素在该第一页面中的哪些位置，具体的请参阅步骤201。如图5B所示，该第一页面中有5个元素，其中，元素1、元素3和元素4在该第一页面中的位置与这些元素在第二页面中的位置相同，但是，元素2和元素5在该第一页面中的位置与元素2和元素5在该第二页面中的位置不同，因此，元素2和元素5在该第一页面中的基准参考点的坐标值也发生了变化，该元素2的基准参考点b’的坐标值为b’(120,195)，该元素5的基准参考点e’的坐标值为e’(15,85)，具体的如表2所示。需要注意的是，图5B中的两次点击操作是页面发生调整后，服务器所记录的用户的点击操作，这两次点击操作信息如表2所示：

表2

然后，该服务器获取历史点击信息，这些历史点击信息包括前文计算的每次点击操作相对于基准参考点的相对坐标值，具体的如表1和表2所示。由于，已知各个元素在该第一页面中的基准参考点的坐标值，以及每次点击操作相对于该被点击的元素的位置所对应的坐标值，则该服务器可以计算出在该第二页面中发生的点击操作所对应的坐标值转换到该第一页面中的坐标值。为便于理解，此处以作用于元素2的点击操作2为例，此次点击操作在该第二页面中相对于该基准参考点b(15,85)的相对坐标值为ΔB(87,15)，由于，此时在该第一页面中，该元素2的基准参考点b’的坐标值为b’(120,195)，则可以计算出该点击操作2在该第一页面中的横坐标为x’＝120+87＝207，该点击操作2在该第一页面中的纵坐标为y’＝195+15＝210，于是，可以得到该点击操作2在该第一页面中的坐标值为B’(207,210)。类似的，可以计算出其他点击操作在该第一页面中的坐标值，具体结果如表3所示。

表3

然后，服务器向终端设备发送该每次历史点击操作在该第一页面对应的坐标值，以使得终端设备在该第一页面上绘制热力图。其中，该终端设备绘制热力图的步骤如下：

一、绘制灰度图像：

该终端设备将获取该第一页面的宽度值与高度值，如图5C所示，该宽度值w3＝200，该高度值h3＝300。然后，在该第一页面上新建画布1，并且，设置该画布的宽度值为200,高度值为300，然后，设置灰度圆形半径r＝5，以及透明度alpha值。然后，终端设备将每次点击操作对应的坐标值在该画布对应的位置处绘制灰度圆，具体的以点击操作2在该第一页面中所对应的坐标值B’(207,210)为例。该处理装置将在该画布中绘制以(207,210)为圆心，半径r为5的圆，并设置该圆形的透明度为alpha1。类似地，该终端设备将该第一页面中的所有坐标值都绘制成该画布中的灰度圆，得到灰度图像如图5C所示。

二、设置热力图调色盘：

该终端设备新建与画布1同样尺寸的画布2，并且选取3个或3个以上的颜色值作为热力图基本色，具体此处不做限定。在本实施例以及后续实施例中，仅以颜色值1(rgb1)，颜色值2(rgb2)，颜色值3(rgb3)，以及颜色值4(rgb4)，这4种颜色为例进行介绍。本实施例中，将这四中颜色作为热力图基本色，例如，红(255，255，0)，黄(255，255，0)，绿(0，255，0)，黑(0，0，0)表示热力图从高亮到暗淡的色彩分布。于是，可以在灰度图中填充渐变色得到由不同颜色绘制而成的热力图，该渐变色可以由rgb1渐变至rgb2，再由rgb2渐变至rgb3，再由rgb3渐变至rgb4。

三、获取热力图像素颜色值：

该终端设备获取透明度值alpha2，然后，将alpha2除以255再乘以画布2的宽度值200，得到调色盘色彩位置x4，然后确定与该位置x4对应的像素RGB值为rgb5并设置对应的透明度为alpha3。类似的可以将其他的灰度圆进行设置，从而得到该第一页面所对应的热力图。

然后，用户可以根据该热力图获知图4A中的各个元素被用户点击的情况，显然，该热力图中颜色越深亮度越亮的位置则是发生点击操作的次数越多的位置。进一步地，普通用户可以获知其他用户的喜好，而运维人员可以根据用户的喜好准确地制定网站的发展方向决策和运营销售决策。

本申请实施例中，服务器先获取了第一页面中元素的元素标识以及与该元素标识对应的历史点击操作的相对位置信息，然后，服务器根据该相对位置信息以及该元素在该第一页面对应的位置确定每次历史点击操作在该第一页面对应的位置，然后，服务器采用该每次历史点击操作在该第一页面对应的位置绘制该第一页面的热力图。由于，服务器获取的是每次历史点击操作的相对位置信息，并且，该相对位置信息是根据该历史点击操作在第二页面对应的位置以及该元素在该第二页面对应的位置确定的，也就是说，服务器获取到的是每次历史点击操作相对于该点击操作所对应的元素的位置信息，当元素所在位置发生移动时，每次历史点击操作相对于该点击操作所对应的元素的位置信息是不变的，所以，服务器根据该相对位置信息以及该元素在该第一页面对应的位置确定的每次历史点击操作在该第一页面对应的位置是准确的，因此，采用该每次历史点击操作在该第一页面对应的位置绘制的第一页面的热力图是准确的，因此，提高了该热力图的参考价值。

下面对本实施例中的服务器600进行介绍，如图6所示，是本实施例提供的一种服务器600结构示意图，该服务器600可因配置或性能不同而产生比较大的差异，可以包括一个或一个以上处理器(central processing units，CPU)601和存储器602，一个或一个以上存储应用程序或数据的存储介质603(例如一个或一个以上海量存储设备)。其中，存储器602和存储介质603可以是短暂存储或持久存储。更进一步地，处理器601可以设置为与存储介质603通信，处理器601用于执行存储介质603中的应用程序，具体地包括如下步骤：

确定第一页面中位置可修改的元素的元素标识，该第一页面为目标网页对应的页面中需要绘制热力图的页面；

获取与该元素标识对应的历史点击信息，该历史点击信息包括至少一次历史点击操作的相对位置信息，该相对位置信息是根据该历史点击操作在第二页面对应的位置以及该元素在该第二页面对应的位置确定的；

根据该相对位置信息以及该元素在该第一页面中对应的位置确定每次历史点击操作在该第一页面对应的位置。

除此之外，该服务器还包括输入/输出设备605，用于向终端设备发送该每次历史点击操作在该第一页面对应的位置，以使得该终端设备在该第一页面上显示热力图，该热力图用于展示该元素被点击的热度。

可选的，该处理器601还用于执行如下步骤：

针对每一次历史点击操作，确定该历史点击操作在该第二页面对应的位置；

若该历史点击操作在该第二页面对应的位置位于该元素在该第二页面对应的区域内，则根据该元素在该第二页面对应的位置以及该历史点击操作在第二页面对应的位置确定该历史点击操作对应的相对位置信息，并将该相对位置信息与该元素标识对应存储。

可选的，该处理器601具体用于执行如下步骤：

将该历史点击操作在第二页面对应的坐标值减去该元素在第二页面对应的坐标值得到的相对坐标值；

根据该相对位置信息以及该元素在该第一页面对应的位置确定每次历史点击操作在该第一页面对应的位置包括：

针对每次历史点击操作，该将该历史点击操作的相对坐标值加上该元素在该第一页面对应的坐标值得到该历史点击操作在第一页面对应的坐标值。

可选的，该处理器601还用于执行如下步骤：

确定该元素在该第二页面对应的横坐标值，纵坐标值，宽度值以及高度值，该宽度值指该元素在第二页面中的水平方向的几何尺寸，该高度值指该元素在第一页面中的竖直方向的几何尺寸。

根据该横坐标值以及该宽度值确定横坐标范围，根据该纵坐标以及该高度值确定纵坐标范围；

若该历史点击操作在第二页面对应的横坐标值在该横坐标范围内，且该历史点击操作在第二页面对应的纵坐标值在该纵坐标范围内，则确定该历史点击操作在该第二页面对应的位置位于该元素在第二页面对应的区域内。

可选的，该处理器601具体用于执行如下步骤：

向终端设备发送目标坐标值，以使得该终端设备在该目标坐标值对应的位置绘制热力图，该目标坐标值用于表示该历史点击操作在该第一页面对应的位置，该热力图用于展示各个元素被点击的热度。

可选的，该处理器601具体用于执行如下步骤：

在该历史点击操作在该第一页面对应的位置绘制灰度圆得到灰度图；

设置该灰度图中的灰度圆的颜色和亮度得到热力图，该热力图用于展示各个元素被点击的热度；

向终端设备发送该热力图，以使得该终端设备在该第一页面上显示热力图。

可选的，该处理器601具体用于执行如下步骤：

获取第一页面中所有元素的元素标识；

判断该元素标识中是否存在位置可修改的元素的元素标识；

若该元素标识中存在位置可修改的元素的元素标识，则确定该位置可修改的元素的元素标识。

应理解，该服务器600还可以包括一个或一个以上电源604，和/或，一个或一个以上操作系统，例如Windows ServerTM，Mac OS XTM，UnixTM，LinuxTM，FreeBSDTM等。

还应理解，上述图2所对应的方法实施例中，该服务器所执行的步骤均可以基于该图6所示的服务器600结构。

本实施例中，处理器601先获取了第一页面中元素的元素标识以及与该元素标识对应的历史点击操作的相对位置信息，然后，该处理器601根据该相对位置信息以及该元素在该第一页面对应的位置确定每次历史点击操作在该第一页面对应的位置，然后，该处理器601采用该每次历史点击操作在该第一页面对应的位置绘制该第一页面的热力图。由于，该处理器601获取的是每次历史点击操作的相对位置信息，并且，该相对位置信息是根据该历史点击操作在第二页面对应的位置以及该元素在该第二页面对应的位置确定的，也就是说，该处理器601获取到的是每次历史点击操作相对于该点击操作所对应的元素的位置信息，当元素所在位置发生移动时，每次历史点击操作相对于该点击操作所对应的元素的位置信息是不变的，所以，该处理器601根据该相对位置信息以及该元素在该第一页面对应的位置确定的每次历史点击操作在该第一页面对应的位置是准确的，因此，采用该每次历史点击操作在该第一页面对应的位置绘制的第一页面的热力图是准确的，因此，提高了该热力图的参考价值。

下面对本实施例中的服务器700进行介绍，如图7所示，本实施例中服务器700的一个实施例包括：

第一确定模块701，用于确定第一页面中位置可修改的元素的元素标识，该第一页面为目标网页对应的页面中需要绘制热力图的页面；

获取模块702，用于获取与该元素标识对应的历史点击信息，该历史点击信息包括至少一次历史点击操作的相对位置信息，该相对位置信息是根据该历史点击操作在第二页面对应的位置以及该元素在该第二页面对应的位置确定的；

第二确定模块703，用于根据该相对位置信息以及该元素在该第一页面中对应的位置确定每次历史点击操作在该第一页面对应的位置；

发送模块704，用于向终端设备发送该每次历史点击操作在该第一页面对应的位置，以使得该终端设备在该第一页面上显示热力图，该热力图用于展示该元素被点击的热度。

该服务器700还包括：

第三确定模块705，用于针对每一次历史点击操作，确定该历史点击操作在该第二页面对应的位置；

第四确定模块706，用于当该历史点击操作在该第二页面对应的位置位于该元素在该第二页面对应的区域内时，根据该元素在该第二页面对应的位置以及该历史点击操作在第二页面对应的位置确定该历史点击操作对应的相对位置信息，并将该相对位置信息与该元素标识对应存储。

该第四确定模块706包括：

第一计算子模块7061，用于将该历史点击操作在第二页面对应的坐标值减去该元素在第二页面对应的坐标值得到的相对坐标值；

该第二确定模块703包括：

第二计算子模块7031，用于针对每次历史点击操作，将该历史点击操作的相对坐标值加上该元素在该第一页面对应的坐标值得到该历史点击操作在第一页面对应的坐标值。

该服务器700还包括：

第五确定模块707，用于确定该元素在该第二页面对应的横坐标值，纵坐标值，宽度值以及高度值，该宽度值指该元素在第二页面中的水平方向的几何尺寸，该高度值指该元素在第一页面中的竖直方向的几何尺寸。

第六确定模块708，用于根据该横坐标值以及该宽度值确定横坐标范围，根据该纵坐标以及该高度值确定纵坐标范围；

第七确定模块709，用于当该历史点击操作在第二页面对应的横坐标值在该横坐标范围内，且该历史点击操作在第二页面对应的纵坐标值在该纵坐标范围内时，确定该历史点击操作在该第二页面对应的位置位于该元素在第二页面对应的区域内。

该发送模块704包括：

第一发送子模块7041，用于向终端设备发送目标坐标值，以使得该终端设备在该目标坐标值对应的位置绘制热力图，该目标坐标值用于表示该历史点击操作在该第一页面对应的位置，该热力图用于展示各个元素被点击的热度。

该发送模块704还包括：

绘制子模块7042，用于在该历史点击操作在该第一页面对应的位置绘制灰度圆得到灰度图；

设置子模块7043，用于设置该灰度图中的灰度圆的颜色和亮度得到热力图，该热力图用于展示各个元素被点击的热度；

第二发送子模块7044，用于向终端设备发送该热力图，以使得该终端设备在该第一页面上显示热力图。

该第一确定模块701包括：

获取子模块7011，用于获取第一页面中所有元素的元素标识；

判断子模块7012，用于判断该元素标识中是否存在位置可修改的元素的元素标识；

确定子模块7013，用于当该元素标识中存在位置可修改的元素的元素标识时，确定该位置可修改的元素的元素标识。

本实施例中，服务器700的第一确定模块701确定了第一页面中元素的元素标识，并且，该服务器700的获取模块702获取了该元素标识对应的历史点击操作的相对位置信息，然后，该服务器700的第二确定模块703根据该相对位置信息以及该元素在该第一页面对应的位置确定每次历史点击操作在该第一页面对应的位置，然后，服务器700发送该历史点击操作的相关数据给终端设备，以使得该终端设备采用该每次历史点击操作在该第一页面对应的位置绘制该第一页面的热力图。由于，服务器700获取的是每次历史点击操作的相对位置信息，并且，该相对位置信息是根据该历史点击操作在第二页面对应的位置以及该元素在该第二页面对应的位置确定的，也就是说，服务器700获取到的是每次历史点击操作相对于该点击操作所对应的元素的位置信息，当元素所在位置发生移动时，每次历史点击操作相对于该点击操作所对应的元素的位置信息是不变的，所以，服务器700根据该相对位置信息以及该元素在该第一页面对应的位置确定的每次历史点击操作在该第一页面对应的位置是准确的，因此，采用该每次历史点击操作在该第一页面对应的位置绘制的第一页面的热力图是准确的，因此，提高了该热力图的参考价值。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统，装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

在本申请所提供的几个实施例中，应该理解到，所揭露的系统，装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，该单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

该作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

该集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例该方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(read-only memory，ROM)、随机存取存储器(random access memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。

以上实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的精神和范围。

Claims (14)

1.一种网页数据处理方法，其特征在于，包括：

服务器确定第一页面中位置可修改的元素的元素标识，所述第一页面为目标网页对应的页面中需要绘制热力图的页面；

所述服务器获取与所述元素标识对应的历史点击信息，所述历史点击信息包括至少一次历史点击操作的相对位置信息，所述相对位置信息是根据所述历史点击操作在第二页面对应的位置以及所述元素在所述第二页面对应的位置确定的；

所述服务器根据所述相对位置信息以及所述元素在所述第一页面中对应的位置确定历史点击操作在所述第一页面对应的位置；

所述服务器向终端设备发送所述历史点击操作在所述第一页面对应的位置，以使得所述终端设备在所述第一页面上显示热力图，所述热力图用于展示所述元素被点击的热度。

2.根据权利要求1所述的方法，其特征在于，所述服务器获取与所述元素标识对应的历史点击信息之前，所述方法还包括：

针对每一次历史点击操作，所述服务器确定所述历史点击操作在所述第二页面对应的位置；

若所述历史点击操作在所述第二页面对应的位置位于所述元素在所述第二页面对应的区域内，则所述服务器根据所述元素在所述第二页面对应的位置以及所述历史点击操作在第二页面对应的位置确定所述历史点击操作对应的相对位置信息，并将所述相对位置信息与所述元素标识对应存储。

3.根据权利要求2所述的方法，其特征在于，所述服务器根据所述元素在第二页面对应的位置以及所述历史点击操作在第二页面对应的位置确定所述历史点击操作对应的相对位置信息包括：

所述服务器将所述历史点击操作在第二页面对应的坐标值减去所述元素在第二页面对应的坐标值得到的相对坐标值；

所述服务器根据所述相对位置信息以及所述元素在所述第一页面对应的位置确定历史点击操作在所述第一页面对应的位置包括：

针对每次历史点击操作，所述服务器将所述历史点击操作的相对坐标值加上所述元素在所述第一页面对应的坐标值得到所述历史点击操作在第一页面对应的坐标值。

4.根据权利要求2所述的方法，其特征在于，所述方法还包括：

所述服务器确定所述元素在所述第二页面对应的横坐标值，纵坐标值，宽度值以及高度值，所述宽度值指所述元素在第二页面中的水平方向的几何尺寸，所述高度值指所述元素在第一页面中的竖直方向的几何尺寸；

所述服务器根据所述横坐标值以及所述宽度值确定横坐标范围，根据所述纵坐标以及所述高度值确定纵坐标范围；

若所述历史点击操作在第二页面对应的横坐标值在所述横坐标范围内，且所述历史点击操作在第二页面对应的纵坐标值在所述纵坐标范围内，则所述服务器确定所述历史点击操作在所述第二页面对应的位置位于所述元素在第二页面对应的区域内。

5.根据权利要求1所述的方法，其特征在于，所述服务器向终端设备发送所述历史点击操作在所述第一页面对应的位置，以使得所述终端设备在所述第一页面上显示热力图，所述热力图用于展示各个元素被点击的热度包括：

所述服务器向终端设备发送目标坐标值，以使得所述终端设备在所述目标坐标值对应的位置绘制热力图，所述目标坐标值用于表示所述历史点击操作在所述第一页面对应的位置，所述热力图用于展示各个元素被点击的热度。

6.根据权利要求1所述的方法，其特征在于，所述服务器向终端设备发送所述历史点击操作在所述第一页面对应的位置，以使得所述终端设备在所述第一页面上显示热力图，所述热力图用于展示各个元素被点击的热度包括：

所述服务器在所述历史点击操作在所述第一页面对应的位置绘制灰度圆得到灰度图；

所述服务器设置所述灰度图中的灰度圆的颜色和亮度得到热力图，所述热力图用于展示各个元素被点击的热度；

所述服务器向终端设备发送所述热力图，以使得所述终端设备在所述第一页面上显示热力图。

7.根据权利要求1所述的方法，其特征在于，所述服务器确定第一页面中位置可修改的元素的元素标识包括：

所述服务器获取第一页面中所有元素的元素标识；

所述服务器判断所述元素标识中是否存在位置可修改的元素的元素标识；

若所述元素标识中存在位置可修改的元素的元素标识，则所述服务器确定所述位置可修改的元素的元素标识。

8.一种服务器，其特征在于，包括：

处理器、存储器、总线以及输入/输出设备；

所述处理器、所述存储器以及所述输入/输出设备与所述总线连接；

所述存储器用于存储程序；

所述处理器用于执行所述程序，具体包括如下步骤：

确定第一页面中位置可修改的元素的元素标识，所述第一页面为目标网页对应的页面中需要绘制热力图的页面；

获取与所述元素标识对应的历史点击信息，所述历史点击信息包括至少一次历史点击操作的相对位置信息，所述相对位置信息是根据所述历史点击操作在第二页面对应的位置以及所述元素在所述第二页面对应的位置确定的；

根据所述相对位置信息以及所述元素在所述第一页面中对应的位置确定每次历史点击操作在所述第一页面对应的位置；

所述输入/输出设备，用于向终端设备发送所述每次历史点击操作在所述第一页面对应的位置，以使得所述终端设备在所述第一页面上显示热力图，所述热力图用于展示所述元素被点击的热度。

9.根据权利要求8所述的服务器，其特征在于，所述处理器还用于执行如下步骤：

针对每一次历史点击操作，确定所述历史点击操作在所述第二页面对应的位置；

若所述历史点击操作在所述第二页面对应的位置位于所述元素在所述第二页面对应的区域内，则根据所述元素在所述第二页面对应的位置以及所述历史点击操作在第二页面对应的位置确定所述历史点击操作对应的相对位置信息，并将所述相对位置信息与所述元素标识对应存储。

10.根据权利要求9所述的服务器，其特征在于，所述处理器具体用于执行如下步骤：

将所述历史点击操作在第二页面对应的坐标值减去所述元素在第二页面对应的坐标值得到的相对坐标值；

根据所述相对位置信息以及所述元素在所述第一页面对应的位置确定每次历史点击操作在所述第一页面对应的位置包括：

针对每次历史点击操作，所述将所述历史点击操作的相对坐标值加上所述元素在所述第一页面对应的坐标值得到所述历史点击操作在第一页面对应的坐标值。

11.根据权利要求9所述的服务器，其特征在于，所述处理器还用于执行如下步骤：

确定所述元素在所述第二页面对应的横坐标值，纵坐标值，宽度值以及高度值，所述宽度值指所述元素在第二页面中的水平方向的几何尺寸，所述高度值指所述元素在第一页面中的竖直方向的几何尺寸；

根据所述横坐标值以及所述宽度值确定横坐标范围，根据所述纵坐标以及所述高度值确定纵坐标范围；

若所述历史点击操作在第二页面对应的横坐标值在所述横坐标范围内，且所述历史点击操作在第二页面对应的纵坐标值在所述纵坐标范围内，则确定所述历史点击操作在所述第二页面对应的位置位于所述元素在第二页面对应的区域内。

12.根据权利要求8所述的服务器，其特征在于，所述输入/输出设备具体用于执行如下步骤：

向终端设备发送目标坐标值，以使得所述终端设备在所述目标坐标值对应的位置绘制热力图，所述目标坐标值用于表示所述历史点击操作在所述第一页面对应的位置，所述热力图用于展示各个元素被点击的热度。

13.根据权利要求8所述的服务器，其特征在于，所述处理器具体用于执行如下步骤：

在所述历史点击操作在所述第一页面对应的位置绘制灰度圆得到灰度图；

设置所述灰度图中的灰度圆的颜色和亮度得到热力图，所述热力图用于展示各个元素被点击的热度；

所述输入/输出设备具体用于执行如下步骤：

向终端设备发送所述热力图，以使得所述终端设备在所述第一页面上显示热力图。

14.根据权利要求8所述的服务器，其特征在于，所述处理器具体用于执行如下步骤：

获取第一页面中所有元素的元素标识；

判断所述元素标识中是否存在位置可修改的元素的元素标识；

若所述元素标识中存在位置可修改的元素的元素标识，则确定所述位置可修改的元素的元素标识。

Images