CN111240947B - 页面热力图生成方法及系统 - Google Patents

Abstract

本公开提供了一种页面热力图生成方法，包括：在第一服务器端生成Dcoker镜像并启动一Dcoker容器；在Dcoker容器中运行客户端模拟器；在客户端模拟器中运行第一客户端；对第一客户端中与指定对象关联的页面进行页面截图操作；以及将截得的多张页面快照，或者将由多张页面快照拼接出的与页面相同的第一页面，发送给第二服务器，其中，第二服务器能够基于多张页面快照拼接出与页面相同的第二页面，并在第二页面上添加线上埋点数据，从而生成关于指定对象的页面热力图，或者能够直接在第一页面上添加线上埋点数据，从而生成关于指定对象的页面热力图。本公开还提供了一种页面热力图生成系统，另外两种页面热力图生成方法及其系统，一种计算机系统和一种介质。

Description

页面热力图生成方法及系统

技术领域

本公开涉及互联网技术领域，更具体地，涉及多种页面热力图生成方法及其系统，一种计算机系统和一种计算机可读存储介质。

背景技术

随着大数据、移动互联网技术的迅速发展，数据在社会发展中扮演着越来越重要的角色。特别是在电商领域，对用户的浏览、点击等用户行为数据进行采集、分析，并利用大数据分析挖掘技术，可以对用户进行人物画像，从而实现对不同用户进行精准产品推荐和消息推送，让用户可以快速、方便地触达到自己喜欢的商品。同时，从商家角度来看，通过分析用户的浏览、点击等用户行为数据，则能快速了解自家商品的线上销售/营销效果，并且还能更好地了解消费者、增加用户黏性。

目前，商家一般会通过商家热力图来了解消费者以及自家商品的线上销售/营销效果。

现有的商家热力图生成方案，一种典型的方式是通过M站(即手机网页端的页面，也就是mobile移动端)提供一套跟客户端App相同的页面快照，然后由热力图快照系统将线上通过埋点技术监控用户的浏览、点击等行为上传的埋点数据绑定到对应的页面快照上，从而生成商家热力图，供商家直观地了解App页面用户的使用情况。

然而，在实现本公开构思的过程中，发明人发现：如图1所示，由M站提供一套跟线上App具有相同样式和功能的页面快照，需要将页面对应的URL提供到热力图快照系统，当商家在后台查看热力图时，M站请求服务端接口获取页面渲染数据，同时热力图快照系统在M站页面上绑定线上用户的埋点数据，从而生成热力图。

因此，基于M站提供的页面快照生成热力图的方案，存在以下问题：1.需要单独开发一套M站页面；2.需要使M站页面和App页面保持一致。但是，在实际开发过程中，由于涉及到不同团队，不同开发迭代计划以及具体技术实现方案的不同等影响，经常出现M站页面和客户端页面开发不同步，页面展示和交互样式存在差异，导致最终生成的热力图展示不完整，跟App不一样，影响商家体验。

发明内容

有鉴于此，本公开提供了一种能够在服务器端模拟客户端并提供页面截图的页面热力图生成方法和系统。

本公开的一个方面提供了一种页面热力图生成方法，包括：在第一服务器端生成Dcoker镜像并启动一Dcoker容器；在上述Dcoker容器中运行客户端模拟器；在上述客户端模拟器中运行第一客户端；对上述第一客户端中与指定对象关联的页面进行页面截图操作；以及将截得的多张页面快照，或者将由上述多张页面快照拼接出的与上述页面相同的第一页面，发送给第二服务器，其中，上述第二服务器能够基于上述多张页面快照拼接出与上述页面相同的第二页面，并在上述第二页面上添加线上埋点数据，从而生成关于上述指定对象的页面热力图，或者能够直接在上述第一页面上添上述加线上埋点数据，从而生成关于上述指定对象的页面热力图。

根据本公开的实施例，上述对上述第一客户端中与指定对象关联的页面进行页面截图操作，包括：对上述页面的头部组件和底部组件直接采用预定API进行截图，得到一头部快照和一底部快照；以及对上述页面中可滚动的长图组件，依次遍历组件内的所有楼层，并采用预定延时机制，分别对每个楼层采用上述预定API进行截图，得到多张楼层快照。

根据本公开的实施例，在对上述长图组件进行截图的过程中：针对不同类型的楼层，采用不同的预定延时机制进行截图。

根据本公开的实施例，上述对上述第一客户端中与指定对象关联的页面进行页面截图操作，包括：对上述页面的头部组件和底部组件直接采用预定API进行截图，得到一头部快照和一底部快照；以及对上述页面中可滚动的长图组件，采用预定循环，依次遍历组件内的所有楼层，分别对每个楼层采用上述预定API进行截图，得到多张楼层快照。

根据本公开的实施例，在对上述长图组件进行截图的过程中：获取各楼层中的楼层组件的位置信息和尺寸信息；以及将获取的上述位置信息和上述尺寸信息与对应的楼层快照一起发送给上述第二服务器。

根据本公开的实施例，上述对上述第一客户端中与指定对象关联的页面进行页面截图操作，包括：监听上述页面中是否存在触发操作；如果存在触发操作，则对上述页面进行长图截屏；以及将截屏图片进行去重，得到对应的页面快照。

根据本公开的实施例，上述Dcoker镜像包括多个Dcoker容器；每个Dcoker容器中可运行一个客户端模拟器；以及每个客户端模拟器中可运行一种客户端。

本公开的一个方面提供了另一种页面热力图生成方法，包括：获取来自第一服务器的多张页面快照，其中，上述第一服务器端中生成有Dcoker镜像并有一Dcoker容器被启动，在上述Dcoker容器中运行有客户端模拟器，在上述客户端模拟器中运行有第一客户端，上述多张页面快照是对上述第一客户端中与指定对象关联的页面进行页面截图操作得到的；基于上述多张页面快照拼接出与上述页面相同的页面；以及在拼接出的页面上添加线上埋点数据，以生成关于上述指定对象的页面热力图。

本公开的一个方面提供了另一种页面热力图生成方法，包括：获取来自第一服务器的且由上述第一服务器拼接多张页面快照得到的第一页面，其中，上述第一服务器端中生成有Dcoker镜像并有一Dcoker容器被启动，在上述Dcoker容器中运行有客户端模拟器，在上述客户端模拟器中运行有第一客户端，上述多张页面快照是对上述第一客户端中与指定对象关联的页面进行页面截图操作得到的，上述第一页面和上述第一客户端中与指定对象关联的页面相同；以及在获取的页面上添加线上埋点数据，以生成关于上述指定对象的页面热力图。

