CN111767107A - 一种信息的可视化展示方法及系统 - Google Patents

Abstract

本申请实施例提供了一种信息的可视化展示方法及系统。该方法按包括：在建立第一客户端与服务端的连接后，第一客户端获取当前页面的页面相关信息，并将该页面相关信息上传至服务端；服务端将该页面相关信息推送至第二客户端；第二客户端接收到该页面相关信息后，根据该页面相关信息获取当前页面所对应的操作信息；该操作信息包括可点击控件的点击信息；第二客户端根据点击信息在页面图片上对各个可点击控件进行标记，并建立可点击控件与点击信息的关联关系，以在标记后的页面图片的展示界面上对可点击控件与点击信息进行关联展示，实现点击信息的可视化展示。本申请实现信息的可视化展示，不需要任何分析就可直观的得出可点击控件的点击信息。

Description

一种信息的可视化展示方法及系统

技术领域

本申请涉及信息处理技术领域，尤其涉及一种信息的可视化展示方法及系统。

背景技术

随着信息技术和互联网技术的快速发展，应用于手机、平板电脑、计算机等终端设备上的应用程序(Application，APP)如雨后春笋般的出现，且具有相似功能的同类型应用程序也越来越多，如视频播放类应用程序、音乐播放类应用程序、即时通讯类应用程序等均存在多个。运营者为了更好的满足用户对应用程序的需求，需要掌握用户对应用程序的使用情况，因此，需要获取用户在应用程序各个页面的操作数据。

目前，运营者在获取到用户在应用程序的各个页面上的操作数据后，将各个操作数据以数据表格的形式进行呈现。这样，还得熟悉该应用程序的工作人员对各个数据表格进行关联、解析、分析等一系列操作，才能得出各个页面的访问信息。

由此可知，利用现有技术展示各个页面的操作数据时，由于操作数据的展示方式不直观，还得经过一系列的分析处理才能得出各个页面的访问情况，耗费较多的工作量。

发明内容

本申请实施例采用下述技术方案：

本申请实施例提供一种信息的可视化展示方法，该方法包括：

在建立第一客户端与服务端的连接后，所述第一客户端获取当前页面的页面相关信息，并将所述页面相关信息上传至所述服务端；其中，所述页面相关信息包括所述当前页面的页面图片信息、当前页面的页面标识和位于所述当前页面上的各个可点击控件的控件信息；

所述服务端将所述页面相关信息推送至第二客户端；

所述第二客户端接收到所述页面相关信息后，根据所述页面相关信息从所述服务端获取所述当前页面所对应的操作信息；其中，所述操作信息包括各个所述可点击控件的点击信息；

所述第二客户端根据所述点击信息在所述页面图片上对各个所述可点击控件进行标记，并建立各个所述可点击控件与对应的所述点击信息的关联关系，以在所述标记后的页面图片的展示界面上对所述可点击控件与所述点击信息进行关联展示，实现所述点击信息的可视化展示。

可选的，所述控件信息包括Xpath信息、坐标信息和大小信息；所述点击信息包括点击数量；

相应的，所述第二客户端根据所述点击信息在所述页面图片上对各个所述可点击控件进行标记，包括：

所述第二客户端根据各个所述可点击控件所对应的所述Xpath信息、所述坐标信息和大小信息，确定所述可点击控件在所述当前页面上的区域信息；

所述第二客户端根据各个所述可点击控件所对应的区域信息，在所述页面图片上绘制所述可点击控件的外框，并根据所述可点击控件的点击数量使用不同的颜色对所述外框进行标记。

可选的，所述建立各个所述可点击控件与对应的所述点击信息的关联关系，以在所述标记后的页面图片的展示界面上对所述可点击控件与所述点击信息进行关联展示，包括：

所述第二客户端建立所述区域信息与所述点击信息的关联关系，以使得在所述第二客户端展示进行标记后的所述页面图片时，当光标位于所述区域信息所对应区域内时，在所述区域旁边或者所述页面图片周围区域显示对应的点击信息。

可选的，所述操作信息还包括所述当前页面的访问信息；所述访问信息包括访问人数、访问量和平均访问时间；

相应的，本申请实施例提供的方法还包括：

所述第二客户端以图形和/或表格的形式在标记后的所述页面图片的展示页面上展示所述访问信息。

可选的，本申请实施例提供的方法还包括：

所述服务端通过埋点获取各用户所述第一客户端上各个页面所对应的所述操作信息；其中，所述操作信息包括所述可点击控件所对应的点击信息和所述可点击控件的标识信息；所述标识信息基于所述可点击控件的Xpath信息和所述用户访问所述页面时所使用的设备信息生成。

可选的，通过如下步骤建立所述第一客户端与所述服务端的连接：

在所述第二客户端与所述服务端建立连接后，所述第二客户端从所述服务端获取所述服务端的登录图形码信息，并展示所述登录图形码；其中，所述登录图形码包括登录二维码；

所述第一客户端通过扫描的方式从所述第二客户端获取所述登录图形码，通过解析所述登录图形码建立与所述服务端的连接。

可选的，所述页面图片信息为所述页面图片的统一资源定位符URL地址；

相应的，所述第一客户端获取当前页面的页面相关信息，并将所述页面相关信息上传至所述服务端，包括：

