CN111159600B - 页面上元素的信息上报方法、装置、电子设备及存储介质 - Google Patents

Abstract

本公开关于一种页面上元素的信息上报方法、装置、电子设备及存储介质，属于互联网技术领域，该方法包括：预先为页面上需要进行信息上报的每个元素添加上报属性和埋点数据，该元素的上报属性用于指示上报该元素的埋点数据，之后，监测页面上元素的变化情况，若根据监测到的变化情况确定页面添加任一元素，则获取元素的上报属性，若获取到元素的上报属性，则监测元素在目标视口内的展示情况，当确定元素在目标视口内的展示情况满足预设的上报条件时，上报元素的埋点数据，这样，不依赖频繁触发的scroll事件来实时获取元素距离页面的窗口顶部的距离，实时计算元素出现在窗口内的百分比，不会引发浏览器重新渲染元素，因此，不影响浏览器性能。

Description

页面上元素的信息上报方法、装置、电子设备及存储介质

技术领域

本公开涉及互联网技术领域，尤其涉及一种页面上元素的信息上报方法、装置、电子设备及存储介质。

背景技术

互联网技术领域中，在如商品列表或者活动横幅(banner)等业务场景中经常需要统计指定商品(对应页面中的一个元素)的展示次数，以为后续的业务如广告位定价等提供数据支持。

相关技术中，在页面上监测到滚动(scroll)事件时，实时获取指定元素距离页面的窗口顶部的距离，再根据指定元素距离页面的窗口顶部的距离和指定元素自身的高度，实时计算指定元素出现在窗口内的百分比，当百分比达到预设百分比时上报指定元素的埋点数据，以使服务器根据埋点数据统计该元素在页面上的展示次数。由于该方案需要依赖于频繁触发的scroll事件，且需要实时获取指定元素距离窗口顶部的距离，实时计算指定元素出现在窗口内的百分比，会引发浏览器重新渲染元素，导致不可忽视的浏览器性能开销。

发明内容

本公开提供一种页面上元素的信息上报方法、装置、电子设备及存储介质，以至少解决相关技术中在对网上的元素进行信息上报时存在的易降低浏览器性能的问题。本公开的技术方案如下：

根据本公开实施例的第一方面，提供一种页面上元素的信息上报方法，包括：

预先为页面上需要进行信息上报的每个元素添加上报属性和埋点数据，所述元素的上报属性用于指示上报所述元素的埋点数据；

监测所述页面上元素的变化情况；

若根据监测到的变化情况确定所述页面添加任一元素，则获取所述元素的上报属性；

若获取到所述元素的上报属性，则监测所述元素在目标视口内的展示情况，所述目标视口是指所述页面上用于展示所述元素的视口；

当确定所述元素在所述目标视口内的展示情况满足预设的上报条件时，上报所述元素的埋点数据。

在一种可能的实施方式下，每个元素的埋点数据用于使服务器统计所述元素在所述页面上的展示次数。

在一种可能的实施方式下，监测所述页面上元素的变化情况，包括：

调用创建的变动观察器实例监测所述页面上元素的变化情况。

在一种可能的实施方式下，监测所述元素在目标视口内的展示情况，包括：

创建用于监测所述元素在所述目标视口内的展示情况的交叉观察器实例监；

调用所述交叉观察器实例监测所述元素在所述目标视口内的展示情况。

在一种可能的实施方式下，上报所述元素的埋点数据之后，还包括：

若根据监测到的变化情况确定所述元素被从所述页面上移除，则释放所述交叉观察器实例。

根据本公开实施例的第二方面，提供一种页面上元素的信息上报装置，包括：

添加模块，用于预先为页面上需要进行信息上报的每个元素添加上报属性和埋点数据，所述元素的上报属性用于指示上报所述元素的埋点数据；

第一监测模块，被配置为执行监测所述页面上元素的变化情况；

获取模块，被配置为执行若根据监测到的变化情况确定所述页面添加任一元素，则获取所述元素的上报属性；

第二监测模块，被配置为执行若获取到所述元素的上报属性，则监测所述元素在目标视口内的展示情况，所述目标视口是指所述页面上用于展示所述元素的视口；

上报模块，被配置为执行当确定所述元素在所述目标视口内的展示情况满足预设的上报条件时，上报所述元素的埋点数据。

在一种可能的实施方式下，每个元素的埋点数据用于使服务器统计所述元素在所述页面上的展示次数。