本公开的另一个方面提供了一种页面热力图生成系统，包括：第一生成模块，用于在第一服务器端生成Dcoker镜像并启动一Dcoker容器；第一运行模块，用于在上述Dcoker容器中运行客户端模拟器；第二运行模块，用于在上述客户端模拟器中运行第一客户端；截图模块，用于对上述第一客户端中与指定对象关联的页面进行页面截图操作；以及第一发送模块，用于将截得的多张页面快照，或者将由上述多张页面快照拼接出的与上述页面相同的第一页面，发送给第二服务器，其中，上述第二服务器能够基于上述多张页面快照拼接出与上述页面相同的第二页面，并在上述第二页面上添加线上埋点数据，从而生成关于上述指定对象的页面热力图，或者能够直接在上述第一页面上添上述加线上埋点数据，从而生成关于上述指定对象的页面热力图。

本公开的另一个方面提供了另一种页面热力图生成系统，包括：第二获取模块，用于获取来自第一服务器的多张页面快照，其中，上述第一服务器端中生成有Dcoker镜像并有一Dcoker容器被启动，在上述Dcoker容器中运行有客户端模拟器，在上述客户端模拟器中运行有第一客户端，上述多张页面快照是对上述第一客户端中与指定对象关联的页面进行页面截图操作得到的；拼接模块，用于基于上述多张页面快照拼接出与上述页面相同的页面；以及第二生成模块，用于在拼接出的页面上添加线上埋点数据，以生成关于上述指定对象的页面热力图。

本公开的另一个方面提供了另一种页面热力图生成系统，包括：第三获取模块，用于获取来自第一服务器的且由上述第一服务器拼接多张页面快照得到的第一页面，其中，上述第一服务器端中生成有Dcoker镜像并有一Dcoker容器被启动，在上述Dcoker容器中运行有客户端模拟器，在上述客户端模拟器中运行有第一客户端，上述多张页面快照是对上述第一客户端中与指定对象关联的页面进行页面截图操作得到的，上述第一页面和上述第一客户端中与指定对象关联的页面相同；以及第三生成模块，用于在获取的页面上添加线上埋点数据，以生成关于上述指定对象的页面热力图。

本公开的另一方面提供了一种计算机系统，包括：一个或多个处理器；存储器，用于存储一个或多个程序，其中，当上述一个或多个程序被上述一个或多个处理器执行时，使得上述一个或多个处理器实现如上任一项所述的方法。

本公开的另一方面提供了一种计算机可读存储介质，存储有计算机可执行指令，上述指令在被执行时用于实现如上上述的方法。

本公开的另一方面提供了一种计算机程序，上述计算机程序包括计算机可执行指令，上述指令在被执行时用于实现如上所述的方法。

根据本公开的实施例，因为采用了在服务器端部署并运行客户端模拟器，进而在客户端模拟器中安装并运行与用户端完全一致的App来提供页面截图的技术手段，所以至少部分地克服了相关技术中通过M站提供页面截图时，由于M站App跟用户使用的App不一样，从而影响商家体验的技术问题，进而达到了通过在服务器端模拟App来提供页面截图能够与用户使用的App保持一致，从而不影响商家体验的技术效果。

附图说明

通过以下参照附图对本公开实施例的描述，本公开的上述以及其他目的、特征和优点将更为清楚，在附图中：

图1示意性示出了相关技术中页面热力图生成方法的示例性系统架构；

图2示意性示出了可以应用本公开的页面热力图生成方法和系统的示例性系统架构；

图3示意性示出了根据本公开实施例的页面热力图生成方法的流程图；

图4示意性示出了根据本公开实施例的客户端即第一客户端与服务器之间的交互逻辑的示意图；

图5示意性示出了根据本公开实施例的页面的示意图；

图6示意性示出了可以应用本公开的页面热力图生成方法和系统的另一示例性系统架构；

图7示意性示出了根据本公开另一实施例的页面热力图生成方法的流程图；

图8示意性示出了根据本公开另一实施例的页面热力图生成方法的流程图；

图9～图11示意性示出了根据本公开实施例的页面热力图生成系统的框图；以及

图12示意性示出了根据本公开实施例的适于实现页面热力图生成方法及系统的计算机系统的框图。

具体实施方式

以下，将参照附图来描述本公开的实施例。但是应该理解，这些描述只是示例性的，而并非要限制本公开的范围。在下面的详细描述中，为便于解释，阐述了许多具体的细节以提供对本公开实施例的全面理解。然而，明显地，一个或多个实施例在没有这些具体细节的情况下也可以被实施。此外，在以下说明中，省略了对公知结构和技术的描述，以避免不必要地混淆本公开的概念。

在此使用的术语仅仅是为了描述具体实施例，而并非意在限制本公开。在此使用的术语“包括”、“包含”等表明了所述特征、步骤、操作和/或部件的存在，但是并不排除存在或添加一个或多个其他特征、步骤、操作或部件。

在此使用的所有术语(包括技术和科学术语)具有本领域技术人员通常所理解的含义，除非另外定义。应注意，这里使用的术语应解释为具有与本说明书的上下文相一致的含义，而不应以理想化或过于刻板的方式来解释。

在使用类似于“A、B和C等中至少一个”这样的表述的情况下，一般来说应该按照本领域技术人员通常理解该表述的含义来予以解释(例如，“具有A、B和C中至少一个的系统”应包括但不限于单独具有A、单独具有B、单独具有C、具有A和B、具有A和C、具有B和C、和/或具有A、B、C的系统等)。在使用类似于“A、B或C等中至少一个”这样的表述的情况下，一般来说应该按照本领域技术人员通常理解该表述的含义来予以解释(例如，“具有A、B或C中至少一个的系统”应包括但不限于单独具有A、单独具有B、单独具有C、具有A和B、具有A和C、具有B和C、和/或具有A、B、C的系统等)。

本公开的实施例提供了一种能够在服务器端模拟客户端并提供页面截图的页面热力图生成方法和系统。该方法包括在第一服务器端生成Dcoker镜像并启动一Dcoker容器；在Dcoker容器中运行客户端模拟器；在客户端模拟器中运行第一客户端；对第一客户端中与指定对象关联的页面进行页面截图操作；以及将截得的多张页面快照，或者将由多张页面快照拼接出的与页面相同的第一页面，发送给第二服务器，其中，第二服务器能够基于多张页面快照拼接出与页面相同的第二页面，并在第二页面上添加线上埋点数据，从而生成关于指定对象的页面热力图，或者能够直接在第一页面上添加线上埋点数据，从而生成关于指定对象的页面热力图。

