CN110020344B - 一种网页页面元素标注方法及系统 - Google Patents

Abstract

本发明涉及一种基于网页图像快照与页面元素布局结合确定页面元素在网页中的位置，并根据页面元素在网页中的位置实现元素标注的网页转化无码标注技术，该技术不需使用特定浏览器插件，且方便广告主用户通过常规鼠标操作对页面元素进行标注。

Description

一种网页页面元素标注方法及系统

技术领域

本发明涉及计算机领域，特别是涉及一种在计算机终端进行网页页面元素动态标注的方法及系统。

背景技术

目前各种移动用户端平台(包括新闻，视频，社交等)在进行基于目标用户交互行为(又称为转化)计价方式的广告投放时，如果所投放广告是由广告主所提供的Web页面，则一般需要广告主在Web页面内主动添加由平台提供的转化收集脚本，并且在用户发生实际转化行为(如点击、下载等操作)时，通过平台提供的标记服务使广告主可以对转化位置进行标注。

用户点击记录的收集，通常需要在所在页面加入监控程序才能完成，而这会导致网页文件增大，延长网页在移动端载入的时间，并且占用移动用户端有限的存储空间及计算资源。所以网页转化标注服务需要解决的一个问题是如何让广告主在基于广告平台的web页面中选择、上报其自身页面内所需标注的位置，而无需人为在页面中加入点击监控程序。

一种现有的网页页面无码跟踪标注技术是使用浏览器扩展方式来进行页面标注。这需要广告主用户自行安装相关软件程序，如浏览器插件，来实现网页页面的无码跟踪标注，而不是一个基于网页的公用服务。

采用浏览器插件技术标注页面，存在以下几个缺陷：

所采用的插件技术与广告主用户本地浏览器相关，广告主用户必须安装标注插件所对应的浏览器或者针对其浏览器所编写的插件；

由于所标注页面需要是可交互的，广告主用户点击鼠标左键可能会触发页面原有交互行为，因此标记时必须使用右键标记，这将导致操作便利性降低，引起误操作。

发明内容

由前述背景技术可知，传统网页标注技术存在固有的缺陷。为了解决为了解决上述问题，本发明一方面提供了一种网页页面元素标注方法，该方法包括：对当前网页进行截图以获取网页图像快照；扫描所述网页图像快照并确定页面元素；确定所述页面元素在所述网页图像快照内的位置；并根据所述位置选定所述页面元素进行标注。

该网页页面元素标注方法中所述的截图、扫描、位置确定及标注的操作可以由用户端进行。如上述操作由用户端进行，该方法还包括：检测用户操作并确定用户选定位置；将所述用户选定位置信息与所述页面元素在所述网页图像快照内的位置进行对比；再根据对比结果确定是否选定所述页面元素。

该网页页面元素标注方法中所述的截图、扫描、位置确定及标注等操作也可以由服务器端进行。如上述操作由服务器端进行，该方法还包括：接收由用户端传来的用户选定位置信息；将所述用户选定位置信息与所述页面元素在所述网页图像快照内的位置进行对比；及根据对比结果确定是否选定所述页面元素。

该网页页面元素标注方法中所述的截图、扫描、及位置确定等操作可以由服务器端进行，而标注操作可以由用户端进行。在此中设置下，则需将所述网页图像快照及所述页面元素在所述网页图像快照内的位置信息由服务器端传送至用户端；由用户端检测用户操作并确定用户选定位置；将所述用户选定位置信息与所述页面元素在所述网页图像快照内的位置进行对比；并根据对比结果确定是否选定所述页面元素。

上述网页页面元素标注方法中，还可以包括将所述网页图像快照及所述页面元素在所述网页图像快照内的位置信息存储于一用户端(如用户计算机或移动终端)的缓存内，在之后任意时长的预设时间段内重复提交的用户页面可以被缓存输出，而不需再经过目标页面服务器端返回页面结果，这样可以加快处理速度，降低服务器端压力。

前述网页页面元素标注方法，其中页面元素位置确定的操作包括：根据所述网页图像快照所在平面确立一坐标系；确定所述网页图像快照在该坐标系内的位置；测量所述页面元素在所述坐标系内的位置；根据所述网页图像快照及所述页面元素在所述坐标系内的位置确定所述页面元素在所述网页图像快照内的位置。其中，所述页面元素在所述坐标系及所述网页图像快照内的位置由所述页面元素内至少一个参照点的位置确定。所述页面元素在所述坐标系及所述网页图像快照内的位置确定为一个有限的范围，如一个矩形区域。

前述网页页面元素标注方法，其中根据所述位置选择所述页面元素进行标注包括确定鼠标当前位置，并根据鼠标当前位置与所述页面元素在所述网页图像快照内的位置之间的关系确定是否选中所述页面元素。其中，如所述鼠标当前位置与所述页面元素在所述网页图像快照内的位置重合或位于所述页面元素的所述范围内，则确定选中所述页面元素。而如所述鼠标当前位置同时位于多个页面元素的范围内，则比较所述多个页面元素的范围大小，确定选中所述多个页面元素中范围最小的一个。

