CN115374006A - 基于虚拟DOM声明实现的客户端web应用的埋点生成方法、装置 - Google Patents

Abstract

本申请提供了一种基于虚拟DOM声明实现的客户端web应用的埋点生成方法、装置。所述方法包括：当客户端页面数据发生变化时，利用虚拟DOM声明创建出真实DOM声明,所述真实声明中声明了多个第一节点，虚拟DOM声明中声明了多个第二节点和属性，部分包括监听属性，其中，多个第二节点与所述多个第二节点一一对应；根据虚拟DOM声明中解析出真实DOM声明中需要监听的第一节点得到多个监听节点并在对各监听节点进行标注得到各节点的标识信息；当监听标识为函数标识，将与监听属性相对应的预设监听函数与监听节点绑定，预设监听函数用于获取监听节点的信息、或者获取监听节点的信息以及对获取的信息进行处理后回传给第一指定地址。本申请提高了埋点效率。

Description

基于虚拟DOM声明实现的客户端web应用的埋点生成方法、 装置

技术领域

本发明涉及计算机信息处理领域，尤其涉及一种基于虚拟DOM声明实现的客户端web应用的埋点生成方法、装置。

背景技术

任何针对c端开发的交互式系统，都或多或少由于系统迭代，产品定位改变等原因，健壮性越来越难以得到保障，很容易出现各种各样奇怪的bug，导致用户流失，而用户的行为又千奇百怪，有些场景需要追踪用户的行为来进行复现，否则极难准确定位问题，给系统维护带来极大的不可控风险。另外，针对客户的行为，往往产品经理需要收集用户在产品使用的各个环节的使用情况，以此来作为后续产品迭代方向的数据支持，而随着产品越来越复杂，场景越来越多，单纯的通过硬编码的方式进行用户行为的手动处理，变得繁琐而冗余，开发和维护的成本成几何倍数增长，最终导致应用的可用性越来越差。

针对上述情况，在web应用场景下，一般就采用埋点方式进行收集客户行为，以此来追踪用户的行为是否发生异常，及时通过监控规则，对线上业务进行精准监控，当发生异常时，不会被动等待，而是主动出击，针对用户场景，还原用户行为，帮助开发人员快速定位问题，目前市面上的埋点系统层出不穷，一般都采用独立框架，实现声明式，侵入式，或者无埋点，但是采用上述方案都具有各自的局限性。

发明内容

本发明提供了一种一种基于虚拟DOM声明实现的客户端web应用的埋点生成方法、装置。减少了不必要的维护成本，以及系统风险，提高埋点效率。

本发明第一方面提供一种基于虚拟DOM声明实现的客户端web应用的埋点生成方法。该方法包括：

当客户端页面数据发生变化时，利用虚拟DOM声明创建出真实DOM声明,所述真实声明中声明了一个或者多个第一节点，虚拟DOM声明中声明了一个或者多个第二节点、所述一个或者多个第二节点的属性，所述一个或者多个第二节点部分包括监听属性，所述监听属性包含监听标识，其中，所述一个或者多个第二节点与所述一个或者多个第二节点一一对应；根据所述虚拟DOM声明中解析出真实DOM声明中需要监听的第一节点得到一个或者多个监听节点并在对各监听节点进行标注得到各节点的标识信息；当所述监听标识为函数标识，将与监听属性相对应的预设监听函数与所述监听节点绑定，所述预设监听函数用于获取所述监听节点的信息、或者获取所述监听节点的信息以及对所述获取的信息进行处理后回传给第一指定地址。

本发明第二方面提供了一种基于虚拟DOM声明实现的客户端web应用的埋点生成装置。该装置包括：

DOM生成模块，当客户端页面数据发生变化时，利用虚拟DOM声明创建出真实DOM声明,所述真实声明中声明了一个或者多个第一节点，虚拟DOM声明中声明了一个或者多个第二节点、所述一个或者多个第二节点的属性，所述一个或者多个第二节点部分包括监听属性，所述监听属性包含监听标识，其中，所述一个或者多个第二节点与所述一个或者多个第二节点一一对应；

解析模块，根据所述虚拟DOM声明中解析出真实DOM声明中需要监听的第一节点得到一个或者多个监听节点并在对各监听节点进行标注得到各节点的标识信息；