图2示意性示出了可以应用本公开的页面热力图生成方法和系统的示例性系统架构。需要注意的是，图2所示仅为可以应用本公开实施例的系统架构的示例，以帮助本领域技术人员理解本公开的技术内容，但并不意味着本公开实施例不可以用于其他设备、系统、环境或场景。

如图2所示，该系统架构中包括两个服务器，一个服务器(即服务器1)运行客户端App，另一个服务器(即服务器2，又称热力图快照服务器)生成页面热力图。

具体地，系统架构实现如下：在服务器1上运行Docker镜像，并在Docker容器中安装客户端模拟器(如Android模拟器)，同时在Docker容器中运行App(如京东购物平台)。实施时，服务器1上安装的App首先访问服务器2，请求页面展示入参，从而确定对哪个页面进行截图操作，再基于服务器2的响应，访问服务器1的服务端接口，请求页面数据进行渲染，并对页面进行页面截图操作，然后将截图图片即页面快照发送给服务器2，最终由服务器2将页面快照拼接成完整的页面，并在其上绑定埋点数据，从而生成相应的页面热力图。

需要说明的是，在另一个方案中，页面快照拼接任务也可以先由服务器1完成，并将拼接后的页面发给服务器2，然后由服务器2跳过快照拼接操作，直接在页面上绑定埋点数据，从而生成相应的页面热力图。

应该理解，图2中的服务器1以及Docker容器中安装的Android模拟器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的服务器1、Docker容器中可以安装任意数目的Android模拟器。

图3示意性示出了根据本公开实施例的页面热力图生成方法的流程图。

结合图2，如图3所示，该方法包括操作S310～S350，其中：

在操作S310，在第一服务器端生成Dcoker镜像并启动一Dcoker容器。

在操作S320，在Dcoker容器中运行客户端模拟器。

在操作S330，在客户端模拟器中运行第一客户端。

具体地，在服务器端(如图2所示的服务器1端)生成基础Dcoker镜像，镜像包括系统运行环境Ubuntu(16.04)、基于此环境搭建的可视化操作界面、客户端模拟器Genymotion，由于APK安装包在服务器上安装存在cpu架构兼容性问题，因此需要Arm-translation转换包、Android-Sdk等。

使用时，首先在服务器端部署Docker镜像并启动Docker容器，运行Ubuntu系统环境，启动远程可视化操作镜像服务，支持可以在用户移动端进行图形界面操作的容器。在图形化操作界面中，安装客户端模拟器Genymotion，根据Apk运行情况，选择性安装Arm-tansaltion转换包，在安装时注意确保客户端模拟器和转换包版本相对应。然后下载配置Android-Sdk环境变量等。此时，服务器端的客户端模拟器运行环境就搭建起来了，可以进行模拟器的安装运行。最后，如果把该环境最终生成Docker基础镜像，还可以快速在多台服务器上进行快速复制部署。

在操作S340，对第一客户端中与指定对象关联的页面进行页面截图操作。

在本公开实施例中，第一客户端可以是互联网购物平台如京东网上商城客户端。第一客户端中的指定对象可以是其中运营的各个商家/店铺。

具体地，执行页面截图操作，可以将第一客户端显示的任意一个完整页面按页面组成截取为多张页面快照。

在操作S350，将截得的多张页面快照，或者将由多张页面快照拼接出的与页面相同的第一页面，发送给第二服务器。

其中，第二服务器能够基于多张页面快照拼接出与页面相同的第二页面，并在第二页面上添加线上埋点数据，从而生成关于指定对象的页面热力图，或者能够直接在第一页面上添加线上埋点数据，从而生成关于指定对象的页面热力图。

具体地，此处包含两种方案，针对某个店铺，一种是第一客户端将截得的页面快照全部都发给第二服务器(如图2所示的服务器2端)，由第二服务器对页面快照进行拼接，从而拼接出与第一客户端显示的页面一模一样的页面，同时第二服务器还会将线上获取的埋点数据绑定在由快照拼接得到的页面上，最终生成该店铺的页面热力图；另一种是第一客户端在截得页面快照后，自行进行拼接，并在拼接出与第一客户端显示的页面一模一样的页面后将拼接得到的页面发送给第二服务器，由第二服务器将线上获取的埋点数据绑定在由快照拼接得到的页面上，最终生成该店铺的页面热力图。

需要说明的是，如果选择第一客户端自行拼接页面快照，则可能导致第一客户端内存溢出。

结合图2，如图4所示，两个服务器(即服务器1和服务器2)的交互过程如下：

首先，安装在服务器1上的第一客户端轮询服务器2，请求页面展示需要的入参，从而确定需要对哪个页面进行截图；

其次，服务器2响应之后，第一客户端再根据服务器2响应的结果，访问服务器1的服务端接口，请求页面渲染数据；

然后，服务端接口响应之后，第一客户端再对页面内各个组件进行截图，并将截图图片打包上传到服务端2；

此外，第一客户端除了上传截图图片之外，还可以调用服务器2的相关接口，上传页面的相关信息，如将页面埋点、组件长宽高、组件位置等上传到服务端2，由服务端2通过拼接操作生成完整的页面，并通过埋点数据绑定操作，生成对应的页面热力图。

需要说明的是，当第一客户端上传图片出现错误，或服务器2绑定埋点数据出现错误时，服务器2可以重新下发该页面的页面展示入参，然后由第一客户端重新进行截图上传。

可见，在整个过程中，第一客户端需要确定展示哪个页面(即对哪个页面截图)，在展示页面时，需要获取页面渲染数据，执行截图操作后，需要把截图图片和保存的页面信息(如页面上设置的埋点、各组件的长宽高及组件位置)提交给热力图快照服务器。

需要说明的是，在本公开实施例中，“埋点”是指针对特定用户行为或事件进行捕获、处理和发送的相关技术及其实施过程。

与现有技术需要单独同步开发一套M站App，并通过M站第一客户端提供页面截图来生成页面热力图，存在热力图展示不完整，且由于实际开发团队不同，M站App跟用户移动端使用的App经常不一样，因而影响商家体验相比，本公开实施例，无需单独同步开发M站App，而是通过在服务器上生成Dcoker镜像，进而在Dcoker容器中运行客户端模拟器，以此实现提供客户端App的页面截图的目的，这样就能够保证服务器上使用的App与用户移动端使用的App保持完全一致，且不占用真实客户端如手机端的资源，因而不会影响商家体验。此外，与客户端拼接图片相比，热力图快照服务端拼接图片，可以避免客户端内存溢出错误。