所述第一客户端按照预设时间间隔获取所述当前页面的页面标识和可点击控件的控件信息；

所述第一客户端检测当前获取的所述页面标识与前一次获取的所述页面标识是否一致，以及，检测当前获取的所述控件信息与前一次获取的所述控件信息是否一致；

若所述页面标识和/或所述控件信息不一致，获取所述当前页面的页面图片，并将所述页面图片上传至服务端，并从所述服务端获取所述页面图片在所述服务端的URL地址；

所述第一客户端将所述URL地址、所述页面标识和所述控件信息上传至所述服务端。

本申请实施例还提供了一种信息的可视化展示系统，该系统包括：第一客户端、第二客户端和服务端；所述第一客户端和所述第二客户端均与所述服务端建立连接；

所述第一客户端，用于在建立与服务端的连接后，获取当前页面的页面相关信息，并将所述页面相关信息上传至所述服务端；其中，所述页面相关信息包括所述当前页面的页面图片信息、当前页面的页面标识和位于所述当前页面上的各个可点击控件的控件信息；

所述服务端，用于将所述页面相关信息推送至第二客户端；

所述第二客户端，用于接收到所述页面相关信息后，根据所述页面相关信息从所述服务端获取所述当前页面所对应的操作信息；其中，所述操作信息包括各个所述可点击控件的点击信息；以及，根据所述点击信息在所述页面图片上对各个所述可点击控件进行标记，并建立各个所述可点击控件与对应的所述点击信息的关联关系，以在所述标记后的页面图片的展示界面上对所述可点击控件与所述点击信息进行关联展示，实现所述点击信息的可视化展示。

可选的，所述控件信息包括Xpath信息、坐标信息和大小信息；所述点击信息包括点击数量；

相应的，所述第二客户端具体用于：

根据各个所述可点击控件所对应的所述Xpath信息、所述坐标信息和大小信息，确定所述可点击控件在所述当前页面上的区域信息；并根据各个所述可点击控件所对应的区域信息，在所述页面图片上绘制所述可点击控件的外框，并根据所述可点击控件的点击数量使用不同的颜色对所述外框进行标记。

可选的，所述第二客户端还具体用于：

建立所述区域信息与所述点击信息的关联关系，以使得在所述第二客户端展示进行标记后的所述页面图片时，当光标位于所述区域信息所对应区域内时，在所述区域旁边或者所述页面图片周围区域显示对应的点击信息。

可选的，所述操作信息还包括所述当前页面的访问信息；所述访问信息包括访问人数、访问量和平均访问时间；

相应的，所述第二客户端还用于：

以图形和/或表格的形式在标记后的所述页面图片的展示页面上展示所述访问信息。

可选的，所述服务端还用于：

通过埋点获取各用户所述第一客户端上各个页面所对应的所述操作信息；其中，所述操作信息包括所述可点击控件所对应的点击信息和所述可点击控件的标识信息；所述标识信息基于所述可点击控件的Xpath信息和所述用户访问所述页面时所使用的设备信息生成。

可选的，所述第二客户端，还用于在与所述服务端建立连接后，从所述服务端获取所述服务端的登录图形码信息，并展示所述登录图形码；其中，所述登录图形码包括登录二维码；

所述第一客户端，还用于通过扫描的方式从所述第二客户端获取所述登录图形码，通过解析所述登录图形码建立与所述服务端的连接。

可选的，所述页面图片信息为所述页面图片的统一资源定位符URL地址；

所述第一客户端，具体用于：

按照预设时间间隔获取所述当前页面的页面标识和可点击控件的控件信息；检测当前获取的所述页面标识与前一次获取的所述页面标识是否一致，以及，检测当前获取的所述控件信息与前一次获取的所述控件信息是否一致；若所述页面标识和/或所述控件信息不一致，获取所述当前页面的页面图片，并将所述页面图片上传至服务端，并从所述服务端获取所述页面图片在所述服务端的URL地址；将所述URL地址、所述页面标识和所述控件信息上传至所述服务端。

本申请实施例采用的上述至少一个技术方案能够达到以下有益效果：

采用本申请实施例提供的技术方案，第一客户端与服务端建立的连接后，可以通过第一客户端将需要进行信息展示的页面的页面相关信息上传至服务端；服务端每次在获取到页面相关信息后，将页面相关信息推送给第二客户端；第二客户端根据页面信息获取该页面所对应的操作信息，然后根据操作信息中各个可点击控件的点击信息在页面图片上对各个可点击控件进行标记，并建立可点击控件与点击信息的关联关系，这样，在对标记后的页面图片进行展示时，在同一界面上还可以关联展示每个可点击控件所对应的点击信息，实现了点击信息的可视化展示，从而使得相关人员不需要再进行分析处理就可展示界面上可以直观的看到可点击控件的点击情况，使得信息的展示更加直观，并且还可以节省大量的工作量。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1为本申请实施例提供的信息的可视化展示方法的方法流程图；

图2为本申请实施例提供的信息的可视化展示效果图之一；

图3为本申请实施例提供的信息的可视化展示效果图之二；

图4为本申请实施例提供的信息的可视化展示方法的具体方法流程图；