本发明另一方面提供了一种计算机系统，所述计算机包括存储器与处理器，所述存储器存储有计算机程序，所述程序在被所述处理器执行时能够实现前述网页标注方法的各个步骤。

本发明另一方面提供了一种计算机可读存储介质，用于存储计算机指令，所述指令在由一计算机或处理器执行时能够实现前述网页标注方法的各个步骤。

上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其他目的、特征和优点能够更明显易懂，以下特举较佳实施例，并配合附图,详细说明如下。

附图说明

图1为显示本发明中网页页面元素在网页图像快照内排列方式的示意图；

图2为显示本发明中目标网页页面元素地址的一种提交方式的示意图；

图3为显示移动终端等待服务器端返回网页快照的状态示意图；

图4为显示用户在移动终端进行页面元素标注的状态示意图。

具体实施方式

为更进一步阐述本发明为达成预定发明目的所采取的技术手段及功效,以下结合附图及较佳实施例，对依据本发明提出的一种网页页面元素标注的方法及系统的具体实施方式及其功效，详细说明如后。

为了克服前述广告主用户在可交互页面点击鼠标左键进行标注时可能会触发页面原有交互行为，从而导致误操作的问题，本发明采用了在网页图像快照上根据页面元素位置对页面元素进行标注的方式。使用服务器端截图方式保持网页当时的图像快照，并结合页面元素布局位置的方式，将图像快照与布局数据结合，即可实现鼠标在图片上划过时，可计算出当前坐标位置下的所属页面元素。

图1显示了网页页面元素在网页图像快照内的一种排列方式。在此种排列方式下，各网页页面元素均对应一矩形区域，各自矩形区域可能存在重叠与覆盖。通过对网页图像快照进行扫描，可以确定网页中各个页面元素所对应矩形区域的自身宽高值，并可以以页面左上角为横纵轴的0点建立一坐标系，读取不同的页面元素所对应的矩形区域在该坐标系中的横纵坐标值，获得页面中所有页面元素的排布数据。

实际操作中，在需要对一网页进行标注时，广告主用户可以通过一地址栏(如广告服务提供商提供的服务页内的地址栏或浏览器中的地址栏)提交网页快照请求，如图2所示。在网页快照请求提交之后，用户计算机或移动终端将等待服务器端返回网页图像快照及页面元素的位置信息，如图3所示。

服务器端收到网页快照请求之后，会对相关网页进行快照截图及扫描。网页快照截图可使用任意一下任意技术在服务器端实现：

1、使用phantomJS、casperJS等于QTWebview的上层封装实现页面截图；

2、使用Selenium WebDriver等基于浏览器控制的实现页面截图；

3、使用slimerjs等基于驱动Firefox的技术方式实现页面截图；

4、使用Xvfb与任意服务器端可运行的浏览器实现页面截图；

5、使用hea less模式的chrome实现页面截图。

在另外一种实施方式中，网页快照截图也可以在用户计算机或移动终端载入相关网页后由用户计算机或移动终端实现。此种方式下，可以实现网页标注的主要操作在用户计算机或移动终端本地(在线或者离线)完成，标注结果可以传送至服务器端。

由服务器端或用户终端所获取的图像快照可以视需求传送至对应的用户终端或服务器端，也可以传送至第三方处理器进行扫描处理。

在获取网页图像快照后，可以对该图像快照进行扫描，识别图像快照中的网页页面元素，如图像、按钮、超级链接等，并对所识别的网页页面元素进行定位。具体定位操作可以采用前述方式进行，也可以采用其他方式进行，如确定不同的坐标系进行定位，或选取网页页面元素中的参考点(如边界点或中心点等)进行定位。

待服务器端完成网页快照截图及扫描之后，会将网页图像快照及网页页面元素的位置信息返回用户计算机或移动终端。网页图像快照及网页页面元素的位置信息可以存储于用户计算机或移动终端的缓存内，这样在之后任意时长的预设时间段内重复提交的用户页面可以被缓存输出，而不需再经过目标页面服务器端返回页面结果，这样可以加快处理速度，降低服务器端压力。

如图4所示，返回至用户计算机或移动终端的网页图像快照可以在用户计算机或移动终端进行1:1显示。可以以其左上角坐标为横纵轴0点坐标建立坐标系。当鼠标在图片上滑动时，或者点击时，可以计算鼠标在该坐标系内的坐标。基于当前鼠标所在位置的坐标，可经由遍历页面元素位置排布数据，计算鼠标所在位置是否在某一页面元素所对应的矩形区域内。如果确定鼠标在某一页面元素所对应的矩形区域内，即如果鼠标所对应的横轴坐标在矩形左边界与右边界之间，而其对应的纵轴坐标在矩形上边界与下边界之间，则可判断广告主用户选定了该页面元素，此时可利用图4左侧所示标注请求界面输入相应的标注请求。如果鼠标所在位置同时落入多个页面元素所对应的矩形区域内，那么这些矩形区域内的面积最小者所对应的页面元素，即为当前广告主用户在在图片上选择的页面元素。