在一种可能的实施方式下，所述第一监测模块被具体配置为执行：

调用创建的变动观察器实例监测所述页面上元素的变化情况。

在一种可能的实施方式下，所述第二监测模块被具体配置为执行：

创建用于监测所述元素在所述目标视口内的展示情况的交叉观察器实例监；

调用所述交叉观察器实例监测所述元素在所述目标视口内的展示情况。

在一种可能的实施方式下，还包括释放模块，所述释放模块被具体配置为执行：

在上报所述元素的埋点数据之后，若根据监测到的变化情况确定所述元素被从所述页面上移除，则释放所述交叉观察器实例。

根据本公开实施例的第三方面，提供一种电子设备，包括：至少一个处理器，以及与所述至少一个处理器通信连接的存储器，其中：

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行上述任一页面上元素的信息上报方法。

根据本公开实施例的第四方面，提供一种存储介质，当所述存储介质中的指令由电子设备的处理器执行时，所述电子设备能够执行上述任一页面上元素的信息上报方法。

根据本公开实施例的第五方面，提供一种计算机程序产品，该程序产品在被计算机调用执行时，可以使得计算机执行上述任一页面上元素的信息上报方法。

本公开的实施例提供的技术方案至少带来以下有益效果：

预先为页面上需要进行信息上报的每个元素添加上报属性和埋点数据，其中，每个元素的上报属性用于指示上报该元素的埋点数据，之后，监测页面上元素的变化情况，若根据监测到的变化情况确定页面添加任一元素，则获取元素的上报属性，若获取到元素的上报属性，则监测元素在目标视口内的展示情况，当确定元素在目标视口内的展示情况满足预设的上报条件时，上报元素的埋点数据，这样，不必依赖于频繁触发的scroll事件来实时获取元素距离页面的窗口顶部的距离，实时计算元素出现在窗口内的百分比，不会引发浏览器重新渲染该元素，因此，浏览器的性能不会受影响。另外，在页面开发阶段，技术人员不必在业务代码中增加额外的函数逻辑，只需为元素添加上报属性和埋点数据就可对元素进行信息上报，页面开发的复杂度也比较低。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理，并不构成对本公开的不当限定。

图1是根据一示例性实施例示出的一种页面上元素的信息上报方法的应用场景图。

图2是根据一示例性实施例示出的一种页面上元素的信息上报方法的流程图。

图3是根据一示例性实施例示出的又一种页面上元素的信息上报方法的流程图。

图4是根据一示例性实施例示出的一种页面上元素的信息上报装置的框图。

图5是根据一示例性实施例示出的一种用于实现页面上元素的信息上报方法的电子设备的结构示意图。

具体实施方式

为了使本领域普通人员更好地理解本公开的技术方案，下面将结合附图，对本公开实施例中的技术方案进行清楚、完整地描述。

需要说明的是，本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本公开的实施例能够以除了在这里图示或描述的那些以外的顺序实施。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。

为了便于理解本公开，本公开涉及的技术术语中：

元素，是页面展示的最小单位，如页面上的文字、图片、动画、音乐等都是页面上的元素。一般地，元素具有一定的尺寸。

变动观察器(Mutation Observer)实例，用来监视文档对象模型(DocumentObject Model，DOM)的变化如DOM中节点的增删、节点属性的变动等。每个Web页面都可以看作一个DOM，页面上的元素可以看作DOM中的节点，因此，可用Mutation Observer实例监测页面上元素的变化情况。

交叉观察器(Intersection Observer)实例，用来监视元素在目标视口(指页面上用于展示该元素的视口)内出现的比例，当元素在目标视口区域内出现的比例达到预设比例时，可调用自身的回调函数上报元素的埋点数据。

相关技术中，有一种方案是在页面开发阶段由技术人员手动为需要进行埋点的元素创建Intersection Observer实例，后续，由Intersection Observer实例观察元素在目标视口内出现的比例，当元素在目标视口区域内出现的比例达到预设比例时，调用自身的回调函数上报元素的埋点数据，但由于该方案需要为元素额外手动添加IntersectionObserver实例，不可避免地需要在业务代码中增加额外的函数逻辑，因此，会增加页面开发的复杂度。

实际应用中，可预先为页面上需要进行信息上报的每个元素添加上报属性和埋点数据，其中，该元素的上报属性用于指示上报该元素的埋点数据，之后，由终端根据页面上每个元素的上报属性和埋点数据对该元素进行信息上报。