图5为本申请实施例提供的信息的可视化展示系统的结构示意图；

图6为本申请实施例提供的网络设备的模块组成示意图。

具体实施方式

为使本申请的目的、技术方案和优点更加清楚，下面将结合本申请具体实施例及相应的附图对本申请技术方案进行清楚、完整地描述。显然，所描述的实施例仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

以下结合附图，详细说明本申请各实施例提供的技术方案。

图1为本申请实施例提供的信息的可视化展示方法的方法流程图，图1所示的方法，至少包括如下步骤：

步骤102，在建立第一客户端与服务端的连接后，第一客户端获取当前页面的页面相关信息，并将该页面相关信息上传至服务端。

步骤104，服务端将上述页面相关信息推送至第二客户端。

其中，上述页面相关信息包括当前页面的页面图片信息、当前页面的页面标识和位于当前页面上的各个可点击控件的控件信息。

可选的，上述第一客户端可以是需要进行分析的应用程序客户端，服务端则为该应用程序所对应的服务端。当前页面为第一客户端上当前正在打开的页面。一般的，当相关人员需要对某页面进行分析时，可以通过第一客户端打开该页面。

需要说明的是，上述页面图片信息可以为该页面图片、也可以为该页面图片在服务端的统一资源定位符(URL)地址。其中，上述页面图片可以通过截图的方式获取。

具体的，在本申请实施例中，通过第一客户端上传需要分析的页面相关信息，通过第二客户端对该页面信息进行分析、展示，由于第一客户端和第二客户端之间无法直接进行通信，因此，需要第一客户端将当前页面的页面相关信息上传至服务端。当服务端接收到第一客户端上传的页面相关信息后，将该页面相关信息推送至第二客户端。

其中，在一种具体实施方式中，第二客户端可以为浏览器客户端。

步骤106，第二客户端接收到上述页面相关信息后，根据该页面相关信息从服务端获取当前页面所对应的操作信息；其中，该操作信息包括各个可点击控件的点击信息。

可选的，在一种具体实施方式中，服务端可以通过埋点的方式自动获取各个用户在第一客户端的各个页面所对应的操作信息。这样，第二客户端可以根据接收到的当前页面的页面相关信息中的页面标识和控件信息从服务端获取当前页面所对应的操作信息。

步骤108，第二客户端根据上述点击信息在页面图片上对各个可点击控件进行标记，并建立各个可点击控件与对应的点击信息的关联关系，以在标记后的页面图片的展示界面上对可点击控件与点击信息进行关联展示，实现点击信息的可视化展示。

其中，在本申请实施例中，上述点击信息可以包括点击数量、点击人次等信息。

具体的，在本申请实施例中，可以根据点击信息中的点击数量对可点击控件进行标记。在具体实施时，对于同一页面上的各个可点击控件，可以根据其所对应的点击信息，采用不同的颜色对可点击控件进行标记。例如，可以按照赤橙黄绿青蓝紫的顺序依次标记点击数量从多到少的各个可点击控件。即若是同一页面上的可点击控件1的点击数量最多，可以将该可点击控件标记为红色。

当然，由于可点击控件本身在页面上呈现时就携带有颜色，如果再通过颜色对可点击控件进行标记，可能标记性不太明显。因此，在一些可选实施方式中，可以为每个可点击控件绘制外框(可以沿可点击控件的边缘绘制外框)，然后以不同的颜色对可点击控件的外框进行标记。

另外，在本申请实施例中，除了对页面图片上的各个可点击控件进行标记外，还可以建立可点击控件与对应的点击信息的关联关系，这样，当在第二客户端上显示标记后的页面图片时，当光标位于某个可点击控件区域范围内时，可在该可点击控件周围或者页面图片周围显示该可点击控件所对应的点击信息。

本申请实施例提供的信息的可视化展示方法，在对标记后的页面图片进行展示时，在同一界面上还可以关联展示每个可点击控件所对应的点击信息，实现了点击信息的可视化展示，从而使得相关人员不需要再进行分析处理就可展示界面上可以直观的看到可点击控件的点击情况，使得信息的展示更加直观，并且还可以节省大量的工作量。

可选的，在一种具体实施方式中，上述控件信息包括Xpath信息、坐标信息和大小信息；所述点击信息包括点击数量；

相应的，第二客户端根据点击信息在页面图片上对各个可点击控件进行标记：包括

第二客户端根据各个可点击控件所对应的Xpath信息、坐标信息和大小信息，确定可点击控件在前页面上的区域信息；第二客户端根据各个可点击控件所对应的区域信息，在上述页面图片上绘制可点击控件的外框，并根据可点击控件的点击数量使用不同的颜色对外框进行标记。

其中，在本申请实施例中，根据Xpath(XML路径语言)信息，是一种用来确定XML文档中某部分位置的语言。因此，在得知各个可点击控件所对应的Apath信息后，则可以确定出可点击控件在页面上的位置信息；其次，通过可点击控件所对应的坐标信息也可以定位出可点击控件在页面上的位置信息。因此，通过Xpath信息、坐标信息和可点击控件的大小信息可以确定出可点击控件在该页面上所对应的区域信息。其中，该区域信息用于表征可点击控件在页面上所对应的区域。

