页面埋点上报方法及相关装置与流程

1.本技术涉前端开发技术领域，具体而言，涉及一种页面埋点上报方法及相关装置。


背景技术：

2.埋点上报技术已经成为获取用户对页面的行为数据的重要手段之一，是辅助产品运营人员的重要工具。当前，在构建前端页面项目时，为了实现对页面的埋点上报功能，大都需要前端开发工程师根据特定的埋点需求，在项目中手动编写相应的代码。这种方式下，针对不同的项目甚至不同的埋点需求，都需要手动编写代码，这就导致了项目开发的代码量和成本比较高，效率十分低下。


技术实现要素：

3.本技术的实施例提供了一种页面埋点上报方法及相关装置，进而至少在一定程度上可以减少项目开发的代码量及成本，并提高项目开发效率。
4.本技术的其他特性和优点将通过下面的详细描述变得显然，或部分地通过本技术的实践而习得。
5.根据本技术实施例的一个方面，提供了一种页面埋点上报方法，所述方法包括：在软件开发工具包中添加配置参数相关信息，所述配置参数相关信息用于对埋点上报操作的方式进行配置；根据预设的界面构建框架提供的钩子函数，构建页面的埋点上报程序；将所述埋点上报程序添加至所述软件开发工具包中；将所述软件开发工具包嵌入所述页面中，以使访问端在访问所述页面时获得嵌入了所述软件开发工具包的页面，并根据所述软件开发工具包中的埋点上报程序和配置参数相关信息对所述页面进行埋点上报操作。
6.根据本技术实施例的一个方面，提供了一种页面埋点上报装置，所述装置包括：第一添加单元，用于在软件开发工具包中添加配置参数相关信息，所述配置参数相关信息用于对埋点上报操作的方式进行配置；构建单元，用于根据预设的界面构建框架提供的钩子函数，构建页面的埋点上报程序；第二添加单元，用于将所述埋点上报程序添加至所述软件开发工具包中；嵌入单元，用于将所述软件开发工具包嵌入所述页面中，以使访问端在访问所述页面时获得嵌入了所述软件开发工具包的页面，并根据所述软件开发工具包中的埋点上报程序和配置参数相关信息对所述页面进行埋点上报操作。
7.在本技术的一些实施例中，基于前述方案，所述第一添加单元配置为：在软件开发工具包中添加配置文件地址；所述嵌入单元配置为：将所述软件开发工具包嵌入所述页面中，以使访问端在获得嵌入了所述软件开发工具包的所述页面之后，根据所述软件开发工具包中的所述配置文件地址获得配置文件，并根据所述配置文件和所述软件开发工具包中的所述埋点上报程序对所述页面进行埋点上报操作。
8.在本技术的一些实施例中，基于前述方案，所述嵌入单元配置为：根据所述软件开发工具包中的埋点上报程序提供的埋点键从所述配置文件获取与所述埋点键匹配的埋点参数信息；根据所述埋点参数信息和所述埋点上报程序对所述页面进行埋点上报操作。
9.在本技术的一些实施例中，基于前述方案，所述构建单元配置为：将预设的界面构建框架提供的钩子函数挂载至所述页面中的指定元素上，并构建用于监控对所述指定元素的点击行为的第一埋点上报程序。
10.在本技术的一些实施例中，基于前述方案，所述嵌入单元配置为：根据所述第一埋点上报程序提供的埋点键从所述配置文件获取与所述埋点键匹配的埋点参数信息；根据所述第一埋点上报程序获得对所述指定元素的点击行为数据；根据所述埋点参数信息对所述点击行为数据进行包装和筛选操作得到结果数据，并将所述结果数据进行上报。
11.在本技术的一些实施例中，基于前述方案，所述构建单元还配置为：将预设的界面构建框架提供的钩子函数挂载至所述页面中的指定元素上，并构建用于监控对所述指定元素的曝光行为的第二埋点上报程序。
12.在本技术的一些实施例中，基于前述方案，所述第二埋点上报程序用于判断所述指定元素是否在所述页面的可视区域内。
13.在本技术的一些实施例中，基于前述方案，所述第二埋点上报程序根据所述指定元素的数据、状态、属性中的至少一项发生变化而监控对所述指定元素的曝光行为。
14.在本技术的一些实施例中，基于前述方案，所述构建单元还配置为：根据预设的界面构建框架提供的钩子函数，构建用于监控对所述页面的浏览行为的第三埋点上报程序。
15.根据本技术实施例的一个方面，提供了一种计算机可读介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现如上述实施例中所述的页面埋点上报方法。
16.根据本技术实施例的一个方面，提供了一种电子设备，包括：一个或多个处理器；存储装置，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器实现如上述实施例中所述的页面埋点上报方法。
17.在本技术的一些实施例所提供的技术方案中，只需要将埋点上报程序和配置参数相关信息添加到软件开发工具包中，并将该软件开发工具包嵌入至页面中，就能够实现对页面的埋点上报操作，实现方式简单；为页面构建的埋点上报程序是基于预设的界面构建框架提供的钩子函数创建的，代码量非常少；整个页面埋点上报功能是在软件开发工具包中实现的，很容易将软件开发工具包中的部分代码迁移到其他项目中。因此，本技术实施例提供的技术方案能够在多个项目中实现代码的统一和复用，可以显著减少项目开发的代码量及开发成本，能够快速针对多个埋点需求甚至多个项目实现埋点上报功能的开发，提高了项目开发效率。
18.应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本技术。
附图说明
19.此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本技术的实施例，并与说明书一起用于解释本技术的原理。显而易见地，下面描述中的附图仅仅是本技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。在附图中：
20.图1示出了相关技术中一种收集对页面的用户行为数据的原理示意图；
21.图2示出了相关技术中另一种收集对页面的用户行为数据的原理示意图；
22.图3示出了可以应用本技术实施例的技术方案的示例性系统架构的示意图；
23.图4示出了根据本技术的一个实施例的页面埋点上报方法的流程图；
24.图5示出了根据本技术的一个实施例的页面埋点上报方法的原理示意图；
25.图6示出了根据本技术的一个实施例的图4中步骤410以及步骤440的细节的流程图；
26.图7示出了根据本技术的一个实施例的能够提供配置文件地址的页面的示意图；
27.图8示出了根据本技术的一个实施例的图7中页面的交互方式示意图；
28.图9示出了根据本技术的一个实施例的通过图7所示页面获得了配置文件地址的示意图；
29.图10示出了根据本技术的一个实施例的根据配置文件和埋点上报程序对页面进行埋点上报操作的流程图；
30.图11示出了根据本技术的一个实施例的页面埋点上报方法的详细原理示意图；
31.图12示出了根据本技术的一个实施例的对元素进行曝光行为上报的原理示意图；
32.图13示出了根据本技术的一个实施例的页面埋点上报装置的框图；
33.图14示出了适于用来实现本技术实施例的电子设备的计算机系统的结构示意图。
具体实施方式
34.现在将参考附图更全面地描述示例实施方式。然而，示例实施方式能够以多种形式实施，且不应被理解为限于在此阐述的范例；相反，提供这些实施方式使得本技术将更加全面和完整，并将示例实施方式的构思全面地传达给本领域的技术人员。
35.此外，所描述的特征、结构或特性可以以任何合适的方式结合在一个或更多实施例中。在下面的描述中，提供许多具体细节从而给出对本技术的实施例的充分理解。然而，本领域技术人员将意识到，可以实践本技术的技术方案而没有特定细节中的一个或更多，或者可以采用其它的方法、组元、装置、步骤等。在其它情况下，不详细示出或描述公知方法、装置、实现或者操作以避免模糊本技术的各方面。
36.附图中所示的方框图仅仅是功能实体，不一定必须与物理上独立的实体相对应。即，可以采用软件形式来实现这些功能实体，或在一个或多个硬件模块或集成电路中实现这些功能实体，或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。
37.附图中所示的流程图仅是示例性说明，不是必须包括所有的内容和操作/步骤，也不是必须按所描述的顺序执行。例如，有的操作/步骤还可以分解，而有的操作/步骤可以合并或部分合并，因此实际执行的顺序有可能根据实际情况改变。
38.目前，页面也可以称为web页面，其是在互联网时代用户获取信息的最重要的途径之一。随着信息技术的发展，互联网行业的竞争日趋激烈，通过获取用户访问页面的行为数据，了解用户的喜好和浏览习惯，已经成为互联网公司实现精细化运营、改善用户体验的重要工作。
39.在相关技术中，主要采用了以下两种方案来收集用户对页面的行为数据：
40.方案一：无埋点方案。
41.无埋点方案通过如下方式实现：在前端页面中接入特定的工具包，从而该工具包会收集用户所有的数据，并发送到页面应用程序所对应的后端服务器。如此将会产生大量
的无用数据，那么主要工作将由后端开发工程师对大量数据进行处理，才能够得到数据分析工程师想要的数据。
42.图1示出了相关技术中一种收集对页面的用户行为数据的原理示意图。请参见图1，该原理示意图示出了利用无埋点方案收集用户行为数据的过程。首先，在web页面中嵌入前端埋点sdk(software development kit，软件开发工具包)，前端埋点sdk负责收集用户对页面的所有行为数据。然后，前端埋点sdk向服务器发送由其收集的原始数据。接下来，后端开发工程师在服务器中处理、筛选数据。最后，将经过处理、筛选操作得到的数据分析工程师所需的数据提供给数据分析工程师。
43.因此，无埋点方案并不是通过埋点上报实现数据收集的，并且需要大量的后端人力来对数据进行整理，成本很高。
44.方案二：全手动处理埋点上报的方案。
45.图2示出了相关技术中另一种收集对页面的用户行为数据的原理示意图，该原理示意图示出了通过方案二收集用户行为数据的过程。请参见图2，全手动处理埋点上报的方案具体如下：首先，前端开发工程师手动编写web页面的代码，通过这些代码来监听用户对该web页面的操作行为，得到相应的埋点数据，然后可以对埋点数据进行自行处理，比如，如果要对该web页面中元素进行曝光上报，也是通过在web页面中植入相应的代码这一纯原生的手段来实现；接下来，web页面中的代码能够触发埋点数据的上报操作，可以向数据分析工程师发送数据，此处的数据为已经处理过的有效数据，也就是说，web页面中的代码是根据数据分析工程师的需求编写的，这些数据是与web页面中的代码相对应的，最终向数据分析工程师发送的数据就是数据分析工程师所需的数据。
46.因此，全手动处理埋点上报的方案也需要针对每一个页面和每一个埋点上报的需求编写大量的代码，成本同样很高。
47.上述实现用户行为数据收集的两个方案，都需要开发工程师处理数据，并判断收集到的用户行为数据是否满足上报的条件，比如方案一是后端开发工程师手动操作的，方案二也需要前端开发工程师手动编写大量的代码。这些方案中开发的页面代码是不可以通用的，不能迁移到其他页面项目中，因此无法做到代码统一和复用，针对不同的项目和埋点上报需求均要编写大量的代码，这就使得项目开发成本特别高，也大大降低了项目开发效率。
48.更重要的是，在整个项目开发中，收集用户行为数据并不属于实际的业务开发范围，如此需要投入大量的人力来解决收集用户行为数据的需求，着实不是最佳的解决方案。
49.为此，本技术实施例首先提供了一种页面埋点上报方法，页面埋点上报就是监控用户对页面的行为，获得相应的行为数据的方案。该方法至少可以在一定程度上克服上述两个方案存在的缺陷，能够提高代码的复用性，显著降低项目开发的代码量及开发成本，并可以提高项目开发效率。
50.图3示出了可以应用本技术实施例的技术方案的示例性系统架构的示意图。如图3所示，该系统架构300可以包括计算机设备301、网络302、服务器303以及终端设备，终端设备具体可以包括笔记本电脑304、平板电脑305、智能手机306等，计算机设备301以及各终端设备均可以通过网络302与服务器303进行通信。计算机设备301由用户使用，比如可以由前端开发工程师使用，计算机设备301上部署有用于开发web页面的环境，如开发软件、界面构
建框架等。服务器303上部署有web服务端程序。各终端设备上安装并运行有浏览器等能够访问web页面的程序。利用图3所示系统架构实现页面埋点上报的过程如下：首先，用户在计算机设备301上开发出一个web页面；然后，用户在计算机设备301中准备配置参数相关信息，并编写使用界面构建框架提供的钩子函数来编写页面的埋点上报程序；接下来，将用户利用配置参数相关信息和已编写完成的埋点上报程序建立sdk，并将sdk嵌入至该web页面中；接着，用户通过网络302将计算机设备301中嵌入了sdk的该web页面发送至服务器303上；最后，各个终端设备可以通过网络302对服务器303进行访问，获得嵌入了sdk的该web页面，这些终端设备的用户在浏览该web页面时会监听用户的浏览行为，并上报行为数据，比如可以将获得的行为数据发送至服务器303。由此，便实现了页面埋点上报的过程。
51.应该理解，图3中的终端设备、网络、服务器和计算机设备的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络、服务器和计算机设备。比如服务器303可以是多个服务器组成的服务器集群等。
52.在本技术的一些实施例中，服务器303上还部署有数据埋点平台，用户使用计算机设备301可以访问该数据埋点平台，配置参数相关信息是用户通过访问该数据埋点平台而获得的配置文件地址。
53.在本技术的一些实施例中，嵌入至web页面中的sdk能够监控对该web页面的浏览行为、对该web页面中指定元素的曝光行为以及对该web页面中指定元素的点击行为。
54.在本技术的一些实施例中，用户在实现对其他web页面或者该web页面中的其他元素的埋点上报时，通过对该sdk中的相应代码和配置参数相关信息进行修改的方式即可完成。
55.需要说明的是，图3示出的仅为本技术的一个实施例。虽然在图3实施例中的方案中，嵌入了sdk的web页面由生成该嵌入了sdk的web页面的计算机设备301发送至了服务器303中，但在本技术的其他实施例或者具体应用时，嵌入了sdk的web页面可以由生成该web页面的终端设备进行保存，并根据其他终端设备的访问请求将该嵌入了sdk的web页面的发送至其他终端设备；虽然在图3实施例中的方案中，web页面和sdk均是在计算机设备301上生成的，但在本技术的其他实施例中，web页面和sdk可以在不同的终端设备上生成，比如，web页面也可以预先存储在一个服务器上，生成该sdk的终端设备可以从服务器中获取该web页面；虽然在本技术实施例中，嵌入了sdk的web页面的生成终端和浏览终端为不同的终端，但在本技术的其他实施例中，两者可以为同一终端，例如，一个计算机设备上可以安装有浏览器，当用户在该计算机设备构建得到一个嵌入了sdk的web页面，可以通过该计算机设备上的浏览器浏览该web页面，从而可以对页面埋点上报这一功能进行测试。本技术实施例对此不作任何限定，本技术的保护范围也不应因此而受到任何限制。
56.易于理解，本技术实施例所提供的页面埋点上报方法一般由终端设备执行，相应地，页面埋点上报装置一般设置于终端设备中。但是，在本技术的其它实施例中，服务器也可以与终端设备具有相似的功能，从而执行本技术实施例所提供的页面埋点上报的方案。
57.因此，本技术实施例的方案可以应用于终端或服务器中。服务器可以是独立的物理服务器，也可以是多个物理服务器构成的服务器集群或者分布式系统，还可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、cdn、以及大数据和人工智能平台等基础云计算服务的云服务器。终端可以是智能手机、
平板电脑、笔记本电脑、台式计算机、智能音箱、智能手表等，但并不局限于此。终端以及服务器可以通过有线或无线通信方式进行直接或间接地连接，本技术在此不做限制。
58.在本技术的一些实施例中，用于建立软件开发工具包的配置参数相关信息是在区块链中进行管理的。
59.区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。区块链(blockchain)，本质上是一个去中心化的数据库，是一串使用密码学方法相关联产生的数据块，每一个数据块中包含了一批次网络交易的信息，用于验证其信息的有效性(防伪)和生成下一个区块。区块链可以包括区块链底层平台、平台产品服务层以及应用服务层。
60.区块链底层平台可以包括用户管理、基础服务、智能合约以及运营监控等处理模块。其中，用户管理模块负责所有区块链参与者的身份信息管理，包括维护公私钥生成(账户管理)、密钥管理以及用户真实身份和区块链地址对应关系维护(权限管理)等，并且在授权的情况下，监管和审计某些真实身份的交易情况，提供风险控制的规则配置(风控审计)；基础服务模块部署在所有区块链节点设备上，用来验证业务请求的有效性，并对有效请求完成共识后记录到存储上，对于一个新的业务请求，基础服务先对接口适配解析和鉴权处理(接口适配)，然后通过共识算法将业务信息加密(共识管理)，在加密之后完整一致的传输至共享账本上(网络通信)，并进行记录存储；智能合约模块负责合约的注册发行以及合约触发和合约执行，开发人员可以通过某种编程语言定义合约逻辑，发布到区块链上(合约注册)，根据合约条款的逻辑，调用密钥或者其它的事件触发执行，完成合约逻辑，同时还提供对合约升级注销的功能；运营监控模块主要负责产品发布过程中的部署、配置的修改、合约设置、云适配以及产品运行中的实时状态的可视化输出，例如：告警、监控网络情况、监控节点设备健康状态等。
61.平台产品服务层提供典型应用的基本能力和实现框架，开发人员可以基于这些基本能力，叠加业务的特性，完成业务逻辑的区块链实现。应用服务层提供基于区块链方案的应用服务给业务参与方进行使用。
62.以下对本技术实施例的技术方案的实现细节进行详细阐述：
63.图4示出了根据本技术的一个实施例的页面埋点上报方法的流程图，该页面埋点上报方法可以由任何具有通信和数据处理功能的设备来执行，这些设备上可以部署有前端页面项目的开发环境，还可以部署有页面构建框架。这些设备既可以是位于本地的计算机设备，也可以是云端服务器、云端服务器集群等云端设备。参照图4所示，该页面埋点上报方法至少包括以下步骤：
64.在步骤410中，在软件开发工具包中添加配置参数相关信息，配置参数相关信息用于对埋点上报操作的方式进行配置。
65.配置参数相关信息能用于提供配置参数。本步骤相当于利用配置参数相关信息建立软件开发工具包。
66.软件开发工具包一般都是一些软件工程师为特定的软件包、软件框架、硬件平台、操作系统等建立应用软件时的开发工具的集合。软件开发工具广义上指辅助开发某一类软件的相关文档、范例和工具的集合。
67.在本技术实施例中，软件开发工具包是用于实现页面埋点上报功能的sdk。
68.在步骤420中，根据预设的界面构建框架提供的钩子函数，构建页面的埋点上报程序。
69.此处的页面为web页面，比如可以是html(hypertext markup language，超文本标记语言)页面。在构建页面的埋点上报程序之前，可以先构建该web页面。web页面可以包括多个元素，web页面实际上是由元素进行定义的。在web页面中，元素的类型可以是各种各样的，比如元素可以是表单、按钮等，元素甚至可以是一个段落。
70.在本技术的一个实施例中，页面为游戏社区的访问页面。
71.游戏社区是游戏玩家相互交流的论坛，在其中，游戏玩家可以分享游戏攻略、游戏体验等，还可以反馈游戏的问题。
72.在本技术的一个实施例中，埋点上报程序用于监控用户对游戏社区的访问页面中指定板块的访问行为。
73.具体地，游戏社区可以是综合型社区，综合型社区包括多个游戏板块，每个游戏板块对应一款游戏，进入每个游戏板块后，用户能够发布与该游戏板块对应的帖子。通过监控用户对一个或多个游戏板块的访问行为，可以了解用户的游戏喜好，从而为该用户提供更能够满足其口味的游戏信息，实现游戏社区的精细化运营。
74.在本技术的一个实施例中，预设的界面构建框架为vue。
75.vue(读音/vju：/，类似于view)是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，vue被设计为可以自底向上逐层应用。
76.在本技术的一个实施例中，预设的界面构建框架提供的钩子函数为vue框架的directive指令提供的钩子函数。
77.directive指令为vue框架中的指令特性。
78.钩子函数是指在生命周期中各个时期会自动触发的函数。而生命周期是指一个元素从挂载在页面上到被销毁的过程。
79.在对页面中的一个元素实现埋点上报时，只需要在绑定了该元素的钩子函数中添加相应的埋点上报指令即可，仅需要编写一行代码就能够解决元素的埋点上报问题。
80.vue框架中的指令特性提供了多个生命周期的钩子函数。针对页面中的不同元素以及对元素的不同埋点需求，可以分别利用不同的钩子函数建立埋点上报程序。
81.比如，vue框架中的指令特性提供了以下钩子函数：
82.1、binding函数，该binding函数为元素被挂载的生命周期函数，当元素被渲染在页面上时，该binding函数可以被触发。
83.2、updatecomponent函数，该updatecomponent函数为属性和状态更新函数，该函数会在元素的数据、状态、属性变化时被触发。
84.3、destroy函数，该destroy函数为销毁函数，该destroy函数会在元素从页面上被销毁时触发。
85.当然，vue框架中的指令特性还可以提供其他钩子函数，这些钩子函数也可以用于构建埋点上报程序；并且，随着vue框架版本迭代更新，其指令特性所能提供的钩子函数也将会发生变化，各个钩子函数的名称和功能也将发生变化，那么，在基于vue框架中的指令特性提供的钩子函数实现埋点上报时，将会用到不同的钩子函数。此外，也不排除其他框架能够提供类似的函数，从而也可以执行本技术实施例的方案。
86.在步骤430中，将埋点上报程序添加至软件开发工具包中。
87.步骤430实际上是将编写的埋点上报程序封装为sdk(软件开发工具包)的过程。
88.在步骤440中，将软件开发工具包嵌入页面中，以使访问端在访问页面时获得嵌入了软件开发工具包的页面，并根据软件开发工具包中的埋点上报程序和配置参数相关信息对页面进行埋点上报操作。
89.访问端可以通过在其上部署的浏览器进行浏览访问操作。访问端在发送访问请求，请求访问该页面时，会根据该访问请求向该访问端返回嵌入了软件开发工具包的页面。浏览器在获得嵌入了软件开发工具包的页面之后，用户在浏览器中对该页面进行浏览，浏览器通过运行该软件开发工具包，对用户的操作行为进行监控，获得相应的行为数据，然后进行埋点上表操作。
90.访问端与本技术实施例提供的页面埋点上报方法的终端设备可以为同一终端设备，也可以为不同终端设备。访问端可以为任何能够访问页面的终端设备，比如可以是智能手机、台式计算机、笔记本电脑、平板电脑等设备。
91.图5示出了根据本技术的一个实施例的页面埋点上报方法的原理示意图。请参见图5，页面埋点上报方法的原理如下：首先，前端开发工程师会先建立vue环境的web网页；然后，根据需要在该web网页中进行埋点上报的元素，前端开发工程师利用vue框架的directive指令提供的钩子函数编写相应的埋点上报程序，前端开发工程师还可以获得配置参数相关信息；接着，前端开发工程师会对编写的埋点上报程序以及获得的配置参数相关信息进行封装，得到一个slugreport sdk，此处的slugreport sdk即为实现页面埋点上报功能的软件开发工具包；然后，前端开发工程师在vue环境的web网页中引入生成的该slugreport sdk，slugreport sdk使用vue指令收集埋点数据；接下来，当访问端访问该web网页时，在该web网页中的引入的slugreport sdk会对访问行为进行监听，得到相应的行为数据，此外，slugreport sdk还可以对获得的行为数据进行过滤、筛选等处理操作，最终得到有效数据；最后，slugreport sdk进行埋点数据上报操作，向数据开发工程师发送有效数据。
92.在本技术的一个实施例中，在软件开发工具包中添加配置参数相关信息，包括：在软件开发工具包中添加配置参数接口；将软件开发工具包嵌入页面中，以使访问端在访问页面时获得嵌入了软件开发工具包的页面，并根据软件开发工具包中的埋点上报程序和配置参数相关信息对页面进行埋点上报操作，包括：将软件开发工具包嵌入页面中，以使访问端在访问页面时获得嵌入了软件开发工具包的页面，并根据软件开发工具包中的埋点上报程序和配置参数接口对页面进行埋点上报操作。
93.在本技术的一个实施例中，根据软件开发工具包中的埋点上报程序和配置参数接口对页面进行埋点上报操作，包括：通过调用配置参数接口获得埋点参数信息；根据埋点上报程序和埋点参数信息对页面进行埋点上报操作。
94.图6示出了根据本技术的一个实施例的图4中步骤410以及步骤440的细节的流程图。请参见图6所示，具体可以包括以下步骤：
95.在步骤410'中，在软件开发工具包中添加配置文件地址。
96.配置文件地址类似于接口地址。配置文件地址也可以称为配置链接或者配置文件链接，通过访问配置文件地址可以获得配置文件。
97.图7示出了根据本技术的一个实施例的能够提供配置文件地址的页面的示意图；图8示出了根据本技术的一个实施例的图7中页面的交互方式示意图；图9示出了根据本技术的一个实施例的通过图7所示页面获得了配置文件地址的示意图。
98.请参阅图7
‑
图9，配置文件地址可以通过如下的方式获得：首先，埋点数据平台中保存了各个项目的配置文件，并能够生成配置文件对应的配置文件地址，在图7所示页面中输入项目名称，可以查询到指定的项目，然后在图7所示页面上进行操作，可以获得指定的项目的配置文件地址。接下来，当用户点击了图7中某一项目的展示卡片中的“生成配置”按钮之后，页面中会弹出窗口，询问用户是否生成线上链接，如图8所示。最后，当用户点击了位于图8的弹窗内的“确定”按钮之后，就会在页面中显示相应的链接窗口，如图9所示，链接窗口中设置了“复制链接”按钮，当用户点击了该“复制链接”按钮之后，可以获得相应的项目埋点配置链接，并可以将该项目埋点配置链接拷贝至项目中，比如可以添加到sdk中。
99.在步骤440'中，将软件开发工具包嵌入页面中，以使访问端在获得嵌入了软件开发工具包的页面之后，根据软件开发工具包中的配置文件地址获得配置文件，并根据配置文件和软件开发工具包中的埋点上报程序对页面进行埋点上报操作。
100.在本步骤中，访问端可以执行以下操作：根据软件开发工具包中的配置文件地址获得配置文件；根据配置文件和软件开发工具包中的埋点上报程序对页面进行埋点上报操作。
101.配置文件中可以包括对各个元素进行埋点上报操作的元数据信息，而前端开发工程师根据所要监听的元素实际编写的软件开发工具包中的埋点上报程序则决定了对页面中的哪个元素进行埋点上报操作。
102.通过图6
‑
图9示出的实施例，前端开发工程师需要采用何种方式进行埋点上报操作，无需编写相应的代码，仅需要从埋点数据平台中获得相应的配置文件地址并将其引入至sdk中即可，大大提高了实现页面埋点上报的效率。
103.图10示出了根据本技术的一个实施例的根据配置文件和埋点上报程序对页面进行埋点上报操作的流程图。如图10所示，包括以下步骤：
104.在步骤1010中，根据软件开发工具包中的埋点上报程序提供的埋点键从配置文件获取与埋点键匹配的埋点参数信息。
105.虽然本技术实施例中，埋点参数信息是从配置文件中获得的，但在本技术的其他实施例中，埋点参数信息可以从配置文件地址中直接获得。
106.配置文件以及位于其中的埋点参数信息可以预先由产品运营人员设置在图7
‑
图9示出的埋点数据平台中。
107.埋点键是与埋点唯一对应的标识，埋点键通常与页面中的元素是唯一对应的，因此，埋点键也可以是元素的标识。
108.埋点键由前端开发工程师设置在埋点上报程序中，用于根据所要监控的埋点，从配置文件获取相应的埋点参数信息。
109.在步骤1020中，根据埋点参数信息和埋点上报程序对页面进行埋点上报操作。
110.埋点参数信息记录了所需使用的埋点上报操作的方式，而埋点上报程序则包含了所要进行埋点上报的元素，并能够实际进行埋点上报操作，埋点上报程序还可以对埋点参数信息进行解析，因此，基于埋点参数信息和埋点上报程序就能够实现对页面的埋点上报
操作。
111.对页面中的元素进行埋点上报操作的类型可以是多种多样的。
112.在本技术的一个实施例中，根据预设的界面构建框架提供的钩子函数，构建页面的埋点上报程序，包括：将预设的界面构建框架提供的钩子函数挂载至页面中的指定元素上，并构建用于监控对指定元素的点击行为的第一埋点上报程序。
113.第一埋点上报程序是利用挂载至该指定元素的钩子函数进行建立的。
114.比如，指定元素可以为一个按钮元素，那么当用户点击该按钮元素时，第一埋点上报程序就可以实现对该按钮元素的监控，并生成相应的埋点数据，因此，利用第一埋点上报程序可以采集到用户对该按钮元素的点击行为数据。
115.第一埋点上报程序可以基于前述的vue框架的指令特性提供的binding函数进行构建。
116.在本技术的一个实施例中，根据软件开发工具包中的埋点上报程序提供的埋点键从配置文件获取与埋点键匹配的埋点参数信息，包括：根据第一埋点上报程序提供的埋点键从配置文件获取与埋点键匹配的埋点参数信息；根据埋点参数信息和埋点上报程序对页面进行埋点上报操作，包括：根据第一埋点上报程序获得对指定元素的点击行为数据；根据埋点参数信息对点击行为数据进行包装和筛选操作得到结果数据，并将结果数据进行上报。
117.在本技术实施例中，点击行为数据可以包括多种类型的数据，配置文件中的埋点参数信息指示了对点击行为数据进行包装和筛选操作的方式，比如把数据包装为什么格式，将哪种类型的数据过滤掉，将哪种类型的数据筛选出来等等。当然，在本技术的其他实施例中，埋点参数信息还可以指示其他的对点击行为数据进行进一步处理的方式，比如，可以将对点击行为数据进行统计等等。
118.在本技术的一个实施例中，根据预设的界面构建框架提供的钩子函数，构建页面的埋点上报程序，包括：将预设的界面构建框架提供的钩子函数挂载至页面中的指定元素上，并构建用于监控对指定元素的曝光行为的第二埋点上报程序。
119.元素出现在用户的屏幕的可视区域内，称为曝光。
120.在本技术的一个实施例中，埋点参数信息用于指示第二埋点上报程序是否对指定元素进行曝光行为上报。
121.在本技术实施例中，埋点参数信息定义了对元素进行曝光行为上报的方式，具体来说，其决定了是否对一个元素进行曝光行为上报，该埋点参数信息的数据类型可以布尔型。
122.在本技术的一个实施例中，第二埋点上报程序用于判断指定元素是否在页面的可视区域内。
123.第二埋点上报程序是通过指定元素相对于用户屏幕的位置来判断该指定元素是否在页面的可视区域内的，具体过程将在下面进行介绍。
124.在本技术的一个实施例中，第二埋点上报程序根据指定元素的数据、状态、属性中的至少一项发生变化而监控对指定元素的曝光行为。
125.如前所述，vue框架的指令特性提供的updatecomponent函数会在元素的数据、状态、属性变化时被触发，因此，第二埋点上报程序可以基于前述的vue框架的指令特性提供
的updatecomponent函数进行构建。
126.在本技术的一个实施例中，根据预设的界面构建框架提供的钩子函数，构建页面的埋点上报程序，包括：根据预设的界面构建框架提供的钩子函数，构建用于监控对页面的浏览行为的第三埋点上报程序。
127.第三埋点上报程序可以监听到用户对页面是否进行了浏览，甚至还可以监听用户是否浏览了页面中的某一元素。
128.浏览行为和曝光行为上报可以采用类似的方式实现，第三埋点上报程序也可以利用vue框架的指令特性提供的updatecomponent函数进行构建。
129.在本技术的一个实施例中，第三埋点上报程序根据监测到页面中位于顶部的元素的曝光行为而确定对页面进行了浏览行为。
130.本技术实施例中，只要页面最顶部的元素发生了曝光行为，就判定对该页面实施了浏览行为，提高了监控浏览行为的准确性。
131.在本技术的一个实施例中，第三埋点上报程序根据监测到页面中位于底部的元素的曝光行为而确定对页面进行了浏览行为。
132.上述两个实施例均通过对页面中的元素的曝光行为的监测而实现了对页面进行的浏览行为的监控。
133.在本技术的一个实施例中，第三埋点上报程序根据监测到页面中位于顶部的元素和位于底部的元素均发生了曝光行为而确定对页面进行了浏览行为。
134.在本技术实施例中，只有页面中位于顶部的元素和位于底部的元素均发生了曝光行为，才确定对该页面进行了浏览行为，提高了对页面浏览行为进行埋点上报的准确性。
135.图11示出了根据本技术的一个实施例的页面埋点上报方法的详细原理示意图。下面，结合图11具体介绍本技术实施例的方法如何采集用户的点击行为数据、浏览行为数据以及曝光行为数据。
136.请参阅图11，用户操作web页面所进行的一系列行为均为可以通过在该web页面中嵌入的sdk监控到，并能够生成相应的埋点数据。具体如下：
137.一、页面浏览上报
138.具体来说，当用户打开该web页面，sdk就会认为用户浏览了该web页面，进而上报记录用户浏览该web页面的浏览行为数据。
139.二、元素点击行为上报
140.1、在web页面中的元素被渲染上时，会触发sdk中该元素挂载的钩子函数，在该钩子函数中将监听对该元素的点击事件。
141.2、在该点击事件被响应时，则认为用户点击了该元素，此时sdk根据提供的埋点键(key)去读取埋点参数信息；
142.3、根据埋点参数信息，对获得的点击行为数据进行包装和筛选操作，从而得到有效数据，然后可以自动将有效数据上报到后台数据库中，这样便采集到了用户的点击行为数据。
143.三、元素曝光上报
144.1、元素曝光上报比较复杂。首先，sdk根据埋点参数信息在元素挂载的钩子函数中判断是否需要进行曝光上报。
145.2、接着，如果该元素需要进行曝光上报，则sdk需要计算该元素相对用户屏幕的位置，来确定该元素是否出现在可视区内。这样，便可以采集到曝光行为数据。
146.3、因为在元素的数据、状态、属性变化之后，都有可能导致元素的位置发生变化，因此，需要在元素更新的钩子函数中根据元素的数据、状态、属性变化重新计算元素的位置，并在计算完成后重新进行数据上报。这样便可以对元素的曝光行为实现动态实时地监控。
147.具体地，sdk可以根据web标准中的dom对象接口来获取可视区的宽和高，同时会根据dom提供的方法(比如，getboundingclientrect()方法)来获取元素相对可视区左上角的坐标和元素本身的宽和高，以此可以计算出元素是否在可视区内。这里的dom(document object model，文档对象模型)是html和xml文档的编程接口。
148.通过图11还可以看到，在进行元素曝光上报和元素点击行为上报时均会发送上报的key(埋点键)，实际上，进行页面浏览上报时也可以上报key，key可以指示实际埋点上报时所上报的是哪个元素的埋点数据。
149.图11中的页面埋点上报方案是通过report指令进行的，report指令可以为位于sdk中的埋点上报程序的一段代码。通过report指令可以上报key，report指令具体可以包括pageviewreport()、clickreport()以及popreport()指令，其中，pageviewreport()指令可以用于上报用户浏览web页面的浏览行为数据，clickreport()指令可以用于上报用户对web页面中元素的点击行为数据，popreport()指令则可以用于上报web页面中元素的曝光行为数据。
150.图12示出了根据本技术的一个实施例的对元素进行曝光行为上报的原理示意图。请参见图12，dom1和dom2均为页面中的元素，其中，dom1相对于可视区左上角的坐标为(100,50)，而dom2相对于可视区左上角的坐标为(320,20)，很显然，dom1便出现在可视区内，而dom2则不在可视区内。若通过上述方式检测出dom1这一元素位于可视区内，那么将会对该元素进行曝光上报。
151.原先前端开发工程师需要编写大量的埋点上报代码，对用户的点击行为、用户浏览页面需要手动上报，同时还需要计算页面上的模块是否出现在用户可视区内从而计算是否需要上报等等。如上操作都是比较复杂，同时在各个项目中都需要重复的处理这些行为，不仅造成了大量重复的工作，使得成本较高，还降低了项目的开发效率，可能导致项目整体延期。
152.现如今，通过采用本技术实施例提供的方案，基于vue环境的项目统一使用vue提供的指令特性来解决埋点上报的问题，将所有的逻辑代码都从实际的业务代码中抽离、封装。只需要在埋点管理后台中生成埋点配置，将配置和slugreport sdk引入到项目中，在需要计算的元素上绑定vue指令代码即可自动处理该元素是否被点击，是否被曝光，是否被浏览等等行为，真正做到了利用一行代码解决埋点上报问题，在实际的项目开发中业务开发人员无需投入过多的成本在埋点上报中，同时还大大的节省了开发的时间，使得埋点需求开发变得简单快速。
153.对比之前的埋点开发方案可知，之前的一个元素需要进行埋点处理，需要编写至少20行的代码量，现如今只需要一行代码即可解决，实质的提升了业务开发效率。
154.综上所述，根据本技术实施例提供的页面埋点上报方法，只需要将埋点上报程序
和配置参数相关信息添加到软件开发工具包中，并将该软件开发工具包嵌入至页面中，就能够实现对页面的埋点上报操作，实现方式简单；为页面构建的埋点上报程序是基于预设的界面构建框架提供的钩子函数创建的，代码量非常少；整个页面埋点上报功能是在软件开发工具包中实现的，很容易将软件开发工具包中的部分代码迁移到其他项目中。因此，本技术实施例提供的技术方案能够在多个项目中实现代码的统一和复用，可以显著减少项目开发的代码量及开发成本，能够快速针对多个埋点需求甚至多个项目实现埋点上报功能的开发，提高了项目开发效率。
155.以下介绍本技术的装置实施例，可以用于执行本技术上述实施例中的页面埋点上报方法。对于本技术装置实施例中未披露的细节，请参照本技术上述的页面埋点上报方法的实施例。
156.图13示出了根据本技术的一个实施例的页面埋点上报装置的框图。
157.参照图13所示，根据本技术的一个实施例的页面埋点上报装置1300，包括：第一添加单元1310、构建单元1320、第二添加单元1330以及嵌入单元1340。
158.其中，第一添加单元1310于在软件开发工具包中添加配置参数相关信息，所述配置参数相关信息用于对埋点上报操作的方式进行配置；构建单元1320用于根据预设的界面构建框架提供的钩子函数，构建页面的埋点上报程序；第二添加单元1330用于将所述埋点上报程序添加至所述软件开发工具包中；嵌入单元1340用于将所述软件开发工具包嵌入所述页面中，以使访问端在访问所述页面时获得嵌入了所述软件开发工具包的页面，并根据所述软件开发工具包中的埋点上报程序和配置参数相关信息对所述页面进行埋点上报操作。
159.在本技术的一些实施例中，基于前述方案，第一添加单元1310配置为：在软件开发工具包中添加配置文件地址；嵌入单元1340配置为：将所述软件开发工具包嵌入所述页面中，以使访问端在获得嵌入了所述软件开发工具包的所述页面之后，根据所述软件开发工具包中的所述配置文件地址获得配置文件，并根据所述配置文件和所述软件开发工具包中的所述埋点上报程序对所述页面进行埋点上报操作。
160.在本技术的一些实施例中，基于前述方案，嵌入单元1340配置为：根据所述软件开发工具包中的埋点上报程序提供的埋点键从所述配置文件获取与所述埋点键匹配的埋点参数信息；根据所述埋点参数信息和所述埋点上报程序对所述页面进行埋点上报操作。
161.在本技术的一些实施例中，基于前述方案，构建单元1320配置为：将预设的界面构建框架提供的钩子函数挂载至所述页面中的指定元素上，并构建用于监控对所述指定元素的点击行为的第一埋点上报程序。
162.在本技术的一些实施例中，基于前述方案，嵌入单元1340配置为：根据所述第一埋点上报程序提供的埋点键从所述配置文件获取与所述埋点键匹配的埋点参数信息；根据所述第一埋点上报程序获得对所述指定元素的点击行为数据；根据所述埋点参数信息对所述点击行为数据进行包装和筛选操作得到结果数据，并将所述结果数据进行上报。
163.在本技术的一些实施例中，基于前述方案，构建单元1320还配置为：将预设的界面构建框架提供的钩子函数挂载至所述页面中的指定元素上，并构建用于监控对所述指定元素的曝光行为的第二埋点上报程序。
164.在本技术的一些实施例中，基于前述方案，所述第二埋点上报程序用于判断所述
指定元素是否在所述页面的可视区域内。
165.在本技术的一些实施例中，基于前述方案，所述第二埋点上报程序根据所述指定元素的数据、状态、属性中的至少一项发生变化而监控对所述指定元素的曝光行为。
166.在本技术的一些实施例中，基于前述方案，构建单元1320还配置为：根据预设的界面构建框架提供的钩子函数，构建用于监控对所述页面的浏览行为的第三埋点上报程序。
167.图14示出了适于用来实现本技术实施例的电子设备的计算机系统的结构示意图。
168.需要说明的是，图14示出的电子设备的计算机系统1400仅是一个示例，不应对本技术实施例的功能和使用范围带来任何限制。
169.如图14所示，计算机系统1400包括中央处理单元(central processing unit，cpu)1401，其可以根据存储在只读存储器(read
‑
only memory，rom)1402中的程序或者从存储部分1408加载到随机访问存储器(random access memory，ram)1403中的程序而执行各种适当的动作和处理，例如执行上述实施例中所述的方法。在ram 1403中，还存储有系统操作所需的各种程序和数据。cpu 1401、rom 1402以及ram 1403通过总线1404彼此相连。输入/输出(input/output，i/o)接口1405也连接至总线1404。
170.以下部件连接至i/o接口1405：包括键盘、鼠标等的输入部分1406；包括诸如阴极射线管(cathode ray tube，crt)、液晶显示器(liquid crystal display，lcd)等以及扬声器等的输出部分1407；包括硬盘等的存储部分1408；以及包括诸如lan(local area network，局域网)卡、调制解调器等的网络接口卡的通信部分1409。通信部分1409经由诸如因特网的网络执行通信处理。驱动器1410也根据需要连接至i/o接口1405。可拆卸介质1411，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器1410上，以便于从其上读出的计算机程序根据需要被安装入存储部分1408。
171.特别地，根据本技术的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本技术的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分1409从网络上被下载和安装，和/或从可拆卸介质1411被安装。在该计算机程序被中央处理单元(cpu)1401执行时，执行本技术的系统中限定的各种功能。
172.需要说明的是，本技术实施例所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(ram)、只读存储器(rom)、可擦式可编程只读存储器(erasable programmable read only memory，eprom)、闪存、光纤、便携式紧凑磁盘只读存储器(compact disc read
‑
only memory，cd
‑
rom)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本技术中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本技术中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读
存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、有线等等，或者上述的任意合适的组合。
173.附图中的流程图和框图，图示了按照本技术各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。其中，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
174.描述于本技术实施例中所涉及到的单元可以通过软件的方式实现，也可以通过硬件的方式来实现，所描述的单元也可以设置在处理器中。其中，这些单元的名称在某种情况下并不构成对该单元本身的限定。
175.作为一方面，本技术还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的电子设备中所包含的；也可以是单独存在，而未装配入该电子设备中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被一个该电子设备执行时，使得该电子设备实现上述实施例中所述的方法。
176.应当注意，尽管在上文详细描述中提及了用于动作执行的设备的若干模块或者单元，但是这种划分并非强制性的。实际上，根据本技术的实施方式，上文描述的两个或更多模块或者单元的特征和功能可以在一个模块或者单元中具体化。反之，上文描述的一个模块或者单元的特征和功能可以进一步划分为由多个模块或者单元来具体化。
177.通过以上的实施方式的描述，本领域的技术人员易于理解，这里描述的示例实施方式可以通过软件实现，也可以通过软件结合必要的硬件的方式来实现。因此，根据本技术实施方式的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是cd
‑
rom，u盘，移动硬盘等)中或网络上，包括若干指令以使得一台计算设备(可以是个人计算机、服务器、触控终端、或者网络设备等)执行根据本技术实施方式的方法。
178.本领域技术人员在考虑说明书及实践这里公开的实施方式后，将容易想到本技术的其它实施方案。本技术旨在涵盖本技术的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本技术的一般性原理并包括本技术未公开的本技术领域中的公知常识或惯用技术手段。
179.应当理解的是，本技术并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本技术的范围仅由所附的权利要求来限制。