获取模块，当所述监听标识为函数标识，将与监听属性相对应的预设监听函数与所述监听节点绑定，所述预设监听函数用于获取所述监听节点的信息、或者获取所述监听节点的信息以及对所述获取的信息进行处理后回传给第一指定地址。

本发明第三方面提供一种web应用客户端，其特征在于，所述计算机设备包括：

计算机可读存储介质，用于存储程序指令；

处理器，用于执行所述程序指令以实现所述的一种基于虚拟DOM声明实现的客户端web应用的埋点生成方法。

本申请通过根据客户端改变的数据生成虚拟dom，并声明虚拟dom中的节点的属性信息，通过根据所述节点是否需要被监听在属性信息中加入监听属性，通过所述监听属性信息将节点分为有默认地址以获取对应的用户行为事件的节点和需要加载自定义地址的节点，根据加入了监听属性的节点生成真实dom，以使浏览器通过所述真实dom获取埋点信息。本申请扩展了原生的框架，对埋点系统进行合理的支持，使框架具备了模块化，系统化的天然支持能力，减少了不必要的维护成本，以及系统风险，提高埋点效率和针对性。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍。显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图示出的结构获得其他的附图。

图1为本申请第一实施例提供的基于虚拟DOM声明实现的客户端web应用的埋点生成方法的系统架构示意图。

图2为本申请第一实施例提供的基于虚拟DOM声明实现的客户端web应用的埋点生成方法的流程图。

图3为本申请第一实施例提供的DOM树的示意图。

图4为本申请第一实施例提供的用户未对页面操作时的虚拟dom树的示意图。

图5为本申请第一实施例提供的新的虚拟dom树的示意图。

图6为本申请第一实施例提供的基于虚拟DOM声明实现的客户端web应用的埋点生成方法的计算机设备内部结构示意图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，如下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本申请，并不用于限定本申请。

本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”、“第四”等(如果存在)是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的实施例能够以除了在这里图示或描述的内容以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

需要说明的是，在本申请中涉及“第一”、“第二”等的描述仅用于描述目的，而不能理解为指示或暗示其相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括至少一个该特征。另外，各个实施例之间的技术方案可以相互结合，但是必须是以本领域普通技术人员能够实现为基础，当技术方案的结合出现相互矛盾或无法实现时应当认为这种技术方案的结合不存在，也不在本申请要求的保护范围之内。

本申请提供了一种基于虚拟DOM声明实现的客户端web应用的埋点生成方法。所述方法应用于客户端安装的软件，如图1所示，所述客户端1与后端服务器2通过网络3进行通讯连接，所述软件4安装于所述客户端1上。所述客户端服务器可以但不限于各种个人计算机、笔记本电脑、智能手机、平板电脑和便携式可穿戴设备。预先将可以处理数据的软件安装在客户端。

请结合参看图2，其为本申请第一实施例提供的基于虚拟DOM声明实现的客户端web应用的埋点生成方法的流程图。该基于虚拟DOM声明实现的客户端web应用的埋点生成方法包括步骤S101-S103。

步骤S101，当客户端页面数据发生变化时，利用虚拟DOM声明创建出真实DOM声明,所述真实声明中声明了一个或者多个第一节点，虚拟DOM声明中声明了一个或者多个第二节点、所述一个或者多个第二节点的属性，所述一个或者多个第二节点部分包括监听属性，所述监听属性包含监听标识，其中，所述一个或者多个第二节点与所述一个或者多个第二节点一一对应。

DOM(Document Object Model)是文档对象模型，如图3所示，是将网页上或者组织页面上的元素对象组织在一个树形结构中，用来表示文档中对象的标准模型。虚拟DOM(virtual DOM，简称VDOM)是一种虚拟文档对象模型，将浏览器页面上的元素以JS语言对象的形式表示的树形结构，所述虚拟DOM树形结构上的节点与真实DOM树形结构上的节点一一对应。