在确定了可点击控件在页面上的区域信息后，实际上确定了可点击控件在页面上的区域，这样，在具体实施时，可以沿可点击控件所对应的区域的边缘绘制可点击控件的外框。例如，可点击控件为位于页面左上角某区域内的矩形控件，则所绘制的可点击控件的外框则为沿着该可点击控件边缘的矩形。在绘制了可点击控件的外框后，然后根据该页面上各可点击控件所对应的点击数量使用不同的颜色对可点击控件的外框进行标记。这样，在进行页面图片的展示时，相关人员用过各可点击控件外框的颜色就可以判断出该页面上各个可点击控件的点击情况，即哪个可点击控件被点击的次数最多，哪个可点击控件被点击的次数最少等等。

可选的，在一种具体实施方式中，上述建立各个可点击控件与对应的点击信息的关联关系，以在标记后的页面图片的展示界面上对可点击控件与点击信息进行关联展示，具体包括如下步骤：

第二客户端建立区域信息与点击信息的关联关系，以使得在第二客户端展示进行标记后的页面图片时，当光标位于上述区域信息所对应区域时，在上述区域的旁边或者页面图片周围区域显示显示对应的点击信息。

具体的，在一种具体实施方式中，可以预先建立各个可点击控件与其对应的点击信息(包括点击数量和点击人次)的对应关系，并设置该点击信息的触发条件为光标位于该可点击控件附近区域时，则在展示页面上显示该可点击控件所对应的点击信息。这样，当在第二客户端上展示该页面图片时，当用户的光标处于该可点击控件所对应区域或者该区域附近时，则在显示屏上显示该可点击控件所对应的点击信息。

为便于理解，下述将结合图示介绍上述可点击控件与点击信息关联展示的具体展示效果。

例如，在一种具体实施方式中，假设当前页面图片为保险服务页面，位于该页面上的可点击控件包括“守护家庭财产安全”、“保障商铺财产安全”、“立即开通”、“首页”及“我的”等控件。所绘制的各个可点击控件的外框如图2所示，其将各个可点击控件所对应的区域信息与该可点击控件的点击信息进行关联，这样，在进行该页面的展示时，当光标位于“守护家庭财产安全”区域内或者区域附近一定范围内时，在当前展示界面上所展示的页面图片周围空白区域显示“守护家庭财产安全”这一可点击控件所对应的点击数量和点击人次。

另外，需要说明的是，上述举例和图2均为示例性说明，并不构成对本申请实施例的限定。

可选的，在一种具体实施方式中，上述操作信息还包括当前页面的访问信息；该访问信息包括访问人数、访问量和平均访问时间；

相应的，本申请实施例提供的方法，还包括如下步骤：

第二客户端以图形和/或表格的形式在标记后的页面图片的展示页面上展示上述访问信息。

其中，上述平均访问时间可以理解为在某统计周期内各个用户对该页面的访问时间的平均值。

可选的，在本申请实施例中，第二客户端可以以表格的形式在标记后的页面图片上展示该页面所对应的访问人数、访问量和平均访问时间等信息；还可以以图形(曲线图)的形式在标记后的页面图片上展示该页面所对应的访问人数、访问量和平均访问时间等信息；当然，还可以同时以表格和图形的形式在标记后的页面图片上展示该页面所对应的访问人数、访问量和平均访问时间等信息。

例如，在本申请实施例中，页面的操作信息的另外一种展示效果图如图3所示。在图3所示的展示效果中，在页面图片上根据各可点击控件的点击数量以不同的颜色(未示出)标记各可点击控件的外框、以及将各可点击控件的区域信息与其对应的点击信息(点击数量和点击人次)进行关联，这样，当光标位于某个可点击控件所对应的区域范围内时，则在页面图片的旁边显示该可点击控件所对应的点击信息，以及，在当前页面上页面图片的旁边以表格和图标的形式展示该页面所对应的访问人数、访问量和平均访问时间。

具体的，若要实现本申请实施例所提供的信息的展示方法，则需要第一客户端与服务端建立连接，以及，第二客户端与服务端建立连接。在一种可选实施方式中，当用户打开第二客户端时，则第二客户端通过WebSocket协议与服务端建立连接。

WebSocket是一种在单个传输控制协议(Transmission Control Protocol，TCP)连接上进行全双工通信的协议，若是第二客户端与服务端通过WebSocket建立连接，则需要完成一次握手，两者之间就可以直接创建持久性的连接，并进行双向数据传输。

当第二客户端与服务端建立连接后，才可以执行第一客户端与服务端之间的连接操作。在一种具体实施方式中，可以通过如下步骤建立第一客户端与服务端的连接：

在第二客户端与服务端建立连接后，第二客户端从服务端获取服务端的登录图像码信息，并展示该登录图形码；第一客户端通过扫描的方式从第二客户端获取该登录图形码，通过解析该登录图形码建立与服务端的连接；其中，上述登录图形码包括登录二维码。

可选的，在本申请实施例中，上述登录图形码可以为二维码、条形码等图形码，本申请实施例并不对上述登录图形码的具体形态进行限定。

在一种具体实施方式中，第一客户端和第二客户端分别位于不同的终端设备，当在第二客户端的显示屏上显示上述登录图形码时，用户可以使用第一客户端扫描显示在第二客户端上的登录图形码，即获取登录图形码图片，并对该登录图形码进行解析，从而实现第一客户端与服务端之间的连接。