下面参考图5～图6，结合具体实施例对图3所示的方法做进一步说明。

作为一种可选的实施例，对第一客户端中与指定对象关联的页面进行页面截图操作，包括：对页面的头部组件和底部组件直接采用预定API进行截图，得到一头部快照和一底部快照；以及对页面中可滚动的长图组件，依次遍历组件内的所有楼层，并采用预定延时机制，分别对每个楼层采用预定API进行截图，得到多张楼层快照。

需要说明的是，在本公开实施例中，对于一个页面而言，将其按功能模块划分，可以划分出多个不同的楼层。例如，一个页面中包含视频模块、图片模块和商品展示模块(包括商品的名称，价格等详细信息)等3个功能复用模块，则可以将其划分成视频楼层、图片楼层和商品展示楼层。相应的，楼层快照就可以是页面的各个功能模块的快照。

由于第一客户端中的每个对象都可以占用一个页面，以京东网上商城App为例，可以为其中注册的每个商家设置一个页面，如图5所示，每个页面一般包括头部组件、可滚动的长图组件和底部组件，且可滚动的长图组件一般包括一个或者多个楼层，因此，根据页面这种结构组成，在截图时，可以对页面中的各个组件单独截图。

具体地，对于页面的头部组件和底部组件可以采用相同的截图方式，分别截为一张头部快照和一张底部快照；对于页面的可滚动的长图组件，考虑到需要向上滑动才能展示完整的页面内容，因此可以采用另一种截图方式，即按楼层进行截图。

进一步，在对长图组件截图时，为了页面防止滚动过快导致页面还没有加载完整就进行截图，可以考虑页面加载时长，采用预定延时机制。

具体地，每隔预定时长如3秒滚动一个楼层组件高度，可以多偏移一段距离如50像素，目的是触发下一个楼层组件提前渲染，不仅可以减少渲染等待时长，而且可以保证每个楼层均渲染完成后再进行截图。

此外，为了便于后期快速、准确地拼接页面快照，在截图时，还可以对每个截图楼层进行位置标识。

最后，一种方法是，将所有截图图片上传到热力图快照服务端，由该服务端完成最终图片的拼接；另一种方法是，将所有截图图片先在第一客户端本地完成最终图片的拼接，再上传到热力图快照服务端。

通过本公开提供的截图方案，对页面中各个组件单独截屏，同时根据不同的组件类型，使用不同的截图策略，尤其是对长图组件采用按楼层延时截图，可以保证各楼层互不重合，且所截图片已经加载完成。

作为一种可选的实施例，在对长图组件进行截图的过程中：针对不同类型的楼层，采用不同的预定延时机制进行截图。

由于不同类型的楼层渲染时消耗的时长一般不同，因此为了既保证所截图片加载完成，又不至于无谓地浪费时间，可以对不同类型的楼层采用不同的预定延时机制进行截图。

RN(React Native)是Facebook提供的开源跨平台移动应用开发框架，使用这种框架开发的楼层一般需要较长的渲染时间，相比之下，其他类型的楼层一般需要较短的渲染时间，因此，实际实施时，可以将楼层划分为两大类，即RN类和非RN类(如纯原生代码实现)。

具体地，对于RN类的楼层，可以延时15s再调用截屏方法，对于非RN类的楼层，可以延时2s再调用截屏方法。

通过本公开实施例，针对不同的楼层渲染方式，如纯原生代码实现和其它方式实现如RN实现，则采用不同的延时机制进行截图，保证每个楼层均渲染完成后再进行截图。

作为一种可选的实施例，对第一客户端中与指定对象关联的页面进行页面截图操作，包括：对页面的头部组件和底部组件直接采用预定API进行截图，得到一头部快照和一底部快照；以及对页面中可滚动的长图组件，采用预定循环(如for循环)，依次遍历组件内的所有楼层，分别对每个楼层采用预定API进行截图，得到多张楼层快照。

在本公开实施例中，也采用对页面各组件进行单独截图的方式，如可以将页面分成头部组件，中间可滚动的长图组件，以及底部组件。针对头部组件和底部组件，因为页面宽高固定，可以采用第一客户端提供的截图API进行截图。对于中间可滚动的长图组件，则采用for循环遍历组件内的所有楼层，分别对每个楼层进行测量、布局，然后调用截图API进行截图，最后，由服务器上安装的第一客户端拼接成一张大图或者由另一个服务器即热力图快照服务器拼接成一张大图。

通过本公开实施例，也采用对页面各组件进行单独截图的方式，且对长图组件中的各楼层也采用单独截图的方式，保证最后拼接图片不重复，同时实现简单，但存在循环语句(如for循环)由于执行很快，对部分未加载完成的组件截图，出现截图为默认图的问题。

作为一种可选的实施例，在对长图组件进行截图的过程中：获取各楼层中的楼层组件的位置信息和尺寸信息；以及将获取的位置信息和尺寸信息与对应的楼层快照一起发送给第二服务器。

具体地，在页面渲染的过程中，针对页面内需要截图的区域，计算出截图区域对应楼层组件的位置、宽高及数据埋点等页面信息，并将所有截图和其对应的页面信息，上报到热力图快照服务端，由该服务器完成整体页面拼接和埋点区块标识，然后由热力图快照系统，根据线上埋点数据生成页面热力图。

具体地，在第一客户端截图生成热力图的实现方案中，需要把截图内对应组件和线上埋点数据进行绑定。因此在第一客户端渲染页面时，需要把各埋点组件的位置、宽高及数据埋点一起保存下来。对于纯原生代码实现的楼层组件，可以从楼层的最外层父组件开始进行递归遍历，获取每个子组件的位置、宽高信息。对于RN实现的楼层组件，需要在每个组件渲染完成的onLayout回调中进行位置、宽高数据测量。因为，在用户设备端，埋点数据是在页面渲染完成后，用户点击产生的，因此在页面渲染时，无法将组件的位置、宽高信息和埋点数据同时获取。这种情况下，需要对每个组件设置唯一的标识，通过这个标识作为关键字key，分别在页面渲染和处理埋点控件时保存对应的数据，最终通过key，将位置、宽高及埋点数据绑定到一起。

此外，唯一的标识可以通过拼接视图树的方式组成。如先给每个楼层设置标识ModuleID，遍历视图树时，对各组件的名称及位置进行拼接，最终生成该楼层内各个组件的唯一的标识。

通过本公开实施例，可以便于热力图快照服务器将埋点数据准确地绑定在页面的相应位置上。