当用户操作客户端的显示屏上的页面时，例如鼠标单击、双击、滚轮滑动、点击按钮等用户对页面上控件进行操作，客户端页面的数据会发生变化，客户端将发生改变的数据发送至后端服务器，后端服务器对所述改变的数据进行处理，并将处理好的数据发送至客户端服务器。客户端服务器中预先安装好的软件获取所述处理好的数据，并根据所述处理好的数据生成虚拟dom树形结构，所述虚拟dom树声明了数据中的节点的属性，例如某个控件是用户通过点击控件之后会显示某个浏览页面，某个控件是用户通过点击控件之后关闭某个浏览页面，某个控件是用户需要输入内容后自动显示某个页面或结束某个付款操作流程，所述若干个控件为若干个节点或元素。软件开发人员在生成虚拟dom时在所述若干节点加载了属性，若所述属性中包含了监听属性，则所述节点即为需要对用户的行为进行埋点的节点，例如，当某个新闻浏览页面在客户端被打开时，进行一次埋点，则将所述通过点击控件打开新闻浏览页面的控件的属性设置为监听属性，若所述属性中软件开发人员没有加载监听属性，则所述节点没有被监听。

客户端服务器根据所述处理好的数据生成虚拟dom树形结构，如图4所示，为用户未对页面操作时的虚拟dom树形结构，应用diff算法获取如图5所示新的虚拟dom树形结构相对于旧的虚拟dom树形结构的改变，根据所述改变创建真实dom，根据所述真实dom生成新的页面以在客户端显示屏显示。

步骤S102，根据所述虚拟DOM声明中解析出真实DOM声明中需要监听的第一节点得到一个或者多个监听节点并在对各监听节点进行标注得到各节点的标识信息。

软件在真实的dom中才能获取用户发生的埋点事件。通过虚拟dom声明的节点的属性中的监听属性获取开发人员设置的需要进行监听的多个节点，并在节点上加载标识对所述多个节点进行标注，以使真实的dom能够识别。

步骤S103，当所述监听标识为函数标识，将与监听属性相对应的预设监听函数与所述监听节点绑定，所述预设监听函数用于获取所述监听节点的信息、或者获取所述监听节点的信息以及对所述获取的信息进行处理后回传给第一指定地址。

节点的监听属性中包含监听标识，所述监听标识用来获取用户行为事件，例如，通过监听属性确定所述节点被监听，通过监听标识确定监听的节点为用户通过点击节点对应的空间打开购买某促销商品的页面，所述监听标识可以为函数标识，通过所述函数标识获取对应的预设监听函数，并将所述预设监听函数与节点绑定，所述预设监听函数为代码段，通过所述预设监听函数获取默认地址，根据所述地址确定所述节点对应的用户行为事件，所述默认地址为第一指定地址。

在生成新的虚拟dom时，节点的属性信息中的监听属性也可以是属性标识，所述属性标识中没有预设监听函数或者默认地址以获取节点对应的用户事件。将所述属性标识对应的节点的属性信息通过钩子函数设置节点的属性信息，包括在属性信息中设置监听函数，所述监听函数可以获取节点对应的地址，开发人员可以在钩子函数中自行定义所述的第二指定地址，通过所述地址可以获取节点对应的用户事件，例如，用户通过点击控件打开了新品促销的页面。

将节点对应的用户行为事件加载在节点的属性信息中，以在生成真实dom后，浏览器可以识别节点对应的用户行为事件。

本方法采用Vue和React的框架，所述框架中包含了钩子函数、对节点预先设置好的监听信息对应的默认地址。

本申请还提供了一种基于实现的客户端web应用的埋点生成装置，所述装置包括:

DOM生成模块，用于当客户端页面数据发生变化时，利用虚拟DOM声明创建出真实DOM声明,所述真实声明中声明了一个或者多个第一节点，虚拟DOM声明中声明了一个或者多个第二节点、所述一个或者多个第二节点的属性，所述一个或者多个第二节点部分包括监听属性，所述监听属性包含监听标识，其中，所述一个或者多个第二节点与所述一个或者多个第二节点一一对应。