具体的，在本申请实施例中，携带在页面相关信息中的页面图片信息可以为页面图片，也可以为页面图片的URL，下述将分别进行介绍。

可选的，在一种具体实施方式中，上述页面图片信息为页面图片；相应的，在这种情况下，上述第一客户端获取当前页面的页面相关信息，并将页面相关信息上传至服务端，具体包括如下过程：

第一客户端按照预设时间间隔获取当前页面的页面标识和可点击控件的控件信息；第一客户端检测当前获取的页面标识与前一次获取的页面标识是否一致，以及，检测当前获取的控件信息与前一次获取的控件信息是否一致；若页面标识和/或控件信息不一致，获取当前页面的页面图片，并将该页面图片、页面标识和控件信息上传至服务端。

其中，上述可点击控件的控件信息可以包括控件的标识(可以为名称等)、控件的大小、控件的Apath信息以及控件的坐标等。在具体实施时，第一客户端从当前页面的根节点开始向下遍历，获取该页面中所有可以点击的可点击控件的空间信息并进行缓存。

在本申请实施例中，上述检测当前获取的页面标识与前一次获取的页面标识，以及当前获取的控件信息与前一次获取的控件信息是否一致的目的是为了判断当前打开的页面是否发生变化，如是否翻页或者是否对当前页面进行滑动等。

一般的，若是页面标识不一致，则说明第一客户端当前打开的页面发生了变化；若是页面标识一致但是控件信息不一致，则说明对该页面进行了滑动操作，使得显示屏上所显示的内容发生了变化。

在本申请实施例中，若是确定页面发生变化，则截取当前页面的页面图片，并将该页面图片、页面标识和控件信息上传至服务器。若是确定页面未发生变化，则在达到设定时间间隔后，重复执行上述步骤。

可选的，在另外一种具体实施方式中，上述页面图片信息为页面图片的URL地址；相应的，在这种情况下，上述第一客户端获取当前页面的页面相关信息，并将页面相关信息上传至服务端，具体包括如下过程：

第一客户端按照预设时间间隔获取当前页面的页面标识和可点击控件的控件信息；第一客户端检测当前获取的页面标识与前一次获取的页面标识是否一致，以及，检测当前获取的控件信息与前一次获取的控件信息是否一致；若页面标识和/或控件信息不一致，获取当前页面的页面图片，并将该页面图片上传至服务端，并从服务端获取该页面图片在所述服务端的URL地址；第一客户端将URL地址、页面标识和控件信息上传至服务端。

在该种实现方式中，与上述不同的则是，先将页面图片上传至服务端进行存储，然后接收服务端返回的页面图片的URL地址信息，再将URL地址、页面标识和控件信息上传至服务端。具体的，可以对页面图片进行压缩写入第一客户端的内容，然后调用文件上传接口将上述压缩后的页面图片上传到服务端。

为便于理解本申请实施例提供的方法，下述将以第二客户端为浏览器为例介绍本申请实施例提供的方法。图4为本申请实施例提供的信息的可视化展示的一种具体方法流程图，图4所示的流程图，至少包括如下步骤：

步骤402，用户打开浏览器中的展示页面，浏览器通过WebSocket和服务端建立连接。

步骤404，浏览器从服务端获取服务端的登录二维码信息，并在其界面上展示该登录二维码。

步骤406，使用第一客户端扫描上述登录二维码，并对该登录二维码进行解析，建立与服务端的连接。

步骤408，第一客户端按照设定时间间隔获取当前打开的页面的页面标识和可点击控件的控件信息。

其中，上述控件信息包括Xpath信息、坐标信息和大小信息。

步骤410，第一客户端检测当前获取的页面标识与前一次获取的页面标识是否一致，以及，检测当前获取的空间信息与前一次获取的控件信息是否一致；若页面标识和/或控件信息不一致，则执行步骤412；若页面标识和控件信息均一致，则返回步骤408。

步骤412，第一客户端获取当前页面的页面图片，并将该页面图片上传至服务端。

步骤414，服务端将该页面图片在服务端的URL地址发送给第一客户端。

步骤416，第一客户端将上述URL地址、页面标识和控件信息作为页面相关信息上传至服务端。

步骤418，服务端在接收到第一客户端上传的页面相关信息后，将该页面相关信息推送至第二客户端。

步骤420，浏览器接收到页面相关信息中，根据该页面相关信息从服务端获取当前页面所对应的操作信息；其中，该操作信息包括各个可点击控件的点击信息和页面的访问信息；操作信息为服务端通过埋点从第一客户端采集的。

步骤422，浏览器根据可点击控件所对应的Xpath信息、坐标信息和大小信息，确定可点击控件在当前页面上的区域信息。

步骤424，浏览器根据各个可点击控件所对应的区域信息，在页面图片上绘制可点击控件的外框，并根据可点击控件的点击数量使用不同的颜色对外框进行标记；以及建立上述区域信息与点击信息的关联关系，以使得在第二客户端展示进行标记后的页面图片时，当光标位于区域信息所对应区域内时，在区域旁边或者页面图片周围区域显示对应的点击信息；并以图形和/或表格的形式在标记后的页面图片的展示页面上展示上述访问信息。