作为一种可选的实施例，对第一客户端中与指定对象关联的页面进行页面截图操作，包括：监听页面中是否存在触发操作；如果存在触发操作，则对页面进行长图截屏；以及将截屏图片进行去重，得到对应的页面快照。

在本公开实施例中，利用Android 5.0以上系统开放的API MediaProjection进行截屏。其核心方法是启动一个本地服务，时刻监听页面变化。当用户点击或滚动操作触发时，进行截屏操作，所有截图完成后，将所有截图图片进行去重拼接。

通过本公开实施例，使用系统截图API截图，所截图片为整屏图片，不用进行图片拼接，但是长图截屏时，存在图片重合现象，需要对重合部分进行去重处理。

作为一种可选的实施例，如图6所示，在一个服务器中，Dcoker镜像可以包括多个Dcoker容器；每个Dcoker容器中可运行一个客户端模拟器；以及每个客户端模拟器中可运行一种客户端。

由于在实际使用时，通常需要生成不同商家的页面热力图，当商家数量比较大时，需要多台客户端模拟器同时运行。因此，需要对模拟器运行状态进行监控、自愈。对于如图6所示的每台Docker容器，具体监控逻辑如下：配置需要开启的客户端虚拟机，创建App运行环境；在Docker容器中启动不同子进程来开启客户端模拟器，启动多个子进程运行模拟器是因为，单个的虚拟机会独占运行进程，导致其它模拟器无法开启；当模拟器启动后，通过Android_Sdk自带的adb命令，控制客户端App跳转到指定商家的热力图页面；开启监控服务，定时轮询各个客户端虚拟机运行状态，当虚拟机进程系统杀死，则重新启动虚拟机；判断App当前展示的页面是不是热力图页面，如果是，则继续轮询下一个模拟器，如果不是，则执行“通过Android_Sdk自带的adb命令，控制客户端App跳转到指定商家的热力图页面”，重新启动热力图页面。

通过本公开实施例，可以支持在一个服务器上使用多个线程生成不同商家的热力图。

图7示意性示出了根据本公开另一实施例的页面热力图生成方法的流程图。

如图7所示，该方法包括操作S710～S730，其中：

在操作S710，获取来自第一服务器的多张页面快照，其中，第一服务器端中生成有Dcoker镜像并有一Dcoker容器被启动，在Dcoker容器中运行有客户端模拟器，在客户端模拟器中运行有一第一客户端，多张页面快照是对第一客户端中与指定对象关联的页面进行页面截图操作得到的；

在操作S720，基于多张页面快照拼接出与页面相同的页面；以及

在操作S730，在拼接出的页面上添加线上埋点数据，以生成关于指定对象的页面热力图。

需要说明的是，本公开实施例提供的方法与前述实施例中提供的方法中的由热力图快照服务器进行截图拼接和绑定埋点数据而生成页面热力图的方式相同，在此不再赘述。

与现有技术需要单独同步开发一套M站App，并通过M站客户端提供页面截图来生成页面热力图，存在热力图展示不完整，且由于实际开发团队不同，M站App跟用户移动端使用的App经常不一样，因而影响商家体验相比，本公开实施例，无需单独同步开发M站App，而是通过在服务器上生成Dcoker镜像，进而在Dcoker容器中运行客户端模拟器，以此实现提供客户端App的页面截图的目的，这样就能够保证服务器上使用的App与用户移动端使用的App保持完全一致，且不占用真实客户端如手机端的资源，因而不会影响商家体验。此外，与客户端拼接图片相比，热力图快照服务端拼接图片，可以避免客户端内存溢出错误。

图8示意性示出了根据本公开另一实施例的页面热力图生成方法的流程图。

如图8所示，该方法包括操作S810～S820，其中：

在操作S810，获取来自第一服务器的且由第一服务器拼接多张页面快照得到的第一页面，其中，第一服务器端中生成有Dcoker镜像并有一Dcoker容器被启动，在Dcoker容器中运行有客户端模拟器，在客户端模拟器中运行有第一客户端，多张页面快照是对第一客户端中与指定对象关联的页面进行页面截图操作得到的，第一页面和第一客户端中与指定对象关联的页面相同；以及

在操作S820，在获取的页面上添加线上埋点数据，以生成关于指定对象的页面热力图。

需要说明的是，本公开实施例提供的方法与前述实施例中提供的方法中的由安装在服务器端的第一客户端进行截图拼接，而由热力图服务器将埋点数据绑定到拼接页面上而生成页面热力图的方式相同，在此不再赘述。

与现有技术需要单独同步开发一套M站App，并通过M站客户端提供页面截图来生成页面热力图，存在热力图展示不完整，且由于实际开发团队不同，M站App跟用户移动端使用的App经常不一样，因而影响商家体验相比，本公开实施例，无需单独同步开发M站App，而是通过在服务器上生成Dcoker镜像，进而在Dcoker容器中运行客户端模拟器，以此实现提供客户端App的页面截图的目的，这样就能够保证服务器上使用的App与用户移动端使用的App保持完全一致，且不占用真实客户端如手机端的资源，因而不会影响商家体验。此外，与热力图快照服务器拼接图片相比，客户端端拼接图片，容易造成内存溢出错误。

图9示意性示出了根据本公开实施例的页面热力图生成系统的框图。

如图9所示，该页面热力图生成系统900包括第一生成模块910、第一运行模块920、第二运行模块930、截图模块940和第一发送模块950。

第一生成模块910，用于在第一服务器端生成Dcoker镜像并启动一Dcoker容器；

第一运行模块920，用于在Dcoker容器中运行客户端模拟器；

第二运行模块930，用于在客户端模拟器中运行第一客户端；

截图模块940，用于对第一客户端中与指定对象关联的页面进行页面截图操作；以及

第一发送模块950，用于将截得的多张页面快照，或者将由多张页面快照拼接出的与页面相同的第一页面，发送给第二服务器。

其中，第二服务器能够基于多张页面快照拼接出与页面相同的第二页面，并在第二页面上添加线上埋点数据，从而生成关于指定对象的页面热力图，或者能够直接在第一页面上添加线上埋点数据，从而生成关于指定对象的页面热力图。

与现有技术需要单独同步开发一套M站App，并通过M站客户端提供页面截图来生成页面热力图，存在热力图展示不完整，且由于实际开发团队不同，M站App跟用户移动端使用的App经常不一样，因而影响商家体验相比，本公开实施例，无需单独同步开发M站App，而是通过在服务器上生成Dcoker镜像，进而在Dcoker容器中运行客户端模拟器，以此实现提供客户端App的页面截图的目的，这样就能够保证服务器上使用的App与用户移动端使用的App保持完全一致，且不占用真实客户端如手机端的资源，因而不会影响商家体验。此外，与客户端拼接图片相比，热力图快照服务端拼接图片，可以避免客户端内存溢出错误。