当用户操作客户端的显示屏上的页面时，例如鼠标单击、双击、滚轮滑动、点击按钮等用户对页面上控件进行操作，客户端页面的数据会发生变化，客户端将发生改变的数据发送至后端服务器，后端服务器对所述改变的数据进行处理，并将处理好的数据发送至客户端服务器。客户端服务器中预先安装好的软件获取所述处理好的数据，并根据所述处理好的数据生成虚拟dom树形结构，所述虚拟dom树声明了数据中的节点的属性，例如某个控件是用户通过点击控件之后会显示某个浏览页面，某个控件是用户通过点击控件之后关闭某个浏览页面，某个控件是用户需要输入内容后自动显示某个页面或结束某个付款操作流程，所述若干个控件为若干个节点或元素。软件开发人员在生成虚拟dom时在所述若干节点加载了属性，若所述属性中包含了监听属性，则所述节点即为需要对用户的行为进行埋点的节点，例如，当某个新闻浏览页面在客户端被打开时，进行一次埋点，则将所述通过点击控件打开新闻浏览页面的控件的属性设置为监听属性，若所述属性中软件开发人员没有加载监听属性，则所述节点没有被监听。

解析模块，用于根据所述虚拟DOM声明中解析出真实DOM声明中需要监听的第一节点得到一个或者多个监听节点并在对各监听节点进行标注得到各节点的标识信息。

软件在真实的dom中才能获取用户发生的埋点事件。通过虚拟dom声明的节点的属性中的监听属性获取开发人员设置的需要进行监听的多个节点，并在节点上加载标识对所述多个节点进行标注，以使真实的dom能够识别。

获取模块，用于当所述监听标识为函数标识，将与监听属性相对应的预设监听函数与所述监听节点绑定，所述预设监听函数用于获取所述监听节点的信息、或者获取所述监听节点的信息以及对所述获取的信息进行处理后回传给第一指定地址。

节点的监听属性中包含监听标识，所述监听标识用来获取用户行为事件，例如，通过监听属性确定所述节点被监听，通过监听标识确定监听的节点为用户通过点击节点对应的空间打开购买某促销商品的页面，所述监听标识可以为函数标识，通过所述函数标识获取对应的预设监听函数，并将所述预设监听函数与节点绑定，所述预设监听函数为代码段，通过所述预设监听函数获取默认地址，根据所述地址确定所述节点对应的用户行为事件。

本申请还提供一种计算机设备900，请结合参看图6，其为本申请第一实施例提供的计算机设备900的内部结构示意图。进一步的，该计算机嵌入式设备为HUD。计算机设备900至少包括存储器901、处理器902。具体地，存储器901，用于存储基于虚拟DOM声明实现的客户端web应用的埋点生成方法的程序指令。处理器902，用于执行程序指令以使计算机设备900实现上述的基于虚拟DOM声明实现的客户端web应用的埋点生成方法。

其中，存储器901至少包括一种类型的可读存储介质，该可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器（例如，SD或DX存储器等）、磁性存储器、磁盘、光盘等。存储器901不仅可以用于存储安装于计算机设备900的应用软件及各类数据，例如，基于虚拟DOM声明实现的客户端web应用的埋点生成方法的控制指令等，还可以用于暂时地存储已经输出或者将要输出的数据。

处理器902在一些实施例中可以是中央处理器（Central Processing Unit,CPU）、控制器、微控制器、微处理器或其他数据处理芯片，用于运行存储器901中存储的程序指令或处理数据。具体地，处理器902执行基于虚拟DOM声明实现的客户端web应用的埋点生成方法的程序指令以控制计算机设备900实现基于虚拟DOM声明实现的客户端web应用的埋点生成方法。

进一步地，总线903可以是外设部件互连标准总线(peripheral componentinterconnect，简称PCI)或扩展工业标准结构总线(extended industry standardarchitecture，简称EISA)等。该总线可以分为地址总线、数据总线、控制总线等。为便于表示，图6中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。

进一步地，计算机设备900还可以包括显示组件904。显示组件904可以是LED（Light Emitting Diode，发光二极管）显示器、液晶显示器、触控式液晶显示器以及OLED（Organic Light-Emitting Diode，有机发光二极管）触摸器等。其中，显示组件904也可以适当的称为显示装置或显示单元，用于显示在计算机设备900中处理的信息以及用于显示可视化的用户界面。

进一步地，计算机设备900还可以包括通信组件905，通信组件905可选的可以包括有线通信组件和/或无线通信组件（如WI-FI通信组件、蓝牙通信组件等），通常用于在计算机设备900与其他计算机设备之间建立通信连接。