另外，需要说明的是，在本申请实施例中，服务端可以通过埋点的方式收集各用户在第一客户端上的操作信息，并进行存储，以便于用于信息的展示。因此，本申请实施例提供的方法还包括：

服务端通过埋点获取各用户第一客户端上各个页面所对应的操作信息；其中，该操作信息包括可点击控件所对应的点击信息和可点击控件的标识信息；上述标识信息基于可点击控件的Xpath信息和用户访问该页面时所使用的设备信息生成。

在具体实施时，服务端可以通过AOP从框架层拦截页面跳转、可点击控件的点击事件(包括可点击控件的标识和控件信息)等信息，从而获取页面的操作信息(包括页面访问信息和可点击控件的控件信息)，然后将拦截的操作信息上报至服务端的数据库中进行存储。

另外，需要说明的是，在本申请实施例中，还可以通过服务端预先配置埋点开关，在给第一客户端设置埋点时，还需要设置埋点开关，这样，服务端通过开启埋点开关就可以进行埋点数据的采集，关闭埋点开关结束埋点数据的采集。

在本申请实施例中，通过埋点的方式采集各个用户在第一客户端的页面上执行操作的操作信息，且通过第一客户端可以自动采集并生成可点击控件的标识信息和对应的操作信息，实现了第一客户端埋点数据的自动采集，可以减少了数据采集工作量。

相对于本申请实施例提供的信息的可视化展示方法，基于相同的思路，本申请实施例还提供了一种信息的可视化展示系统，用于执行本申请实施例提供的方法。图5为本申请实施例提供的信息的可视化展示系统的结构示意图，图5所示的系统，至少包括第一客户端510、第二客户端520和服务端530；第一客户端510和第二客户520均与服务端530建立连接；

上述第一客户端510，用于在建立与服务端的连接后，获取当前页面的页面相关信息，并将上述页面相关信息上传至上述服务端；其中，上述页面相关信息包括上述当前页面的页面图片信息、当前页面的页面标识和位于上述当前页面上的各个可点击控件的控件信息；

上述服务端530，用于将上述页面相关信息推送至第二客户端；

上述第二客户端520，用于接收到上述页面相关信息后，根据上述页面相关信息从上述服务端获取上述当前页面所对应的操作信息；其中，上述操作信息包括各个上述可点击控件的点击信息；以及，根据上述点击信息在上述页面图片上对各个上述可点击控件进行标记，并建立各个上述可点击控件与对应的上述点击信息的关联关系，以在上述标记后的页面图片的展示界面上对上述可点击控件与上述点击信息进行关联展示，实现上述点击信息的可视化展示。

可选的，上述控件信息包括Xpath信息、坐标信息和大小信息；上述点击信息包括点击数量；

相应的，上述第二客户端520具体用于：

根据各个上述可点击控件所对应的上述Xpath信息、上述坐标信息和大小信息，确定上述可点击控件在上述当前页面上的区域信息；并根据各个上述可点击控件所对应的区域信息，在上述页面图片上绘制上述可点击控件的外框，并根据上述可点击控件的点击数量使用不同的颜色对上述外框进行标记。

可选的，上述第二客户端520还具体用于：

建立上述区域信息与上述点击信息的关联关系，以使得在上述第二客户端展示进行标记后的上述页面图片时，当光标位于上述区域信息所对应区域内时，在上述区域旁边或者上述页面图片周围区域显示对应的点击信息。

可选的，上述操作信息还包括上述当前页面的访问信息；上述访问信息包括访问人数、访问量和平均访问时间；

相应的，上述第二客户端520还用于：

以图形和/或表格的形式在标记后的上述页面图片的展示页面上展示上述访问信息。

可选的，上述服务端530还用于：

通过埋点获取各用户上述第一客户端上各个页面所对应的上述操作信息；其中，上述操作信息包括上述可点击控件所对应的点击信息和上述可点击控件的标识信息；上述标识信息基于上述可点击控件的Xpath信息和上述用户访问上述页面时所使用的设备信息生成。

可选的，上述第二客户端520，还用于在与上述服务端建立连接后，从上述服务端获取上述服务端的登录图形码信息，并展示上述登录图形码；其中，上述登录图形码包括登录二维码；

上述第一客户端510，还用于通过扫描的方式从上述第二客户端获取上述登录图形码，通过解析上述登录图形码建立与上述服务端的连接。

可选的，上述页面图片信息为上述页面图片的统一资源定位符URL地址；

上述第一客户端510，具体用于：

按照预设时间间隔获取上述当前页面的页面标识和可点击控件的控件信息；检测当前获取的上述页面标识与前一次获取的上述页面标识是否一致，以及，检测当前获取的上述控件信息与前一次获取的上述控件信息是否一致；若上述页面标识和/或上述控件信息不一致，获取上述当前页面的页面图片，并将上述页面图片上传至服务端，并从上述服务端获取上述页面图片在上述服务端的URL地址；将上述URL地址、上述页面标识和上述控件信息上传至上述服务端。