作为一种可选的实施例，截图模块包括：第一截图单元，用于对页面的头部组件和底部组件直接采用预定API进行截图，得到一头部快照和一底部快照；以及第二截图单元，用于对页面中可滚动的长图组件，依次遍历组件内的所有楼层，并采用预定延时机制，分别对每个楼层采用预定API进行截图，得到多张楼层快照。

通过本公开提供的截图方案，对页面中各个组件单独截屏，同时根据不同的组件类型，使用不同的截图策略，尤其是对长图组件采用按楼层延时截图，可以保证各楼层互不重合，且所截图片已经加载完成。

作为一种可选的实施例，第二截图单元还用于在对长图组件进行截图的过程中：针对不同类型的楼层，采用不同的预定延时机制进行截图。

由于不同类型的楼层渲染时消耗的时长一般不同，因此为了既保证所截图片加载完成，又不至于无谓地浪费时间，可以对不同类型的楼层采用不同的预定延时机制进行截图。

作为一种可选的实施例，截图模块包括：第三截图单元，用于对页面的头部组件和底部组件直接采用预定API进行截图，得到一头部快照和一底部快照；以及第四截图单元，用于对页面中可滚动的长图组件，采用预定for循环，依次遍历组件内的所有楼层，分别对每个楼层采用预定API进行截图，得到多张楼层快照。

通过本公开实施例，也采用对页面各组件进行单独截图的方式，且对长图组件中的各楼层也采用单独截图的方式，保证最后拼接图片不重复，同时实现简单，但存在for循环由于执行很快，对部分未加载完成的组件截图，出现截图为默认图的问题。

作为一种可选的实施例，系统还包括：第一获取模块，用于在对长图组件进行截图的过程中，获取各楼层中的楼层组件的位置信息和尺寸信息；以及第二发送模块，用于将获取的位置信息和尺寸信息与对应的楼层快照一起发送给第二服务器。

通过本公开实施例，可以便于热力图快照服务器将埋点数据准确地绑定在页面的相应位置上。

作为一种可选的实施例，截图模块包括：监听单元，用于监听页面中是否存在触发操作；第五截图单元，用于在存在触发操作的情况下，对页面进行长图截屏；以及去重单元，用于将截屏图片进行去重，得到对应的页面快照。

通过本公开实施例，使用系统截图API截图，所截图片为整屏图片，不用进行图片拼接，但是长图截屏时，存在图片重合现象，需要对重合部分进行去重处理。

作为一种可选的实施例，Dcoker镜像包括多个Dcoker容器；每个Dcoker容器中可运行一个客户端模拟器；以及每个客户端模拟器中可运行一种客户端。

通过本公开实施例，可以支持在一个服务器上使用多个线程生成不同商家的热力图。

图10示意性示出了根据本公开实施例的页面热力图生成系统的框图。

如图10所示，该页面热力图生成系统1000包括第二获取模块1010、拼接模块1020和第二生成模块1030。

第二获取模块1010，用于获取来自第一服务器的多张页面快照，其中，第一服务器端中生成有Dcoker镜像并有一Dcoker容器被启动，在Dcoker容器中运行有客户端模拟器，在客户端模拟器中运行有第一客户端，多张页面快照是对第一客户端中与指定对象关联的页面进行页面截图操作得到的；

拼接模块1020，用于基于多张页面快照拼接出与页面相同的页面；以及

第二生成模块1030，用于在拼接出的页面上添加线上埋点数据，以生成关于指定对象的页面热力图。

与现有技术需要单独同步开发一套M站App，并通过M站客户端提供页面截图来生成页面热力图，存在热力图展示不完整，且由于实际开发团队不同，M站App跟用户移动端使用的App经常不一样，因而影响商家体验相比，本公开实施例，无需单独同步开发M站App，而是通过在服务器上生成Dcoker镜像，进而在Dcoker容器中运行客户端模拟器，以此实现提供客户端App的页面截图的目的，这样就能够保证服务器上使用的App与用户移动端使用的App保持完全一致，且不占用真实客户端如手机端的资源，因而不会影响商家体验。此外，与客户端拼接图片相比，热力图快照服务端拼接图片，可以避免客户端内存溢出错误。

图11示意性示出了根据本公开实施例的页面热力图生成系统的框图。

如图11所示，该页面热力图生成系统1100包括第三获取模块1110和第三生成模块1120。

第三获取模块1110，用于获取来自第一服务器的且由第一服务器拼接多张页面快照得到的第一页面，其中，第一服务器端中生成有Dcoker镜像并有一Dcoker容器被启动，在Dcoker容器中运行有客户端模拟器，在客户端模拟器中运行有第一客户端，多张页面快照是对第一客户端中与指定对象关联的页面进行页面截图操作得到的，第一页面和第一客户端中与指定对象关联的页面相同；以及

第三生成模块1120，用于在获取的页面上添加线上埋点数据，以生成关于指定对象的页面热力图。

与现有技术需要单独同步开发一套M站App，并通过M站客户端提供页面截图来生成页面热力图，存在热力图展示不完整，且由于实际开发团队不同，M站App跟用户移动端使用的App经常不一样，因而影响商家体验相比，本公开实施例，无需单独同步开发M站App，而是通过在服务器上生成Dcoker镜像，进而在Dcoker容器中运行客户端模拟器，以此实现提供客户端App的页面截图的目的，这样就能够保证服务器上使用的App与用户移动端使用的App保持完全一致，且不占用真实客户端如手机端的资源，因而不会影响商家体验。此外，与热力图快照服务器拼接图片相比，客户端端拼接图片，容易造成内存溢出错误。

根据本公开的实施例的模块、单元、子单元中的任意多个、或其中任意多个的至少部分功能可以在一个模块中实现。根据本公开实施例的模块、单元、子单元中的任意一个或多个可以被拆分成多个模块来实现。根据本公开实施例的模块、单元、子单元中的任意一个或多个可以至少被部分地实现为硬件电路，例如现场可编程门阵列(FPGA)、可编程逻辑阵列(PLA)、片上系统、基板上的系统、封装上的系统、专用集成电路(ASIC)，或可以通过对电路进行集成或封装的任何其他的合理方式的硬件或固件来实现，或以软件、硬件以及固件三种实现方式中任意一种或以其中任意几种的适当组合来实现。或者，根据本公开实施例的模块、单元、子单元中的一个或多个可以至少被部分地实现为计算机程序模块，当该计算机程序模块被运行时，可以执行相应的功能。