图1是根据一示例性实施例示出的一种页面上元素的信息上报方法的应用场景图，包括，终端11如私人电脑、iPad、手机等，以及与终端11通过通信网络连接的服务器12，其中：

终端11，用于在页面被打开后，监测页面上元素的变化情况，若根据监测到的变化情况确定页面添加任一元素，则获取该元素的上报属性，若获取到该元素的上报属性，则监测该元素在目标视口内的展示情况，当确定该元素在目标视口内的展示情况满足预设的上报条件时，上报该元素的埋点数据，其中，目标视口是指页面上用于展示该元素的视口。

服务器12，用于接收该元素的埋点数据，根据该元素的埋点数据统计该元素的展示次数。比如，根据该元素的埋点数据将该元素对应的计数器(counter)加1，从而完成该元素的一次曝光统计。

本公开实施中，预先为页面上需要进行信息上报的每个元素添加埋点数据和用于指示上报该埋点数据上报属性，之后，监测页面上元素的变化情况，若根据监测到的变化情况确定页面添加任一元素，则获取元素的上报属性，若获取到元素的上报属性，则监测元素在目标视口内的展示情况，当确定元素在目标视口内的展示情况满足预设的上报条件时，上报元素的埋点数据，这样，不必依赖于频繁触发的scroll事件来实时获取元素距离页面的窗口顶部的距离，实时计算元素出现在窗口内的百分比，不会引发浏览器重新渲染该元素，因此，浏览器的性能不会受影响。另外，在页面开发阶段，技术人员不必在业务代码中增加额外的函数逻辑，只需为元素添加上报属性和埋点数据就可对元素进行信息上报，页面开发的复杂度也比较低。

图2是根据一示例性实施例示出的一种页面上元素的信息上报方法的流程图，该方法的流程图包括以下步骤。

S201：预先为页面上需要进行信息上报的每个元素添加上报属性和埋点数据，其中，每个元素的上报属性用于指示上报该元素的埋点数据。

实际应用中，页面开发语言一般会为元素指定一些渲染属性，技术人员调整这些渲染属性可调整元素在页面上的渲染效果，而上报属性和埋点数据与元素在页面上的渲染效果无关，是技术人员为页面上需要进行信息上报的元素专门添加的。也就是说，并不是页面上的每个元素都具有上报属性和埋点数据，而是需要进行信息上报的元素才会具有上报属性和埋点数据。

具体实施时，每个元素的埋点数据用于使服务器统计该元素在页面上的展示次数。

S202：监测页面上元素的变化情况。

具体实施时，当页面被打开时，即可为页面创建变动观察器实例，进而调用变动观察器实例来监测页面上元素的变化情况。

S203：若根据监测到的变化情况确定页面添加任一元素，则获取该元素的上报属性。

S204：若获取到该元素的上报属性，则监测该元素在目标视口内的展示情况，其中，目标视口是指页面上用于展示该元素的视口。

具体实施时，若获取到该元素的上报属性，则可创建用于监测该元素在目标视口内的展示情况的交叉观察器实例监，进而调用交叉观察器实例监测该元素在目标视口内的展示情况。

S205：当确定该元素在目标视口内的展示情况满足预设的上报条件时，上报该元素的埋点数据。

比如，当确定该元素在目标视口内的展示比例达到预设比例时，上报该元素的埋点数据。

具体实施时，在上报该元素的埋点数据之后，若根据监测到的变化情况确定该元素被从页面上移除，还可释放交叉观察器实例，以节省浏览器的性能开销。

图3是根据一示例性实施例示出的又一种页面上元素的信息上报方法的流程图，该方法的流程图包括以下步骤。

S301：预先为页面上需要进行信息上报的每个元素添加上报属性和埋点数据，其中，每个元素的上报属性用于指示上报该元素的埋点数据。

实际应用中，页面开发语言一般会为元素指定一些渲染属性，技术人员调整这些渲染属性可调整元素在页面上的渲染效果，而上报属性和埋点数据与元素在页面上的渲染效果无关，是技术人员为页面上需要进行信息上报的元素专门添加的。也就是说，并不是页面上的每个元素都具有上报属性和埋点数据，而是需要进行信息上报的元素才会具有上报属性和埋点数据。

具体实施时，每个元素的埋点数据用于使服务器统计该元素在页面上的展示次数。

S302：调用创建的变动观察器实例监测页面上元素的变化情况。