本申请实施例提供的信息的可视化展示系统，第一客户端与服务端建立的连接后，可以通过第一客户端将需要进行信息展示的页面的页面相关信息上传至服务端；服务端每次在获取到页面相关信息后，将页面相关信息推送给第二客户端；第二客户端根据页面信息获取该页面所对应的操作信息，然后根据操作信息中各个可点击控件的点击信息在页面图片上对各个可点击控件进行标记，并建立可点击控件与点击信息的关联关系，这样，在对标记后的页面图片进行展示时，在同一界面上还可以关联展示每个可点击控件所对应的点击信息，实现了点击信息的可视化展示，从而使得相关人员不需要再进行分析处理就可展示界面上可以直观的看到可点击控件的点击情况，使得信息的展示更加直观，并且还可以节省大量的工作量。

相应于本发明实施例提供的一种信息的可视化展示方法，本发明实施例提供一种网络设备，参见图6所示，网络设备包括处理器610、收发机620、存储器630和总线接口。其中：

在本发明实施例中，网络设备600还包括：存储在存储器630上并可在所述处理器610上运行的计算机程序，所述计算机程序被所述处理器610执行时实现上述信息的可视化展示方法的各个步骤，且能达到相同的技术效果，为避免重复，这里不再赘述。

在图6中，总线架构可以包括任意数量的互联的总线和桥，具体由处理器610代表的一个或多个处理器和存储器630代表的存储器的各种电路链接在一起。总线架构还可以将诸如外围设备、稳压器和功率管理电路等之类的各种其他电路链接在一起，这些都是本领域所公知的，因此，本文不再对其进行进一步描述。总线接口提供接口。收发机620可以是多个元件，即包括发送机和接收机，提供用于在传输介质上与各种其他装置通信的单元。

处理器610负责管理总线架构和通常的处理，存储器630可以存储处理器610在执行操作时所使用的数据。

本发明实施例还提供一种计算机可读存储介质，计算机可读存储介质上存储有计算机程序，该计算机程序被处理器执行时实现上述方法实施例的各个过程，且能达到相同的技术效果，为避免重复，这里不再赘述。其中，所述的计算机可读存储介质，如只读存储器(Read-Only Memory，ROM)、随机存取存储器(Random Access Memory，RAM)、磁碟或者光盘等。

需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端(可以是手机，计算机，服务端，空调器，或者网络设备等)执行本发明各个实施例所述的方法。

上面结合附图对本发明的实施例进行了描述，但是本发明并不局限于上述的具体实施方式，上述的具体实施方式仅仅是示意性的，而不是限制性的，本领域的普通技术人员在本发明的启示下，在不脱离本发明宗旨和权利要求所保护的范围情况下，还可做出很多形式，均属于本发明的保护之内。

Claims (14)

1.一种信息的可视化展示方法，其特征在于，所述方法包括：

在建立第一客户端与服务端的连接后，所述第一客户端获取当前页面的页面相关信息，并将所述页面相关信息上传至所述服务端；其中，所述页面相关信息包括所述当前页面的页面图片信息、当前页面的页面标识和位于所述当前页面上的各个可点击控件的控件信息；

所述服务端将所述页面相关信息推送至第二客户端；

所述第二客户端接收到所述页面相关信息后，根据所述页面相关信息从所述服务端获取所述当前页面所对应的操作信息；其中，所述操作信息包括各个所述可点击控件的点击信息；

所述第二客户端根据所述点击信息在所述页面图片上对各个所述可点击控件进行标记，并建立各个所述可点击控件与对应的所述点击信息的关联关系，以在所述标记后的页面图片的展示界面上对所述可点击控件与所述点击信息进行关联展示，实现所述点击信息的可视化展示。

2.如权利要求1所述的方法，其特征在于，所述控件信息包括Xpath信息、坐标信息和大小信息；所述点击信息包括点击数量；

相应的，所述第二客户端根据所述点击信息在所述页面图片上对各个所述可点击控件进行标记，包括：

所述第二客户端根据各个所述可点击控件所对应的所述Xpath信息、所述坐标信息和大小信息，确定所述可点击控件在所述当前页面上的区域信息；

所述第二客户端根据各个所述可点击控件所对应的区域信息，在所述页面图片上绘制所述可点击控件的外框，并根据所述可点击控件的点击数量使用不同的颜色对所述外框进行标记。

3.如权利要求2所述的方法，其特征在于，所述建立各个所述可点击控件与对应的所述点击信息的关联关系，以在所述标记后的页面图片的展示界面上对所述可点击控件与所述点击信息进行关联展示，包括：

所述第二客户端建立所述区域信息与所述点击信息的关联关系，以使得在所述第二客户端展示进行标记后的所述页面图片时，当光标位于所述区域信息所对应区域内时，在所述区域旁边或者所述页面图片周围区域显示对应的点击信息。

4.如权利要求1所述的方法，其特征在于，所述操作信息还包括所述当前页面的访问信息；所述访问信息包括访问人数、访问量和平均访问时间；

相应的，所述方法还包括：

所述第二客户端以图形和/或表格的形式在标记后的所述页面图片的展示页面上展示所述访问信息。

5.如权利要求1-4任一项所述的方法，其特征在于，所述方法还包括：