例如，第一生成模块910、第一运行模块920、第二运行模块930、截图模块940和第一发送模块950中的任意多个可以合并在一个模块/单元/子单元中实现，或者其中的任意一个模块/单元/子单元可以被拆分成多个模块/单元/子单元。或者，这些模块/单元/子单元中的一个或多个模块/单元/子单元的至少部分功能可以与其他模块/单元/子单元的至少部分功能相结合，并在一个模块/单元/子单元中实现。根据本公开的实施例，第一生成模块910、第一运行模块920、第二运行模块930、截图模块940和第一发送模块950中的至少一个可以至少被部分地实现为硬件电路，例如现场可编程门阵列(FPGA)、可编程逻辑阵列(PLA)、片上系统、基板上的系统、封装上的系统、专用集成电路(ASIC)，或可以通过对电路进行集成或封装的任何其他的合理方式等硬件或固件来实现，或以软件、硬件以及固件三种实现方式中任意一种或以其中任意几种的适当组合来实现。或者，第一生成模块910、第一运行模块920、第二运行模块930、截图模块940和第一发送模块950中的至少一个可以至少被部分地实现为计算机程序模块，当该计算机程序模块被运行时，可以执行相应的功能。

需要说明的是，本公开的实施例中系统部分与本公开的实施例中对应的方法部分是相对应的，系统部分的描述具体参考方法部分，在此不再赘述。

图12示意性示出了根据本公开实施例的适于实现页面热力图生成方法及系统的计算机系统的框图。图12示出的计算机系统仅仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。

如图12所示，根据本公开实施例的计算机系统1200包括处理器1201，其可以根据存储在只读存储器(ROM)1202中的程序或者从存储部分1208加载到随机访问存储器(RAM)1203中的程序而执行各种适当的动作和处理。处理器1201例如可以包括通用微处理器(例如CPU)、指令集处理器和/或相关芯片组和/或专用微处理器(例如，专用集成电路(ASIC))，等等。处理器1201还可以包括用于缓存用途的板载存储器。处理器1201可以包括用于执行根据本公开实施例的方法流程的不同动作的单一处理单元或者是多个处理单元。

在RAM 1203中，存储有系统1200操作所需的各种程序和数据。处理器1201、ROM1202以及RAM 1203通过总线1204彼此相连。处理器1201通过执行ROM 1202和/或RAM 1203中的程序来执行根据本公开实施例的方法流程的各种操作。需要注意，所述程序也可以存储在除ROM 1202和RAM 1203以外的一个或多个存储器中。处理器1201也可以通过执行存储在所述一个或多个存储器中的程序来执行根据本公开实施例的方法流程的各种操作。

根据本公开的实施例，系统1200还可以包括输入/输出(I/O)接口1205，输入/输出(I/O)接口1205也连接至总线1204。系统1200还可以包括连接至I/O接口1205的以下部件中的一项或多项：包括键盘、鼠标等的输入部分1206；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分1207；包括硬盘等的存储部分1208；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分1209。通信部分1209经由诸如因特网的网络执行通信处理。驱动器1210也根据需要连接至I/O接口1205。可拆卸介质1211，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器1210上，以便于从其上读出的计算机程序根据需要被安装入存储部分1208。

根据本公开的实施例，根据本公开实施例的方法流程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在计算机可读存储介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分1209从网络上被下载和安装，和/或从可拆卸介质1211被安装。在该计算机程序被处理器1201执行时，执行本公开实施例的系统中限定的上述功能。根据本公开的实施例，上文描述的系统、设备、装置、模块、单元等可以通过计算机程序模块来实现。

本公开还提供了一种计算机可读存储介质，该计算机可读存储介质可以是上述实施例中描述的设备/装置/系统中所包含的；也可以是单独存在，而未装配入该设备/装置/系统中。上述计算机可读存储介质承载有一个或者多个程序，当上述一个或者多个程序被执行时，实现根据本公开实施例的方法。

根据本公开的实施例，计算机可读存储介质可以是非易失性的计算机可读存储介质。例如可以包括但不限于：便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

例如，根据本公开的实施例，计算机可读存储介质可以包括上文描述的ROM 1202和/或RAM 1203和/或ROM 1202和RAM 1203以外的一个或多个存储器。

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

本领域技术人员可以理解，本公开的各个实施例和/或权利要求中记载的特征可以进行多种组合和/或结合，即使这样的组合或结合没有明确记载于本公开中。特别地，在不脱离本公开精神和教导的情况下，本公开的各个实施例和/或权利要求中记载的特征可以进行多种组合和/或结合。所有这些组合和/或结合均落入本公开的范围。

以上对本公开的实施例进行了描述。但是，这些实施例仅仅是为了说明的目的，而并非为了限制本公开的范围。尽管在以上分别描述了各实施例，但是这并不意味着各个实施例中的措施不能有利地结合使用。本公开的范围由所附权利要求及其等同物限定。不脱离本公开的范围，本领域技术人员可以做出多种替代和修改，这些替代和修改都应落在本公开的范围之内。

Claims (20)

1.一种页面热力图生成方法，包括：

在第一服务器端生成Dcoker镜像并启动一Dcoker容器；

在所述Dcoker容器中运行客户端模拟器；

在所述客户端模拟器中运行第一客户端；

对所述第一客户端中与指定对象关联的页面进行页面截图操作；以及

将截得的多张页面快照，或者将由所述多张页面快照拼接出的与所述页面相同的第一页面，发送给第二服务器，

其中，所述第二服务器能够基于所述多张页面快照拼接出与所述页面相同的第二页面，并在所述第二页面上添加线上埋点数据，从而生成关于所述指定对象的页面热力图，或者能够直接在所述第一页面上添所述加线上埋点数据，从而生成关于所述指定对象的页面热力图。

2.根据权利要求1所述的方法，其中，所述对所述第一客户端中与指定对象关联的页面进行页面截图操作，包括：

对所述页面的头部组件和底部组件直接采用预定API进行截图，得到一头部快照和一底部快照；以及

对所述页面中可滚动的长图组件，依次遍历组件内的所有楼层，并采用预定延时机制，分别对每个楼层采用所述预定API进行截图，得到多张楼层快照。

3.根据权利要求2所述的方法，其中，在对所述长图组件进行截图的过程中：

针对不同类型的楼层，采用不同的预定延时机制进行截图。