具体实施时，当页面被打开时，即可为页面创建变动观察器实例，进而调用变动观察器实例来监测页面上元素的变化情况。

S303：若根据监测到的变化情况确定页面添加任一元素，则获取该元素的上报属性。

S304：若获取到该元素的上报属性，则自动创建用于监测该元素在目标视口内的展示情况的交叉观察器实例，其中，目标视口是指页面上用于展示该元素的视口。

S305：调用交叉观察器实例监测该元素在目标视口内的展示情况。

具体实施时，调用交叉观察器实例可监测该元素在目标视口内的展示比例。

S306：当确定该元素在目标视口内的展示情况达到预设的上报条件时，调用交叉观察器实例的回调函数上报该元素的埋点数据。

比如，当确定该元素在目标视口内的展示比例达到预设比例时，上报该元素的埋点数据。

S307：若根据监测到的变化情况确定该元素被从页面上移除，则可释放交叉观察器实例。

下面结合具体实施例对本公开的技术方案进行介绍。

具体实施时，技术人员可对页面上需要进行信息上报的元素添加上报属性和埋点数据，如data-show-log＝“eventName”，其中，data-show-log表示为该元素添加的上报属性，eventName表示为该元素添加的埋点数据。

进一步地，在工程的入口文件内创建一个Mutation Observer实例，MutationObserver实例用于检测页面对应的DOM的根节点document.body的变化情况，MutationObserver实例注册的回调函数的第一个参数是一个mutations数组，数组里面的每一项都是mutation实例，mutation.type＝‘childList’时代表有元素被添加或移除，mutation实例的target属性代表有变化的元素。

若被加入到DOM中的某个元素上存在data-show-log标记，则可自动为这个元素创建一个Intersection Observer实例，进而调用Intersection Observer实例观察该元素在目标视口内的展示比例，确定该元素在目标视口内的展示比例达到预设比例时，可调用Intersection Observer实例的回调函数上报该元素的埋点数据。

并且，后续，若该元素被从DOM中移除，还可释放为该元素创建的IntersectionObserver实例。

以展示商品列表的页面为例，如果希望对商品列表中各商品图片(商品列表中的每个商品图片代表一个元素)的曝光情况进行统计，比较页面中不同位置上的图片曝光率，为商品排序的改进提供数据支持，则可为商品图片添加data-show-log标记和eventName。

这样，观察根节点的Mutation Observer会在每个商品图片插入到页面时为该商品图片创建一个Intersection Observer实例，调用Intersection Observer实例观察该商品图片在视口内的展示比例，确定该商品图片在视口区域中的展示比例达到预设比例时，调用Intersection Observer实例的回调函数上报该商品图片的eventName。

采用本公开的方案，技术人员只需要为页面中需要进行埋点的元素添加上报属性和埋点数据，终端就可借助于Mutation Observer实例和Intersection Observer实例自动上报元素的埋点数据，不必再依赖于频繁触发的scroll事件来实时获取元素距离页面的窗口顶部的距离，也不需要实时计算指定元素出现在窗口内的百分比，不会引发浏览器重新渲染元素，因此，不会影响浏览器的性能，并且，各页面代码中不需要增加额外的调用函数，技术人员不需过多关心上报业务，因此，还可降低页面开发的复杂度。

当本公开实施例中提供的方法以软件或硬件或软硬件结合实现的时候，电子设备中可以包括多个功能模块，每个功能模块可以包括软件、硬件或其结合。

图4是根据一示例性实施例示出的一种页面上元素的信息上报装置的框图，该装置包括添加模块401、第一监测模块402，获取模块403，第二监测模块404和上报模块405。

添加模块401，用于预先为页面上需要进行信息上报的每个元素添加上报属性和埋点数据，所述元素的上报属性用于指示上报所述元素的埋点数据；

第一监测模块402，被配置为执行监测所述页面上元素的变化情况；

获取模块403，被配置为执行若根据监测到的变化情况确定所述页面添加任一元素，则获取所述元素的上报属性；

第二监测模块404，被配置为执行若获取到所述元素的上报属性，则监测所述元素在目标视口内的展示情况，所述目标视口是指所述页面上用于展示所述元素的视口；

上报模块405，被配置为执行当确定所述元素在所述目标视口内的展示情况满足预设的上报条件时，上报所述元素的埋点数据。

在一种可能的实施方式下，每个元素的埋点数据用于使服务器统计所述元素在所述页面上的展示次数。

在一种可能的实施方式下，所述第一监测模块402被具体配置为执行：