所述服务端通过埋点获取各用户所述第一客户端上各个页面所对应的所述操作信息；其中，所述操作信息包括所述可点击控件所对应的点击信息和所述可点击控件的标识信息；所述标识信息基于所述可点击控件的Xpath信息和所述用户访问所述页面时所使用的设备信息生成。

6.如权利要求1-4任一项所述的方法，其特征在于，通过如下步骤建立所述第一客户端与所述服务端的连接：

在所述第二客户端与所述服务端建立连接后，所述第二客户端从所述服务端获取所述服务端的登录图形码信息，并展示所述登录图形码；其中，所述登录图形码包括登录二维码；

所述第一客户端通过扫描的方式从所述第二客户端获取所述登录图形码，通过解析所述登录图形码建立与所述服务端的连接。

7.如权利要求1-4任一项所述的方法，其特征在于，所述页面图片信息为所述页面图片的统一资源定位符URL地址；

相应的，所述第一客户端获取当前页面的页面相关信息，并将所述页面相关信息上传至所述服务端，包括：

所述第一客户端按照预设时间间隔获取所述当前页面的页面标识和可点击控件的控件信息；

所述第一客户端检测当前获取的所述页面标识与前一次获取的所述页面标识是否一致，以及，检测当前获取的所述控件信息与前一次获取的所述控件信息是否一致；

若所述页面标识和/或所述控件信息不一致，获取所述当前页面的页面图片，并将所述页面图片上传至服务端，并从所述服务端获取所述页面图片在所述服务端的URL地址；

所述第一客户端将所述URL地址、所述页面标识和所述控件信息上传至所述服务端。

8.一种信息的可视化展示系统，其特征在于，所述系统包括：第一客户端、第二客户端和服务端；所述第一客户端和所述第二客户端均与所述服务端建立连接；

所述第一客户端，用于在建立与服务端的连接后，获取当前页面的页面相关信息，并将所述页面相关信息上传至所述服务端；其中，所述页面相关信息包括所述当前页面的页面图片信息、当前页面的页面标识和位于所述当前页面上的各个可点击控件的控件信息；

所述服务端，用于将所述页面相关信息推送至第二客户端；

所述第二客户端，用于接收到所述页面相关信息后，根据所述页面相关信息从所述服务端获取所述当前页面所对应的操作信息；其中，所述操作信息包括各个所述可点击控件的点击信息；以及，根据所述点击信息在所述页面图片上对各个所述可点击控件进行标记，并建立各个所述可点击控件与对应的所述点击信息的关联关系，以在所述标记后的页面图片的展示界面上对所述可点击控件与所述点击信息进行关联展示，实现所述点击信息的可视化展示。

9.如权利要求8所述的系统，其特征在于，所述控件信息包括Xpath信息、坐标信息和大小信息；所述点击信息包括点击数量；

相应的，所述第二客户端具体用于：

根据各个所述可点击控件所对应的所述Xpath信息、所述坐标信息和大小信息，确定所述可点击控件在所述当前页面上的区域信息；并根据各个所述可点击控件所对应的区域信息，在所述页面图片上绘制所述可点击控件的外框，并根据所述可点击控件的点击数量使用不同的颜色对所述外框进行标记。

10.如权利要求9所述的系统，其特征在于，所述第二客户端还具体用于：

建立所述区域信息与所述点击信息的关联关系，以使得在所述第二客户端展示进行标记后的所述页面图片时，当光标位于所述区域信息所对应区域内时，在所述区域旁边或者所述页面图片周围区域显示对应的点击信息。

11.如权利要求8所述的系统，其特征在于，所述操作信息还包括所述当前页面的访问信息；所述访问信息包括访问人数、访问量和平均访问时间；

相应的，所述第二客户端还用于：

以图形和/或表格的形式在标记后的所述页面图片的展示页面上展示所述访问信息。

12.如权利要求8-11任一项所述的系统，其特征在于，所述服务端还用于：

通过埋点获取各用户所述第一客户端上各个页面所对应的所述操作信息；其中，所述操作信息包括所述可点击控件所对应的点击信息和所述可点击控件的标识信息；所述标识信息基于所述可点击控件的Xpath信息和所述用户访问所述页面时所使用的设备信息生成。

13.如权利要求8-11任一项所述的系统，其特征在于，

所述第二客户端，还用于在与所述服务端建立连接后，从所述服务端获取所述服务端的登录图形码信息，并展示所述登录图形码；其中，所述登录图形码包括登录二维码；

所述第一客户端，还用于通过扫描的方式从所述第二客户端获取所述登录图形码，通过解析所述登录图形码建立与所述服务端的连接。

14.如权利要求8-11任一项所述的系统，其特征在于，所述页面图片信息为所述页面图片的统一资源定位符URL地址；

所述第一客户端，具体用于：

按照预设时间间隔获取所述当前页面的页面标识和可点击控件的控件信息；检测当前获取的所述页面标识与前一次获取的所述页面标识是否一致，以及，检测当前获取的所述控件信息与前一次获取的所述控件信息是否一致；若所述页面标识和/或所述控件信息不一致，获取所述当前页面的页面图片，并将所述页面图片上传至服务端，并从所述服务端获取所述页面图片在所述服务端的URL地址；将所述URL地址、所述页面标识和所述控件信息上传至所述服务端。

Images