4.根据权利要求1所述的方法，其中，所述对所述第一客户端中与指定对象关联的页面进行页面截图操作，包括：

对所述页面的头部组件和底部组件直接采用预定API进行截图，得到一头部快照和一底部快照；以及

对所述页面中可滚动的长图组件，采用预定循环，依次遍历组件内的所有楼层，分别对每个楼层采用所述预定API进行截图，得到多张楼层快照。

5.根据权利要求2～4中任一项所述的方法，其中，在对所述长图组件进行截图的过程中：

获取各楼层中的楼层组件的位置信息和尺寸信息；以及

将获取的所述位置信息和所述尺寸信息与对应的楼层快照一起发送给所述第二服务器。

6.根据权利要求1所述的方法，其中，所述对所述第一客户端中与指定对象关联的页面进行页面截图操作，包括：

监听所述页面中是否存在触发操作；

如果存在触发操作，则对所述页面进行长图截屏；以及

将截屏图片进行去重，得到对应的页面快照。

7.根据权利要求1所述的方法，其中：

所述Dcoker镜像包括多个Dcoker容器；

每个Dcoker容器中可运行一个客户端模拟器；以及

每个客户端模拟器中可运行一种客户端。

8.一种页面热力图生成方法，包括：

获取来自第一服务器的多张页面快照，其中，所述第一服务器端中生成有Dcoker镜像并有一Dcoker容器被启动，在所述Dcoker容器中运行有客户端模拟器，在所述客户端模拟器中运行有第一客户端，所述多张页面快照是对所述第一客户端中与指定对象关联的页面进行页面截图操作得到的；

基于所述多张页面快照拼接出与所述页面相同的页面；以及

在拼接出的页面上添加线上埋点数据，以生成关于所述指定对象的页面热力图。

9.一种页面热力图生成方法，包括：

获取来自第一服务器的且由所述第一服务器拼接多张页面快照得到的第一页面，其中，所述第一服务器端中生成有Dcoker镜像并有一Dcoker容器被启动，在所述Dcoker容器中运行有客户端模拟器，在所述客户端模拟器中运行有第一客户端，所述多张页面快照是对所述第一客户端中与指定对象关联的页面进行页面截图操作得到的，所述第一页面和所述第一客户端中与指定对象关联的页面相同；以及

在获取的页面上添加线上埋点数据，以生成关于所述指定对象的页面热力图。

10.一种页面热力图生成系统，包括：

第一生成模块，用于在第一服务器端生成Dcoker镜像并启动一Dcoker容器；

第一运行模块，用于在所述Dcoker容器中运行客户端模拟器；

第二运行模块，用于在所述客户端模拟器中运行第一客户端；

截图模块，用于对所述第一客户端中与指定对象关联的页面进行页面截图操作；以及

第一发送模块，用于将截得的多张页面快照，或者将由所述多张页面快照拼接出的与所述页面相同的第一页面，发送给第二服务器，

其中，所述第二服务器能够基于所述多张页面快照拼接出与所述页面相同的第二页面，并在所述第二页面上添加线上埋点数据，从而生成关于所述指定对象的页面热力图，或者能够直接在所述第一页面上添所述加线上埋点数据，从而生成关于所述指定对象的页面热力图。

11.根据权利要求10所述的系统，其中，所述截图模块包括：

第一截图单元，用于对所述页面的头部组件和底部组件直接采用预定API进行截图，得到一头部快照和一底部快照；以及

第二截图单元，用于对所述页面中可滚动的长图组件，依次遍历组件内的所有楼层，并采用预定延时机制，分别对每个楼层采用所述预定API进行截图，得到多张楼层快照。

12.根据权利要求11所述的系统，其中，所述第二截图单元还用于在对所述长图组件进行截图的过程中：

针对不同类型的楼层，采用不同的预定延时机制进行截图。

13.根据权利要求10所述的系统，其中，所述截图模块包括：

第三截图单元，用于对所述页面的头部组件和底部组件直接采用预定API进行截图，得到一头部快照和一底部快照；以及

第四截图单元，用于对所述页面中可滚动的长图组件，采用预定for循环，依次遍历组件内的所有楼层，分别对每个楼层采用所述预定API进行截图，得到多张楼层快照。

14.根据权利要求11～13中任一项所述的系统，其中，所述系统还包括：

第一获取模块，用于在对所述长图组件进行截图的过程中，获取各楼层中的楼层组件的位置信息和尺寸信息；以及

第二发送模块，用于将获取的所述位置信息和所述尺寸信息与对应的楼层快照一起发送给所述第二服务器。

15.根据权利要求10所述的系统，其中，所述截图模块包括：

监听单元，用于监听所述页面中是否存在触发操作；

第五截图单元，用于在存在触发操作的情况下，对所述页面进行长图截屏；以及

去重单元，用于将截屏图片进行去重，得到对应的页面快照。

16.根据权利要求10所述的系统，其中：

所述Dcoker镜像包括多个Dcoker容器；

每个Dcoker容器中可运行一个客户端模拟器；以及

每个客户端模拟器中可运行一种客户端。

17.一种页面热力图生成系统，包括：

第二获取模块，用于获取来自第一服务器的多张页面快照，其中，所述第一服务器端中生成有Dcoker镜像并有一Dcoker容器被启动，在所述Dcoker容器中运行有客户端模拟器，在所述客户端模拟器中运行有第一客户端，所述多张页面快照是对所述第一客户端中与指定对象关联的页面进行页面截图操作得到的；

拼接模块，用于基于所述多张页面快照拼接出与所述页面相同的页面；以及

第二生成模块，用于在拼接出的页面上添加线上埋点数据，以生成关于所述指定对象的页面热力图。

18.一种页面热力图生成系统，包括：

第三获取模块，用于获取来自第一服务器的且由所述第一服务器拼接多张页面快照得到的第一页面，其中，所述第一服务器端中生成有Dcoker镜像并有一Dcoker容器被启动，在所述Dcoker容器中运行有客户端模拟器，在所述客户端模拟器中运行有第一客户端，所述多张页面快照是对所述第一客户端中与指定对象关联的页面进行页面截图操作得到的，所述第一页面和所述第一客户端中与指定对象关联的页面相同；以及

第三生成模块，用于在获取的页面上添加线上埋点数据，以生成关于所述指定对象的页面热力图。

19.一种计算机系统，包括：

一个或多个处理器；

存储器，用于存储一个或多个程序，

其中，当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器实现权利要求1至9中任一项所述的方法。

20.一种计算机可读存储介质，其上存储有可执行指令，该指令被处理器执行时使处理器实现权利要求1至9中任一项所述的方法。