图6仅示出了具有组件901-905以及实现基于虚拟DOM声明实现的客户端web应用的埋点生成方法的程序指令的计算机设备900，本领域技术人员可以理解的是，图6示出的结构并不构成对计算机设备900的限定，可以包括比图示更少或者更多的部件，或者组合某些部件，或者不同的部件布置。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统，装置和单元的具体工作过程，具体地，计算机设备900的处理器902执行基于虚拟DOM声明实现的客户端web应用的埋点生成方法的程序指令以控制计算机设备900实现可运动物体的运动轨迹的预测方法的详细过程。可以参考上述方法实施例中的对应过程，在此不再赘述。

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

以上所列举的仅为本申请较佳实施例而已，当然不能以此来限定本申请之权利范围，因此依本申请权利要求所作的等同变化，仍属于本申请所涵盖的范围。

Claims (10)

1.一种基于虚拟DOM声明实现的客户端web应用的埋点生成方法，其特征在于，所述实现客户端web应用的埋点生成方法包括：

当客户端页面数据发生变化时，利用虚拟DOM声明创建出真实DOM声明,所述真实声明中声明了一个或者多个第一节点，虚拟DOM声明中声明了一个或者多个第二节点、所述一个或者多个第二节点的属性，所述一个或者多个第二节点部分包括监听属性，所述监听属性包含监听标识，其中，所述一个或者多个第二节点与所述一个或者多个第二节点一一对应；

根据所述虚拟DOM声明中解析出真实DOM声明中需要监听的第一节点得到一个或者多个监听节点并在对各监听节点进行标注得到各节点的标识信息；

当所述监听标识为函数标识，将与监听属性相对应的预设监听函数与所述监听节点绑定，所述预设监听函数用于获取所述监听节点的信息、或者获取所述监听节点的信息以及对所述获取的信息进行处理后回传给第一指定地址。

2.如权利要求1所述的客户端web应用埋点方法，其特征在于，所述方法还包括：

当所述监听属性为属性标识，根据所述监听属性获取所述节点与所述属性标识相对应的属性信息。

3.如权利要求2所述的实现客户端web应用的埋点生成方法，其特征在于，所述方法还包括：上传所述属性信息给第二指定的地址。

4.如权利要求3所述的实现客户端web应用埋点方法，其特征在于，所述第一指定地址与所述第二指定地址不同，所述第一指定地址不可更改，所述第二地址为自定义。

5.如权利要求3所述的实现客户端web应用的埋点生成方法，其特征在于，根据所述监听属性获取所述节点与所述属性标识相对应的属性信息是通过主代码实现。

6.如权利要求5所述的客户端客户端web应用埋点方法，其特征在于，所述预设的函数是通过由主代码调用来执行。

7.如权利要求3所述的实现客户端web应用的埋点生成方法，其特征在于，所述第一地址定义于所述主代码中。

8.如权利要求1所述的实现客户端web应用的埋点生成方法，其特征在于，所述第二地址定义于所述监听函数中。

9.一种基于实现的客户端web应用的埋点生成装置，其特征在于，客户端web应用的埋点生成装置包括：

DOM生成模块，用于当客户端页面数据发生变化时，利用虚拟DOM声明创建出真实DOM声明,所述真实声明中声明了一个或者多个第一节点，虚拟DOM声明中声明了一个或者多个第二节点、所述一个或者多个第二节点的属性，所述一个或者多个第二节点部分包括监听属性，所述监听属性包含监听标识，其中，所述一个或者多个第二节点与所述一个或者多个第二节点一一对应；

解析模块，用于根据所述虚拟DOM声明中解析出真实DOM声明中需要监听的第一节点得到一个或者多个监听节点并在对各监听节点进行标注得到各节点的标识信息；

获取模块，用于当所述监听标识为函数标识，将与监听属性相对应的预设监听函数与所述监听节点绑定，所述预设监听函数用于获取所述监听节点的信息、或者获取所述监听节点的信息以及对所述获取的信息进行处理后回传给第一指定地址。

10.一种web应用客户端，其特征在于，所述Web应用客户端包括：

存储器，用于存储计算机程序指令；

处理器，用于执行所述计算机程序指令以实现如权利要求1~9任一项所述的实现客户端web应用的埋点生成方法。

Images