调用创建的变动观察器实例监测所述页面上元素的变化情况。

在一种可能的实施方式下，所述第二监测模块404被具体配置为执行：

创建用于监测所述元素在所述目标视口内的展示情况的交叉观察器实例监；

调用所述交叉观察器实例监测所述元素在所述目标视口内的展示情况。

在一种可能的实施方式下，还包括释放模块406，所述释放模块406被具体配置为执行：

在上报所述元素的埋点数据之后，若根据监测到的变化情况确定所述元素被从所述页面上移除，则释放所述交叉观察器实例。

关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。

本公开实施例中对模块的划分是示意性的，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，另外，在本公开各个实施例中的各功能模块可以集成在一个处理器中，也可以是单独物理存在，也可以两个或两个以上模块集成在一个模块中。各个模块相互之间的耦合可以是通过一些接口实现，这些接口通常是电性通信接口，但是也不排除可能是机械接口或其它的形式接口。因此，作为分离部件说明的模块可以是或者也可以不是物理上分开的，既可以位于一个地方，也可以分布到同一个或不同设备的不同位置上。上述集成的模块既可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。

图5是根据一示例性实施例示出的一种电子设备的结构示意图，该电子设备包括收发器501以及处理器502等物理器件，其中，处理器502可以是一个中央处理单元(centralprocessing unit，CPU)、微处理器、专用集成电路、可编程逻辑电路、大规模集成电路、或者为数字处理单元等等。收发器501用于电子设备和其他设备进行数据收发。

该电子设备还可以包括存储器503用于存储处理器502执行的软件指令，当然还可以存储电子设备需要的一些其他数据，如电子设备的标识信息、电子设备的加密信息、用户数据等。存储器503可以是易失性存储器(volatile memory)，例如随机存取存储器(random-access memory，RAM)；存储器503也可以是非易失性存储器(non-volatilememory)，例如只读存储器(read-only memory，ROM)，快闪存储器(flash memory)，硬盘(hard disk drive，HDD)或固态硬盘(solid-state drive，SSD)、或者存储器503是能够用于携带或存储具有指令或数据结构形式的期望的程序代码并能够由计算机存取的任何其他介质，但不限于此。存储器503可以是上述存储器的组合。

本公开实施例中不限定上述处理器502、存储器503以及收发器501之间的具体连接介质。本公开实施例在图5中仅以存储器503、处理器502以及收发器501之间通过总线504连接为例进行说明，总线在图5中以粗线表示，其它部件之间的连接方式，仅是进行示意性说明，并不引以为限。所述总线可以分为地址总线、数据总线、控制总线等。为便于表示，图5中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。

处理器502可以是专用硬件或运行软件的处理器，当处理器502可以运行软件时，处理器502读取存储器503存储的软件指令，并在所述软件指令的驱动下，执行前述实施例中涉及的页面上元素的信息上报方法。

本公开实施例还提供了一种存储介质，当所述存储介质中的指令由电子设备的处理器执行时，所述电子设备能够执行前述实施例中涉及的页面上元素的信息上报方法。

在一些可能的实施方式中，本公开提供的页面上元素的信息上报方法的各个方面还可以实现为一种程序产品的形式，其包括程序代码，当所述程序产品在电子设备上运行时，所述程序代码用于使所述电子设备执行前述实施例中涉及的页面上元素的信息上报方法。

所述程序产品可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以是但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。

本公开实施例提供的用于页面上元素的信息上报的程序产品可以采用便携式紧凑盘只读存储器(CD-ROM)并包括程序代码，并可以在计算设备上运行。然而，本公开的程序产品不限于此，在本文件中，可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了可读程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。可读信号介质还可以是可读存储介质以外的任何可读介质，该可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。

可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于无线、有线、光缆、RF等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言的任意组合来编写用于执行本公开操作的程序代码，所述程序设计语言包括面向对象的程序设计语言诸如Java、C++等，还包括常规的过程式程序设计语言诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。在涉及远程计算设备的情形中，远程计算设备可以通过任意种类的网络包括局域网(LAN)或广域网(WAN)连接到用户计算设备，或者，可以连接到外部计算设备(例如利用因特网服务提供商来通过因特网连接)。

应当注意，尽管在上文详细描述中提及了装置的若干单元或子单元，但是这种划分仅仅是示例性的并非强制性的。实际上，根据本公开的实施方式，上文描述的两个或更多单元的特征和功能可以在一个单元中具体化。反之，上文描述的一个单元的特征和功能可以进一步划分为由多个单元来具体化。

