一种页面数据处理方法及装置与流程

1.本公开实施例涉及数据分析技术领域，具体涉及一种页面数据处理方法、装置、电子设备及存储介质。


背景技术：

2.目前，针对页面(例如网页页面)数据的分析，通常基于分析报表进行。分析报表是以表格或者图形的形式展示约定好的页面区域一段时间的相关数据，相关数据包括但不限于访客访问(page view，pv)数据。
3.然而，分析报表通常独立于页面，也即，分析报表并非展示在其对应的页面区域所处的页面位置，因此，无法将分析报表与页面区域直观地关联，进而，无法满足用户从页面上直观了解某个区域的相关数据的需求。
4.另外，基于分析报表进行页面数据分析，无法通过点击页面某一区域来获取该区域一段时间的相关数据，因而无法满足用户交互式体验。


技术实现要素：

5.为了解决现有技术存在的至少一个问题，本公开的至少一个实施例提供了一种页面数据处理方法、装置、电子设备及存储介质。
6.第一方面，本公开实施例提出一种页面数据处理方法，应用于页面端，其中，预先配置采集组件和跨端组件，该页面数据处理方法包括：
7.采集组件响应目标页面的打开，判断是否唤醒跨端组件；
8.采集组件采集针对目标页面的相关数据，并将相关数据上报服务端；
9.跨端组件被唤醒后建立与服务端之间的跨端连接，并将目标页面的跨端信息通过跨端连接发送给服务端。
10.在一些实施例中，预先配置采集组件和跨端组件包括：
11.若目标页面为网页页面，则采集组件中预先配置有跨端组件，且目标页面对应的页面代码中预先配置有采集组件对应的脚本；或，
12.若目标页面为应用程序页面，则在应用程序中配置采集组件和跨端组件；或，
13.若目标页面为小程序页面，则在小程序框架中配置采集组件和跨端组件。
14.在一些实施例中，采集组件响应目标页面的打开，判断是否唤醒跨端组件包括：
15.采集组件响应目标页面的打开，检测目标页面的url地址的参数中是否包括跨端标识，或者，检测目标页面对应的二维码中是否包括跨端标识；
16.采集组件若检测到跨端标识，则唤醒跨端组件。
17.在一些实施例中，采集组件采集针对目标页面的相关数据包括：
18.采集组件响应目标页面的打开，从内容分发网络获取埋点配置信息，并基于埋点配置信息采集针对目标页面的相关数据。
19.在一些实施例中，埋点配置信息包括访问埋点、点击事件埋点和曝光事件埋点中
至少一种埋点的配置信息；访问埋点、点击事件埋点和曝光事件埋点中的至少一种埋点为可视化埋点或代码化埋点；
20.针对目标页面的相关数据包括访问数据、点击数据和曝光数据中的至少一种数据。
21.在一些实施例中，该页面数据处理方法还包括：
22.采集组件基于埋点配置信息在目标页面的文档对象模型的至少一个节点上打标，打标对应的节点为点击事件埋点和/或曝光事件埋点所在节点。
23.在一些实施例中，跨端组件被唤醒后建立与服务端之间的跨端连接包括：
24.跨端组件被唤醒后，从目标页面的url地址的参数中提取跨端标识，或者，从目标页面对应的二维码中提取跨端标识；
25.跨端组件基于跨端标识建立与服务端之间的跨端连接。
26.在一些实施例中，该页面数据处理方法还包括：
27.页面端响应页面跨端操作，在目标网页的url地址的参数中配置跨端标识；
28.页面端在配置跨端标识后，打开目标网页。
29.第二方面，本公开实施例还提出一种页面数据处理方法，应用于投屏分析端，其中，预先配置采集组件和跨端组件，该页面数据处理方法包括：
30.从服务端获取针对目标页面的相关数据，相关数据为采集组件采集并上报给服务端的数据；
31.与服务端建立跨端连接，通过跨端连接从服务端获取跨端组件发送的目标页面的跨端信息；
32.基于目标页面的跨端，生成跨端页面；
33.基于针对目标页面的相关数据，在跨端页面上进行可视化分析。
34.在一些实施例中，与服务端建立跨端连接包括：
35.基于跨端标识与服务端建立第二跨端连接，其中，跨端标识为跨端组件与服务端建立第一跨端连接时使用的跨端标识。
36.在一些实施例中，基于针对目标页面的相关数据，在跨端页面上进行可视化分析包括：
37.获取服务端预先存储的埋点配置信息；
38.基于埋点配置信息，将针对目标页面的相关数据渲染到跨端页面上；
39.对渲染到跨端页面上的相关数据进行可视化分析。
40.第三方面，本公开实施例还提出一种页面数据处理装置，应用于页面端，该页面数据处理装置包括：
41.采集组件，用于响应目标页面的打开，判断是否唤醒跨端组件，以及，采集针对目标页面的相关数据，并将相关数据上报服务端；
42.跨端组件，用于跨端组件被唤醒后建立与服务端之间的跨端连接，并将目标页面的跨端信息通过跨端连接发送给服务端。
43.第四方面，本公开实施例还提出一种页面数据处理装置，应用于投屏分析端，该页面数据处理装置包括：
44.第一获取单元，用于从服务端获取针对目标页面的相关数据，相关数据为采集组
件采集并上报给服务端的数据；
45.第二获取单元，用于与服务端建立跨端连接，通过跨端连接从服务端获取跨端组件发送的目标页面的跨端信息；
46.生成单元，用于基于目标页面的跨端信息，生成跨端页面；
47.可视化分析单元，用于基于针对目标页面的相关数据，在跨端页面上进行可视化分析。
48.第五方面，本公开实施例还提出一种电子设备，包括：处理器和存储器；处理器通过调用存储器存储的程序或指令，用于执行如第一方面或第二方面任一实施例提供的页面数据处理方法的步骤。
49.第六方面，本公开实施例还提出一种计算机可读存储介质，其中，计算机可读存储介质存储程序或指令，程序或指令使计算机执行如第一方面或第二方面任一实施例提供的页面数据处理方法的步骤。
50.可见，本公开的至少一个实施例中，通过预先配置采集组件和跨端组件，当页面被打开时，采集组件可以判断是否唤醒跨端组件；进而，跨端组件在被唤醒后可以建立与服务端之间的跨端连接，并将页面的跨端信息通过跨端连接发送给服务端；而采集组件则可以采集针对该页面的相关数据，并将相关数据上报服务端；因此，可以通过跨端方式从服务端获取页面的跨端信息，生成跨端页面；从而，基于从服务端获取的针对该页面的相关数据，在跨端页面上进行可视化分析，使用户直观了解页面中不同区域的相关数据，另外还可以提升用户的交互体验。
附图说明
51.为了更清楚地说明本公开实施例的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本公开的一些实施例，对于本领域普通技术人员来讲，还可以根据这些附图获得其他的附图。
52.图1是本公开实施例提供的一种示例性应用场景图；
53.图2是本公开实施例提供的另一种示例性应用场景图；
54.图3是本公开实施例提供的一种应用于页面端的页面数据处理方法的示例性流程图；
55.图4是本公开实施例提供的一种应用于投屏分析端的页面数据处理方法的示例性流程图；
56.图5是本公开实施例提供的一种应用于页面端的页面数据处理装置的示例性框图；
57.图6是本公开实施例提供的一种应用于投屏分析端的页面数据处理装置的示例性框图；
58.图7是本公开实施例提供的一种电子设备的示例性框图；
59.图8是本公开实施例提供的一种页面选择界面的示意图；
60.图9是本公开实施例提供的一种页面跨端提示界面的示意图；
61.图10至图14为本公开实施例提供的一种页面可视化分析过程中对应的多个效果示意图。
具体实施方式
62.为了能够更清楚地理解本公开的上述目的、特征和优点，下面结合附图和实施例对本公开作进一步的详细说明。可以理解的是，所描述的实施例是本公开的一部分实施例，而不是全部的实施例。此处所描述的具体实施例仅仅用于解释本公开，而非对本公开的限定。基于所描述的本公开的实施例，本领域普通技术人员所获得的所有其他实施例，都属于本公开保护的范围。
63.需要说明的是，在本文中，诸如“第一”和“第二”等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。
64.考虑到目前通常基于分析报表进行页面(例如网页页面)数据的分析，无法将分析报表与页面区域直观地关联，也无法通过点击页面某一区域来获取该区域一段时间的相关数据，因此，无法满足用户从页面上直观了解某个区域的相关数据的需求，也无法满足用户交互式体验。
65.为此，本公开至少一个实施例提供了一种页面可视化分析方案，通过页面跨端(跨端可以理解为投屏)，将页面从一台设备的浏览器跨端到另一台设备的浏览器上，或者将页面从一个浏览器跨端到另一个浏览器上，进而在跨端页面(可以理解为投屏页面或镜像页面)上进行交互式的可视化分析。其中，交互式例如：点击页面上某个区域，即可在该区域展示对应的访客访问数据，点击数据和/或曝光数据；可视化例如：将页面上某个区域的访问人数和访问次数展示在该区域上。因此，既能满足用户从页面上直观了解某个区域的相关数据的需求，也能满足用户交互式体验。
66.在一些实施例中，本公开实施例提供的页面可视化分析方案通过预先配置采集组件和跨端组件，其中，采集组件事先锚点，用于采集针对页面的相关数据并发送给服务端，相关数据包括但不限于访客访问数据；跨端组件，用于将页面的跨端信息发送给服务端；进而，可以通过跨端方式从服务端获取页面的跨端信息，生成跨端页面；从而，基于从服务端获取的针对该页面的相关数据，在跨端页面上进行可视化分析。既能满足用户从页面上直观了解某个区域的相关数据的需求，也能满足用户交互式体验。另外，本公开实施例提供的页面可视化分析方案不依赖第三方插件即可实现页面可视化分析。此外，本公开实施例提供的页面可视化分析方案并非在业务页面上直接拉取数据进行分析，因而不存在跨域等安全问题。
67.在一些实施例中，本公开实施例提供了一种页面数据处理方法、装置、电子设备及存储介质，通过预先配置采集组件和跨端组件，当页面被打开时，采集组件可以判断是否唤醒跨端组件；进而，跨端组件在被唤醒后可以建立与服务端之间的跨端连接，并将页面的跨端信息通过跨端连接发送给服务端；而采集组件则可以采集针对该页面的相关数据，并将相关数据上报服务端；因此，可以通过跨端方式从服务端获取页面的跨端信息，生成跨端页面；从而，基于从服务端获取的针对该页面的相关数据，在跨端页面上进行可视化分析，使用户直观了解页面中不同区域的相关数据，另外还可以提升用户的交互体验。
68.图1是本公开实施例提供的一种示例性应用场景图，在图1中，页面端11为可以打开页面但不对页面进行可视化分析的任意端，其中，页面可以为网页(web)页面、应用程序(app)页面和小程序页面中的任一种。在一些实施例中，页面例如为业务页面，业务页面中
包括多个页面区块或坑位，页面区块例如包括但不限于：登录框、轮播图、商品列表等，坑位可以理解为商品的展示位。页面端11可以为软件实现，硬件实现或者软硬件相结合来实现。在一些实施例中，页面端11可以实现为智能手机、笔记本电脑、平板电脑等便携移动式设备，还可以实现为pc(personal computer，个人计算机)、台式计算机、智能电视等固定式设备。
69.服务端12为提供页面跨端服务和可视化分析服务的任意端，服务端12可以为软件实现，硬件实现或者软硬件相结合来实现。在一些实施例中，服务端12具有数据加工功能，例如，服务端12可以对获取的数据进行清洗、将清洗后的数据按照数据库的行列范式进行整理并存入数据库、基于数据库中的数据生成指标(指标包括但不限于：按天统计的指标、按人统计的指标等)。在一些实施例中，服务端12可以实现为服务器，服务器可以是本地的或远程的；服务端12还可以实现为服务器群组，服务器群组可以是集中式的或分布式的。
70.投屏分析端13为可以进行页面跨端并在跨端页面上进行可视化分析的任意端。投屏分析端13可以为软件实现，硬件实现或者软硬件相结合来实现。在一些实施例中，投屏分析端13可以实现为智能手机、笔记本电脑、平板电脑等便携移动式设备，还可以实现为pc、台式计算机、智能电视等固定式设备。
71.在图1中，服务端12可以预先配置采集组件和跨端组件，其中，采集组件可以实现为采集sdk(software development kit，软件开发工具包)；跨端组件可以实现为跨端sdk，跨端sdk用以实现页面投屏，因此跨端sdk也可以理解为投屏sdk。若目标页面为网页页面，其中，目标页面为可以进行可视化分析的页面，则服务端12可以预先将采集组件和跨端组件配置到目标网页中。例如，服务端12将跨端组件配置到采集组件中，然后将采集组件对应的脚本配置到页面对应的页面代码中。若目标页面为应用程序页面，则服务端12在应用程序中配置采集组件和跨端组件。若目标页面为小程序页面，则服务端12在小程序框架中配置采集组件和跨端组件。页面端11在打开目标页面后，采集组件可以判断是否唤醒跨端组件；进而，跨端组件在被唤醒后可以建立与服务端12之间的跨端连接，并将页面的跨端信息通过跨端连接发送给服务端12；而采集组件则可以采集针对该目标页面的相关数据，并将相关数据上报服务端12。投屏分析端13可以通过跨端方式从服务端12获取目标页面的跨端信息，生成跨端页面；从而，投屏分析端13基于从服务端12获取的针对该目标页面的相关数据，在跨端页面上进行可视化分析。
72.在一些实施例中，跨端组件在被唤醒后可以使用跨端标识与服务端12建立跨端连接，这样，服务端12即可获取到跨端标识，进而服务端12可以使用同一跨端标识与投屏分析端13建立跨端连接。在一些实施例中，跨端标识为跨端令牌(跨端token)，若用户通过扫码跨端二维码的方式打开目标页面，那么跨端标识可以预先配置到跨端二维码中，这样，采集组件响应目标页面的打开，可以从跨端二维码中获取跨端标识；若用户通过点击跨端控件打开目标页面，那么页面端11响应页面跨端操作(即点击跨端控件)，在目标页面的url(uniform resource locator，统一资源定位)地址的参数中配置跨端标识后，再打开目标页面，这样，采集组件响应目标页面的打开，可以从目标页面的url地址的参数中提取跨端标识。
73.图2为本公开实施例提供的另一种示例性应用场景图，在图2中，投屏分析端21为可以打开页面、将页面跨端到本地并在跨端页面上进行可视化分析的任意端。其中，将页面
跨端到本地可以是将页面跨端到本地同一浏览器的不同标签页，也可以是将页面跨端到本地不同的浏览器。在一些实施例中，投屏分析端21可以实现为智能手机、笔记本电脑、平板电脑等便携移动式设备，还可以实现为pc、台式计算机、智能电视等固定式设备。投屏分析端21可以理解为图1中页面端11和投屏分析端13在同一设备中的实现。服务端22为提供页面可视化分析服务的任意端，与图1所示的服务端12的功能相同，不再赘述。
74.在一些实施例中，投屏分析端21可以提供页面选择界面。在页面选择界面中，可以展示页面列表，页面列表中可以显示一个或多个页面，用户可以从页面列表中选择一个页面进行可视化分析。在一些实施例中，页面列表中显示的任一页面均是经过配置的页面，例如，在页面中预先配置采集组件和跨端组件，并且在该页面对应的跨端页面中进行了可视化埋点。其中，可视化埋点是预先在目标页面对应的跨端页面中进行可视化配置的埋点，实现了app页面、web页面和小程序页面三端一致的埋点可视化配置。针对app页面进行埋点可视化配置时，投屏分析端21可以通过跨端连接获取app页面的截图并基于截图生成跨端页面，还可以通过跨端连接获取需要埋点的组件的坐标，这样，用户可以在投屏分析端21上基于需要埋点的组件的坐标在app页面的跨端页面上进行埋点可视化配置，其中，组件为app页面中的界面组件，例如表格、列表框、坑位等。
75.因此，若要将一个页面添加到页面列表中，需要先在页面中配置采集组件和跨端组件，并且在该页面对应的跨端页面中进行了可视化埋点后，再将该页面添加到页面列表中。
76.在一些实施例中，页面选择界面如图8所示，页面选择界面中的页面列表可以包括多个列表项，例如包括但不限于：页面名称、页面url地址和操作。在“操作”这个列表项中展示控件，该控件的命名为“进入可视化分析”，以便引导用户点击该控件，这样，投屏分析端21响应该控件的点击，展示页面跨端提示界面。
77.在一些实施例中，页面跨端提示界面如图9所示，在页面跨端提示界面中，可以展示页面跨端的相关提示信息，例如包括但不限于：跨端页面url地址和跨端方式。跨端页面url地址为用户选择的可视化跨端页面(即目标页面)的url地址。跨端方式包括两种：直接跨端和扫码跨端。在页面跨端提示界面中，对应直接跨端而展示跨端控件，对应扫码跨端而展示二维码。直接跨端针对pc和普通h5(html5，一种超文本标记语言)页面。扫码跨端针对依赖手机端渲染的特殊h5页面。在图9中，aplusjs可以理解为前文提及的跨端组件。
78.投屏分析端21响应跨端控件的点击，可以打开跨端页面url地址对应的页面(即目标页面)。由于该目标页面中预先配置有采集组件和跨端组件，因此，采集组件响应目标页面的打开，判断是否唤醒跨端组件。为了确保用户点击跨端控件后，采集组件能够唤醒跨端组件，因此，投屏分析端21响应跨端控件的点击，在跨端页面url地址的参数中配置跨端标识，跨端标识例如为跨端令牌(跨端token)。投屏分析端21在跨端页面url地址的参数中配置跨端标识后，再打开跨端页面url地址对应的目标页面。这样，采集组件响应目标页面的打开，可以检测到目标页面的url地址的参数中包括跨端标识，进而唤醒跨端组件。另外，针对跨端二维码，可以预先基于跨端标识生成跨端二维码，也即，生成的跨端二维码中包括跨端标识。这样，采集组件响应目标页面的打开，可以检测跨端二维码中包括跨端标识，进而唤醒跨端组件。
79.跨端组件被唤醒后使用跨端标识与服务端22建立跨端连接，进而，跨端组件将目
标页面的跨端信息通过跨端连接发送给服务端22；而采集组件则可以采集针对目标页面的相关数据，并将相关数据上报服务端22。
80.服务端22在与跨端组件建立第一跨端连接后，可以使用同一跨端标识与投屏分析端21建立第二跨端连接，这样，投屏分析端21可以通过跨端方式从服务端22获取目标页面的跨端信息，生成跨端页面；从而，投屏分析端21基于从服务端22获取的针对该目标页面的相关数据，在跨端页面上进行可视化分析，使用户直观了解目标页面中不同区域的相关数据，另外还可以提升用户的交互体验。
81.图3是本公开实施例提供的一种应用于页面端的页面数据处理方法的示例性流程图，该页面数据处理方法可以应用于图1中的页面端11，还可以应用于图2中的投屏分析端21。本公开实施例有个前提条件：预先配置采集组件和跨端组件。若目标页面为网页页面，则预先将采集组件和跨端组件配置到网页页面中。例如，采集组件中预先配置有跨端组件，且目标页面对应的页面代码中预先配置有采集组件对应的脚本，这样，实现了在目标页面预先配置采集组件和跨端组件。若目标页面为应用程序页面，则在应用程序中配置采集组件和跨端组件。若目标页面为小程序页面，则在小程序框架中配置采集组件和跨端组件。
82.如图3所示，在步骤301中，采集组件响应目标页面的打开，判断是否唤醒跨端组件。
83.若目标页面不需要可视化分析，例如用户浏览目标页面提供的内容，比如浏览某件商品，那么，目标页面被打开后，采集组件不唤醒跨端组件。若目标页面需要进行可视化分析，那么，目标页面被打开后，采集组件唤醒跨端组件。对于采集组件而言，采集组件通过判断是否唤醒跨端组件，实现判断目标页面是否进行可视化分析。
84.在步骤302中，采集组件采集针对目标页面的相关数据，并将相关数据上报服务端。
85.其中，针对目标页面的相关数据包括访问数据，例如访问人数(或访问设备数，表示有多少设备访问了该目标页面)、访问时间等；针对目标页面的相关数据还可以包括点击数据，例如点击次数、点击人数、点击时间、点击的坑位等；针对目标页面的相关数据还可以包括曝光数据，例如曝光的坑位、曝光次数、曝光时间等。
86.采集组件将针对目标页面的相关数据上报服务端后，服务端可以对这些数据进行处理加工，例如：服务端可以对获取的数据进行清洗、将清洗后的数据按照数据库的行列范式进行整理并存入数据库、基于数据库中的数据生成指标(指标包括但不限于：按天统计的指标、按人统计的指标等)。
87.在步骤303中，跨端组件被唤醒后建立与服务端之间的跨端连接，并将目标页面的跨端信息通过跨端连接发送给服务端。
88.其中，跨端连接例如为websocket(基于tcp(transmission control protocol，传输控制协议)的全双工通信协议)连接。
89.若目标页面为小程序页面或者网页页面，则跨端信息为目标页面的文档对象模型(document object mode，dom)信息。跨端组件可以将目标页面的文档对象模型(document object mode，dom)转换为字符串、图片或二进制信息等多种形式的文档对象模型信息，进而将文档对象模型信息通过websocket连接发送给服务端。在一些实施例中，跨端组件实时监听目标页面的dom的变化，将产生变化的dom节点或整个dom转换为字符串，并将字符串通
过websocket连接发送给服务端。
90.若目标页面为app页面，则跨端信息为目标页面的截图。跨端组件可以对目标页面进行截图，并将目标页面的截图通过websocket连接发送给服务端。在一些实施例中，跨端组件对目标页面进行实时截图，并将截图通过websocket连接实时发送给服务端。
91.因此，图1中的投屏分析端13或者图2中的投屏分析端21可以通过跨端方式从服务端获取目标页面的跨端信息，生成跨端页面；从而，基于从服务端获取的针对该目标页面的相关数据，在跨端页面上进行可视化分析，使用户直观了解目标页面中不同区域的相关数据，另外还可以提升用户的交互体验。
92.在一些实施例中，采集组件响应目标页面的打开，判断是否唤醒跨端组件的一种实施方式为：
93.采集组件响应目标页面的打开，检测目标页面的url地址的参数中是否包括跨端标识，或者，检测目标页面对应的二维码中是否包括跨端标识；采集组件若检测到跨端标识，则唤醒跨端组件；采集组件若未检测到跨端标识，则不唤醒跨端组件。
94.其中，跨端标识例如为跨端令牌(跨端token)，若用户通过扫码跨端二维码的方式打开目标页面，那么跨端标识可以预先配置到跨端二维码中，这样，采集组件响应目标页面的打开，可以从跨端二维码中获取跨端标识；若用户通过点击跨端控件打开页面，那么图1中的投屏分析端13或者图2中的投屏分析端21可以响应跨端控件的点击，在目标页面的url地址的参数中配置跨端标识后，再打开目标页面，这样，采集组件响应目标页面的打开，可以从目标页面的url地址的参数中提取跨端标识。
95.在一些实施例中，采集组件采集针对目标页面的相关数据的一种实施方式为：
96.采集组件响应目标页面的打开，从内容分发网络(content delivery network，cdn)获取埋点配置信息，并基于埋点配置信息采集针对目标页面的相关数据。
97.其中，埋点配置信息由服务端生成，并由服务端发布到cdn上。在一些实施例中，服务端也可以在本地存储一份相同的埋点配置信息。
98.在一些实施例中，埋点配置信息包括访问埋点、点击事件埋点和曝光事件埋点中至少一种埋点的配置信息；访问埋点、点击事件埋点和曝光事件埋点中的至少一种埋点为可视化埋点或代码化埋点。
99.采集组件基于埋点配置信息采集针对目标页面的相关数据包括访问数据、点击数据和曝光数据中的至少一种。例如，采集组件可以识别点击事件并上报，用户点击n次(n为大于等于1的正整数)则触发n次点击事件。采集组件可以识别曝光事件并上报，例如，某个坑位曝光了n次，则触发1次曝光事件，曝光触发条件为坑位30％秒级相对视口达到500ms，本领域技术人员也可以根据实际场景设置不同的曝光触发条件。
100.在一些实施例中，采集组件从内容分发网络获取埋点配置信息后，还可以基于埋点配置信息在目标页面的文档对象模型的至少一个节点上打标，打标对应的节点为点击事件埋点和/或曝光事件埋点所在节点。其中，采集组件可以基于web页面的一种打标标准进行打标，本方案不再详述打标过程。
101.在一些实施例中，跨端组件被唤醒后建立与服务端之间的跨端连接的一种实现方式为：
102.跨端组件被唤醒后，跨端组件可以获取跨端标识，进而基于跨端标识与服务端建
立跨端连接。跨端组件获取跨端标识的一种方式为：跨端组件从采集组件获取跨端标识，或者，采集组件唤醒跨端组件后主动将跨端标识传递给跨端组件。跨端组件获取跨端标识的另一种方式为：跨端组件被唤醒后，从目标页面的url地址的参数中提取跨端标识，或者，从目标页面对应的二维码中提取跨端标识。
103.图4是本公开实施例提供的一种应用于投屏分析端的页面数据处理方法的示例性流程图，该页面数据处理方法可以应用于图1中的投屏分析端13，还可以应用于图2中的投屏分析端21。本公开实施例有个前提条件：预先配置采集组件和跨端组件。若目标页面为网页页面，则预先将采集组件和跨端组件配置到网页页面中。若目标页面为应用程序页面，则在应用程序中配置采集组件和跨端组件。若目标页面为小程序页面，则在小程序框架中配置采集组件和跨端组件。
104.如图4所示，在步骤401中，从服务端获取针对目标页面的相关数据，相关数据为采集组件采集并上报给服务端的数据。
105.在步骤402中，与服务端建立跨端连接，通过跨端连接从服务端获取跨端组件发送的目标页面的跨端信息。
106.其中，跨端连接例如为websocket连接，通过与服务端建立websocket连接，可以从服务端获取跨端组件发送的目标页面的跨端信息。
107.在步骤403中，基于目标页面的跨端信息，生成跨端页面。
108.若目标页面为web页面或小程序页面时，文档对象模型信息例如为目标页面的dom的字符串。因此，通过解析目标页面的dom的字符串，可以渲染生成静态页面，也即跨端页面。若文档对象模型信息为其他形式的信息时，例如为dom的图片或者二进制信息时，可以通过对应的解析方式得到dom，进而基于dom渲染生成静态页面。由dom生成对应的页面，属于计算机领域成熟技术，在此不再赘述。
109.若目标页面为app页面时，可以基于目标页面的截图生成跨端页面。由截图生成对应的页面，属于计算机技术领域成熟技术，在此不再赘述。
110.在步骤404中，基于针对目标页面的相关数据，在跨端页面上进行可视化分析。
111.其中，可视化分析包括但不限于：坑位点击和曝光分析、应用和页面分析、热力分析、对比分析和路径分析等中的至少一种分析。而应用和页面分析、热力分析、对比分析和路径分析均是基于目标页面的相关数据进行分析，具体的分析方式可沿用目前已有的分析方式，不再赘述。
112.可见，通过跨端方式从服务端获取页面的跨端信息，生成跨端页面；从而，基于从服务端获取的针对该页面的相关数据，在跨端页面上进行可视化分析，使用户直观了解页面中不同区域的相关数据，另外还可以提升用户的交互体验。
113.在一些实施例中，在步骤402中与服务端建立跨端连接时，可以基于跨端标识与服务端建立第二跨端连接，其中，跨端标识为跨端组件与服务端建立第一跨端连接时使用的跨端标识。由于跨端组件与服务端建立第一跨端连接时，服务端即可获取到跨端标识，因此，服务端可以主动使用跨端标识与本实施例的执行主体(例如为图1中的投屏分析端13或图2中的投屏分析端21)建立第二跨端连接。
114.在一些实施例中，在步骤404中基于针对目标页面的相关数据，在跨端页面上进行可视化分析的一种实施方式为：
115.获取服务端预先存储的埋点配置信息；进而基于埋点配置信息，将针对目标页面的相关数据渲染到跨端页面上；从而对渲染到跨端页面上的相关数据进行可视化分析。
116.例如，将访问数据展示在跨端页面上。将点击数据渲染到跨端页面的dom的点击事件埋点所在节点上，并将曝光数据渲染到跨端页面的dom的曝光事件埋点所在节点上，这样，可以关联点击位置和点击数据，并在跨端页面上进行展示；还可以关联曝光位置和曝光数据，并在跨端页面上进行展示。用户可以直观地从跨端页面上看到不同坑位被点击和曝光的数据，同时，用户也可以点击某个坑位，查看该坑位的点击数据和曝光数据。
117.图10至图14为本公开实施例提供的一种页面可视化分析过程中对应的多个效果示意图。其中，图10示出了需要进行可视化分析的目标页面示意图。图11示出了图10所示的目标页面对应的跨端页面示意图。在图11中，除了包括目标页面本身的界面内容之外，还包括用于可视化分析的界面内容，包括但不限于：埋点分类、坑位点击热度等。在图11中，在埋点分类中选择的是页面，因此，跨端页面中显示页面数据，包括但不限于页面访问次数、页面访问设备数等。若在埋点分类中选择坑位(默认选择坑位的点击次数)，则对应图12，在图12中，数据报表替换了图11中的页面数据，在数据报表中，显示不同点击事件埋点所在位置的点击次数，同时在跨端页面上对应点击事件埋点所在位置渲染出点击次数。图13示出了在埋点分类中选择坑位的曝光次数的示意图，在图13中，由于选择了曝光次数，因此，数据报表中显示不同曝光事件埋点所在位置的曝光次数。图14示出了图13选择曝光次数后对应显示的效果图，在图14中，在跨端页面上对应曝光事件埋点所在位置渲染出曝光次数。
118.需要说明的是，对于前述的各方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员能够理解，本公开实施例并不受所描述的动作顺序的限制，因为依据本公开实施例，某些步骤可以采用其他顺序或者同时进行。另外，本领域技术人员能够理解，说明书中所描述的实施例均属于可选实施例。
119.图5为本公开实施例提供的一种应用于页面端的页面数据处理装置的示例性框图。在一些实施例中，页面数据处理装置50可以实现为图1中页面端11或者图2中的投屏分析端21的一部分。
120.如图5所示，页面数据处理装置50包括采集组件51和跨端组件52。
121.采集组件51，用于响应目标页面的打开，判断是否唤醒跨端组件52，以及，采集针对目标页面的相关数据，并将相关数据上报服务端。
122.跨端组件52，用于跨端组件52被唤醒后建立与服务端之间的跨端连接，并将目标页面的跨端信息通过跨端连接发送给服务端。
123.在一些实施例中，若目标页面为网页页面，则采集组件51中预先配置有跨端组件52，且目标页面对应的页面代码中预先配置有采集组件51对应的脚本。若目标页面为应用程序页面，则采集组件51和跨端组件52预先配置在应用程序中。若目标页面为小程序页面，则采集组件51和跨端组件52预先配置在小程序框架中。
124.在一些实施例中，采集组件51响应目标页面的打开，检测目标页面的url地址的参数中是否包括跨端标识，或者，检测目标页面对应的二维码中是否包括跨端标识；采集组件51若检测到跨端标识，则唤醒跨端组件52。
125.在一些实施例中，采集组件51响应目标页面的打开，从内容分发网络获取埋点配置信息，并基于埋点配置信息采集针对目标页面的相关数据。
126.在一些实施例中，埋点配置信息包括访问埋点、点击事件埋点和曝光事件埋点中至少一种埋点的配置信息；访问埋点、点击事件埋点和曝光事件埋点中的至少一种埋点为可视化埋点或代码化埋点；针对目标页面的相关数据包括访问数据、点击数据和曝光数据中的至少一种数据。
127.在一些实施例中，采集组件51还用于基于埋点配置信息在目标页面的文档对象模型的至少一个节点上打标，打标对应的节点为点击事件埋点和/或曝光事件埋点所在节点。
128.在一些实施例中，跨端组件52被唤醒后，从目标页面的url地址的参数中提取跨端标识，或者，从目标页面对应的二维码中提取跨端标识；跨端组件52基于跨端标识建立与服务端之间的跨端连接。
129.图5相关各实施例提供的页面数据处理装置的细节可以参考图3相关各实施例提供的页面数据处理方法，为避免重复，不再赘述。
130.图6为本公开实施例提供的一种应用于投屏分析端的页面数据处理装置的示例性框图。在一些实施例中，页面数据处理装置60可以实现为图1中投屏分析端13或者图2中的投屏分析端21的一部分。本实施例中，预先配置采集组件和跨端组件。
131.如图6所示，页面数据处理装置60可以包括但不限于：第一获取单元61、第二获取单元62、生成单元63、可视化分析单元64和其他辅助页面数据处理的单元，例如存储单元，用于存储页面数据处理过程中产生的各种数据。
132.第一获取单元61，用于从服务端获取针对目标页面的相关数据，相关数据为采集组件采集并上报给服务端的数据；
133.第二获取单元62，用于与服务端建立跨端连接，通过跨端连接从服务端获取跨端组件发送的目标页面的跨端信息；
134.生成单元63，用于基于目标页面的跨端信息，生成跨端页面；
135.可视化分析单元64，用于基于针对目标页面的相关数据，在跨端页面上进行可视化分析。
136.在一些实施例中，第二获取单元62可以基于跨端标识与服务端建立第二跨端连接，其中，跨端标识为跨端组件与服务端建立第一跨端连接时使用的跨端标识。
137.在一些实施例中，可视化分析单元64具体用于：获取服务端预先存储的埋点配置信息；基于埋点配置信息，将针对目标页面的相关数据渲染到跨端页面上；对渲染到跨端页面上的相关数据进行可视化分析。
138.图6相关各实施例提供的页面数据处理装置的细节可以参考图4相关各实施例提供的页面数据处理方法，为避免重复，不再赘述。
139.需要说明的是，以上各装置实施例中各单元的划分仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如页面数据处理装置中的至少两个单元可以实现为一个单元；页面数据处理装置中的各单元也可以划分为多个子单元。可以理解的是，各个单元或子单元能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。本领域技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能。
140.图7是本公开实施例提供的一种电子设备的结构示意图。如图7所示，电子设备包括：至少一个处理器71、至少一个存储器72和至少一个通信接口73。电子设备中的各个组件
通过总线系统74耦合在一起。通信接口73，用于与外部设备之间的信息传输。可理解地，总线系统74用于实现这些组件之间的连接通信。总线系统74除包括数据总线之外，还包括电源总线、控制总线和状态信号总线。但为了清楚说明起见，在图7中将各种总线都标为总线系统74。
141.可以理解，本实施例中的存储器72可以是易失性存储器或非易失性存储器，或可包括易失性和非易失性存储器两者。
142.在一些实施方式中，存储器72存储了如下的元素，可执行单元或者数据结构，或者他们的子集，或者他们的扩展集：操作系统和应用程序。
143.其中，操作系统，包含各种系统程序，例如框架层、核心库层、驱动层等，用于实现各种基础任务以及处理基于硬件的任务。应用程序，包含各种应用程序，例如媒体播放器(media player)、浏览器(browser)等，用于实现各种应用任务。实现本公开实施例提供的应用于页面端的页面数据处理方法或应用于投屏分析端的页面数据处理方法的程序可以包含在应用程序中。
144.在本公开实施例中，处理器71通过调用存储器72存储的程序或指令，具体的，可以是应用程序中存储的程序或指令，处理器71用于执行本公开实施例提供的应用于页面端的页面数据处理方法或应用于投屏分析端的页面数据处理方法各实施例的步骤。
145.本公开实施例提供的应用于页面端的页面数据处理方法或应用于投屏分析端的页面数据处理方法可以应用于处理器71中，或者由处理器71实现。处理器71可以是一种集成电路芯片，具有信号的处理能力。在实现过程中，上述方法的各步骤可以通过处理器71中的硬件的集成逻辑电路或者软件形式的指令完成。上述的处理器71可以是通用处理器、数字信号处理器(digital signal processor，dsp)、专用集成电路(application specific integrated circuit，asic)、现成可编程门阵列(field programmable gate array，fpga)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。
146.本公开实施例提供的应用于页面端的页面数据处理方法或应用于投屏分析端的页面数据处理方法的步骤可以直接体现为硬件译码处理器执行完成，或者用译码处理器中的硬件及软件单元组合执行完成。软件单元可以位于随机存储器，闪存、只读存储器，可编程只读存储器或者电可擦写可编程存储器、寄存器等本领域成熟的存储介质中。该存储介质位于存储器72，处理器71读取存储器72中的信息，结合其硬件完成方法的步骤。
147.本公开实施例还提出一种计算机可读存储介质，所述计算机可读存储介质存储程序或指令，所述程序或指令使计算机执行如应用于页面端的页面数据处理方法或应用于投屏分析端的页面数据处理方法各实施例的步骤，为避免重复描述，在此不再赘述。在一些实施例中，计算机可读存储介质为非暂态计算机可读存储介质。
148.本公开实施例还提出一种计算机程序产品，其中，该计算机程序产品包括计算机程序，该计算机程序存储在非暂态计算机可读存储介质中，计算机的至少一个处理器从存储介质读取并执行该计算机程序，使得计算机执行如应用于页面端的页面数据处理方法或应用于投屏分析端的页面数据处理方法各实施例的步骤，为避免重复描述，在此不再赘述。
149.需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而
且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括
……”
限定的要素，并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。
150.本领域的技术人员能够理解，尽管在此所述的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本公开的范围之内并且形成不同的实施例。
151.本领域的技术人员能够理解，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。
152.虽然结合附图描述了本公开的实施方式，但是本领域技术人员可以在不脱离本公开的精神和范围的情况下做出各种修改和变型，这样的修改和变型均落入由所附权利要求所限定的范围之内。