根据本发明的方案，网页标注过程中使用页面快照图片展示，是纯静态结果，广告主用户可放心使用鼠标左键标注而不用担心点击触发页面跳转。

另外，在通过服务器端进行网页快照截图及扫描的方案中，服务器端会集成相关环境，用户无需安装其他软件，可以使用任意浏览器提交将要标注的网页地址。

本发明还包括一种计算机系统，所述计算机系统包括存储器与处理器，所述存储器存储有计算机程序，所述程序在被所述处理器执行时能够实现所述方法中的所有步骤，从而实现网页页面元素的动态标注。

本发明还包括一种计算机可读存储介质，用于存储计算机指令，所述指令在由一计算机或处理器执行时实现所述方法中的所有步骤，从而实现网页页面元素的动态标注。

以上所述，仅是本发明的较佳实施例而已，并非对本发明作任何形式上的限制，虽然本发明已以较佳实施例揭露如上，然而并非用以限定本发明,任何熟悉本专业的技术人员，在不脱离本发明技术方案范围内,当可利用上述揭示的技术内容作出些许更动或修饰为等同变化的等效实施例,但凡是未脱离本发明技术方案的内容，依据本发明的技术实质对以上实施例所作的任何简单修改、等同变化与修饰，均仍属于本发明技术方案的范围内。

Claims (16)

1.一种网页页面元素标注方法，其特征在于，该方法包括：

对当前网页进行截图以获取网页图像快照；

扫描所述网页图像快照并确定页面元素；

确定所述页面元素在所述网页图像快照内的位置；

将用户选定位置信息与所述页面元素在所述网页图像快照内的位置进行对比；

根据对比结果确定是否选定所述页面元素并进行标注。

2.根据权利要求1所述的网页页面元素标注方法，其特征在于，所述截图、扫描、位置确定及标注的操作由用户端进行，所述方法还包括：

检测用户操作并确定用户选定位置。

3.根据权利要求1所述的网页页面元素标注方法，其特征在于，所述截图、扫描、位置确定及标注的操作由服务器端进行。

4.根据权利要求3所述的网页页面元素标注方法，其特征在于，该方法还包括：

接收由用户端传来的用户选定位置信息。

5.根据权利要求1所述的网页页面元素标注方法，其特征在于，所述截图、扫描、及位置确定的操作由服务器端进行，该方法还包括：

将所述网页图像快照及所述页面元素在所述网页图像快照内的位置信息传送至用户端。

6.根据权利要求5所述的网页页面元素标注方法，其特征在于，该方法还包括：

检测用户操作并确定用户选定位置。

7.根据权利要求6所述的网页页面元素标注方法，其特征在于，所述方法还包括将所述网页图像快照及所述页面元素在所述网页图像快照内的位置信息存储于一缓存内。

8.根据权利要求7所述的网页页面元素标注方法，其特征在于，该方法包括：

根据所述网页图像快照所在平面确立一坐标系；

确定所述网页图像快照在该坐标系内的位置；

测量所述页面元素在所述坐标系内的位置；

根据所述网页图像快照及所述页面元素在所述坐标系内的位置确定所述页面元素在所述网页图像快照内的位置。

9.根据权利要求8所述的网页页面元素标注方法，其特征在于，所述页面元素在所述坐标系及所述网页图像快照内的位置由所述页面元素内至少一个参照点的位置确定。

10.根据权利要求9所述的网页页面元素标注方法，其特征在于，所述页面元素在所述坐标系及所述网页图像快照内的位置确定为一个有限的范围。

11.根据权利要求10所述的网页页面元素标注方法，其特征在于，所述有限的范围为一个矩形区域。

12.根据前述任一权利要求所述的网页页面元素标注方法，其特征在于，所述根据所述位置选择所述页面元素进行标注包括：

确定鼠标当前位置；

并根据鼠标当前位置与所述页面元素在所述网页图像快照内的位置之间的关系确定是否选中所述页面元素。

13.根据权利要求12所述的网页页面元素标注方法，其特征在于，如所述鼠标当前位置与所述页面元素在所述网页图像快照内的位置重合或位于所述页面元素的所述范围内，则确定选中所述页面元素。

14.根据权利要求13所述的网页页面元素标注方法，其特征在于，如所述鼠标当前位置同时位于多个页面元素的范围内，比较所述多个页面元素的范围大小，确定选中所述多个页面元素中范围最小的一个。

15.一种计算机系统，包括处理器及存储设备，其特征在于：

所述处理器被配置用于执行如权利要求1至14中任一权利要求所述的方法。

16.一种计算机可读存储介质，用于存储计算机指令，其特征在于：所述指令在由一计算机或处理器执行时实现如权利要求1至14中任意一项权利要求所述的方法。

Images