此外，尽管在附图中以特定顺序描述了本公开方法的操作，但是，这并非要求或者暗示必须按照该特定顺序来执行这些操作，或是必须执行全部所示的操作才能实现期望的结果。附加地或备选地，可以省略某些步骤，将多个步骤合并为一个步骤执行，和/或将一个步骤分解为多个步骤执行。

本领域内的技术人员应明白，本公开的实施例可提供为方法、系统、或计算机程序产品。因此，本公开可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本公开可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本公开是参照根据本公开实施例的方法、装置(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

尽管已描述了本公开的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例做出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本公开范围的所有变更和修改。

显然，本领域的技术人员可以对本公开进行各种改动和变型而不脱离本公开的精神和范围。这样，倘若本公开的这些修改和变型属于本公开权利要求及其等同技术的范围之内，则本公开也意图包含这些改动和变型在内。

Claims (12)

1.一种页面上元素的信息上报方法，其特征在于，包括：

预先为页面上需要进行信息上报的每个元素添加上报属性和埋点数据，所述元素的上报属性用于指示上报所述元素的埋点数据；

监测所述页面上元素的变化情况；

若根据监测到的变化情况确定所述页面添加任一元素，则获取所述元素的上报属性；

若获取到所述元素的上报属性，则监测所述元素在目标视口内的展示情况，所述目标视口是指所述页面上用于展示所述元素的视口；

当确定所述元素在所述目标视口内的展示情况满足预设的上报条件时，上报所述元素的埋点数据。

2.根据权利要求1所述的方法，其特征在于，每个元素的埋点数据用于使服务器统计所述元素在所述页面上的展示次数。

3.根据权利要求1所述的方法，其特征在于，监测所述页面上元素的变化情况，包括：

调用创建的变动观察器实例监测所述页面上元素的变化情况。

4.根据权利要求1-3任一所述的方法，其特征在于，监测所述元素在目标视口内的展示情况，包括：

创建用于监测所述元素在所述目标视口内的展示情况的交叉观察器实例；

调用所述交叉观察器实例监测所述元素在所述目标视口内的展示情况。

5.根据权利要求4所述的方法，其特征在于，上报所述元素的埋点数据之后，还包括：

若根据监测到的变化情况确定所述元素被从所述页面上移除，则释放所述交叉观察器实例。

6.一种页面上元素的信息上报装置，其特征在于，包括：

添加模块，用于预先为页面上需要进行信息上报的每个元素添加上报属性和埋点数据，所述元素的上报属性用于指示上报所述元素的埋点数据；

第一监测模块，被配置为执行监测所述页面上元素的变化情况；

获取模块，被配置为执行若根据监测到的变化情况确定所述页面添加任一元素，则获取所述元素的上报属性；

第二监测模块，被配置为执行若获取到所述元素的上报属性，则监测所述元素在目标视口内的展示情况，所述目标视口是指所述页面上用于展示所述元素的视口；

上报模块，被配置为执行当确定所述元素在所述目标视口内的展示情况满足预设的上报条件时，上报所述元素的埋点数据。

7.根据权利要求6所述的装置，其特征在于，每个元素的埋点数据用于使服务器统计所述元素在所述页面上的展示次数。

8.根据权利要求6所述的装置，其特征在于，所述第一监测模块被具体配置为执行：

调用创建的变动观察器实例监测所述页面上元素的变化情况。

9.根据权利要求6-8任一所述的装置，其特征在于，所述第二监测模块被具体配置为执行：

创建用于监测所述元素在所述目标视口内的展示情况的交叉观察器实例监；

调用所述交叉观察器实例监测所述元素在所述目标视口内的展示情况。

10.根据权利要求9所述的装置，其特征在于，还包括释放模块，所述释放模块被具体配置为执行：

在上报所述元素的埋点数据之后，若根据监测到的变化情况确定所述元素被从所述页面上移除，则释放所述交叉观察器实例。

11.一种电子设备，其特征在于，包括：至少一个处理器，以及与所述至少一个处理器通信连接的存储器，其中：

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行时，所述至少一个处理器能够执行如权利要求1-5中任一所述的页面上元素的信息上报方法。

12.一种存储介质，其特征在于，当所述存储介质中的指令由电子设备的处理器执行时，所述电子设备能够执行如权利要求1-5中任一所述的页面上元素的信息上报方法。

Images