CN116016629B

CN116016629B - 一种前端页面事件提取方法

Info

Publication number: CN116016629B
Application number: CN202310279830.1A
Authority: CN
Inventors: 张颖; 孙业珺
Original assignee: Chuangyun Rongda Information Technology Tianjin Co ltd
Current assignee: Chuangyun Rongda Information Technology Tianjin Co ltd
Priority date: 2023-03-22
Filing date: 2023-03-22
Publication date: 2023-06-27
Anticipated expiration: 2043-03-22
Also published as: CN116016629A

Abstract

本发明公开了一种前端页面事件提取方法，涉及web前端技术领域，包括：对前端web页面中用户触发交互行为的DOM元素进行约定，得到事件载体；通过事件提取上送模块对事件载体进行处理，获得事件队列数据；将所述事件队列数据传送到后端服务器；事件数据接收分发模块从后端服务器获取到所述事件队列数据，事件数据渲染分类模块对事件队列数据进行分类事件图表的数据模板化处理，通过事件数据渲染组件渲染图表模板数据得到事件可视化图表的页面，展示用户交互事件数据。本方法实施简单，维护简单，数据真实性强，并且因为事件数据自定义提取，可以根据需求调整提取条件参数，对运营数据的获取方向提供了更多的灵活性。

Description

一种前端页面事件提取方法

技术领域

本发明涉及web前端技术领域，尤其涉及一种前端页面事件提取方法。

背景技术

随着互联网行业的发展，运营管理和产品研发对用户交互数据的深度依赖，迫切需要掌握用户行为数据。目前市面绝大多数公司获取用户交互数据依赖的是第三方运营工具，需要对上线的产品二次开发或者在网页开发时引入第三方工具的代码库，用来配合第三方运营工具对用户交互数据的抓取，经济成本较高和需要增加开发人员的学习、研发成本。

使用第三方运营工具，其自身产品运营的数据将被保存在第三方平台上，会面临平台监管失控、经营不善造成数据丢失，数据泄露，数据安全等风险，且同第三方平台合作终止后，运营数据的不可迁移会出现数据断层，不能自主保护和延续管理运营数据，不可控风险因素增多，造成经济损失的风险增加。

发明内容

本发明提供了一种前端页面事件提取方法，目的是解决现有技术中存在的缺点，实现低成本高灵活度的开发方式获取web页面用户的交互数据。

为了实现上述目的，本发明提供如下技术方案：一种前端页面事件提取方法，包括如下步骤：

对web页面中用户触发交互行为的DOM元素进行约定，得到事件载体；

在初始化web页面时通过事件收集器监控事件载体，每次事件载体被用户触发后，将事件信息发送至事件提取组件；

事件提取组件通过设定规则对事件信息进行分类，将分类完成的事件数据分别发送至事件数据缓存组件与事件数据上送组件；

事件缓存组件通过缓存规则将接收的所述事件数据通过localStorage技术缓存在用户浏览器中；

通过身份识别组件获取用户身份信息并传送至事件数据上送组件，作为用户身份识别数据；

事件数据上送组件获取事件数据缓存组件的缓存数据，并与事件提取组件获取的数据进行合并去重，得到事件数据集合，把事件数据集合上送到服务器；

通过服务器中的数据接收组件接收事件数据集合，并存储到数据库中，服务器中的数据分发组件读取数据库中的数据，并与事件数据请求器进行数据交互；

事件数据请求器将接收的事件数据发送至事件数据渲染分发组件；

事件数据渲染分发组件对获取的事件数据进行处理分类模板化后，分发到事件数据渲染分类模块；

事件数据渲染分类模块接收所需数据，根据第三方图表插件技术的API定义数据模板，并通过事件图表直接将数据模板渲染至事件可视化web页面。

优选的，所述在初始化web页面时通过事件收集器监控事件载体，包括如下步骤：

所述事件收集器对初始化web页面中的事件载体根据约定定义的class类名进行元素定位，并对符合class类名的元素进行事件监听；

监听触发事件动作的事件载体，获取其自身定义的attribute；

将attribute的值进行JSON化处理，输出一个包含事件信息的对象或者输出多个事件对象的集合；

在每条事件信息上打上事件载体被触发时的时间戳，作为判断该事件是否具有有效性和唯一性的条件之一。

优选的，所述事件提取组件通过设定规则对事件信息进行分类，包括如下步骤：

所述事件提取组件接收事件信息，对接收到的事件信息作出有效性和唯一性的判断；

对符合需求条件的数据根据事件属性进行分类，解析出分类好的数据队列，定义为分类事件队列。

优选的，所述对接收到的事件信息作出有效性和唯一性的判断，具体包括：

按需求条件去筛选事件信息，将符合需求的事件信息保留，不符合需求的事件信息剔除；

将毫秒级时间间隔内重复的相同事件操作去重，保留一次有效事件信息。

优选的，所述事件缓存组件通过缓存规则将接收的所述事件数据通过localStorage技术缓存在用户浏览器中，如果事件数据被成功上传至服务器，则删除对应缓存信息，否则将事件数据保留在缓存中等待下次上送服务器时机。

优选的，所述通过身份识别组件获取用户身份信息并传送至事件数据上送组件，包括如下步骤：

所述身份识别组件获取用户IP作为用户身份ID，其中，获取用户IP的方式：运用开源的第三方接口获取或者自定义的方式识别用户IP；

将获取到的事件数据同身份ID进行数据绑定后合并生成具有时效性和唯一性的事件数据进行上送；

在事件数据的数量达到一定数值后、或者一段时间内、或者页面关闭前及一系列约定程序条件下，立即调用事件数据上送组件。

优选的，所述事件数据上送组件把数据集合上送到服务器，具体包括：

所述事件数据上送组件上送事件数据集合，同服务器建立请求响应，发送事件数据；

在响应握手成功后，所述事件数据上送组件向事件数据缓存组件调用删除缓存数据功能，删除已成功发送的事件数据集合。

优选的，所述通过服务器中的数据接收组件接收事件数据集合并存储到数据库中，包括如下步骤：

所述数据接收组件接收到事件数据，对事件数据进行后端存储校验梳理，按照身份ID的索引存入对应的数据库，且向事件数据上送组件发送反馈信息；

所述数据分发组件接收到事件数据请求器的请求，读取数据库数据，并把获取的数据库数据传送到事件数据请求器。

优选的，所述事件数据请求器将接收的事件数据发送至事件数据渲染分发组件，具体为：

事件数据接收分发模块中的事件数据请求器利用Axios技术向服务器发起请求，同数据分发组件进行响应连接，获取数据库对应的事件数据，并将服务器返回的数据接收后传入事件数据渲染分发组件。

优选的，所述根据第三方图表插件技术的API定义数据模板具体为：所述事件数据渲染分发组件按照各个事件图表组件需要的图表模板，根据图表对数据的要求，将数据进行分类和筛选处理，计算出符合要求的图表数据模板，并分发到对应的事件图表。

本发明与现有技术相比具有以下有益效果：

本发明提出一种前端页面事件提取的方法，运用前端技术和后端技术，形成一套独立网页事件提取方法，只需要对web页面中用户会触发交互行为的DOM元素进行约定class类名和自定义attribute，形成一个事件载体，然后在web页面中引入事件提取上送模块，就能获取到事件队列数据，传送到服务器，事件可视化web页面从服务器获取到事件数据，就能展示用户交互事件数据，对于开发人员来说，没有学习成本，只要用web页面同样的编程语言即可，同时，事件可视化web页面在浏览器中打开，直接可见统计出来的事件图表数据，方便运营和产品人员观察数据，做出运营和产品决策，本方法实施简单，维护简单，数据真实性强，并且因为事件数据自定义提取，可以根据需求调整提取的attribute，灵活性强。

附图说明

图1为本发明实施例提出的前端页面事件提取方法的整体流程框图。

具体实施方式

下面结合附图，对本发明的具体实施方式做进一步描述。以下实施例仅用于更加清楚地说明本发明的技术方案，而不能以此来限制本发明的保护范围。

本发明提供了一种前端页面事件提取方法，运用前端技术和后端技术，形成一套独立网页事件提取方法，用户只需要对web页面中用户会触发交互行为的DOM元素进行约定，如约定class类名和自定义的attribute，形成一个事件载体，然后在产品中引入事件处理模块，就能获取到事件队列数据，传送到服务器。事件可视化web页面从服务器获取到事件数据，就能展示用户交互事件数据，对于开发人员来说，没有学习成本，只要用web页面同样的编程语言即可，同时，事件可视化图表的页面在浏览器中打开，直接可见统计出来的事件图表数据，方便运营和产品人员观察事件数据，通过用户的交互事件数据表现，帮助运营和产品做出产品决策。

下面对本实施例提供的一种前端页面事件提取方法进行详细说明，如图1所示，该方法包括如下步骤：

步骤1：对web页面中用户触发交互行为的DOM元素进行约定，得到事件载体。

步骤2：在初始化web页面时通过事件收集器监控事件载体，每次事件载体被用户触发后，将事件信息发送至事件提取组件。

步骤3：事件提取组件通过设定规则对事件信息进行分类，将分类完成的事件数据分别发送至事件数据缓存组件与事件数据上送组件。

步骤4：事件缓存组件通过缓存规则将接收的事件数据通过localStorage技术缓存在用户浏览器中。

步骤5：通过身份识别组件获取用户身份信息并传送至事件数据上送组件，作为用户身份识别数据。

步骤6：事件数据上送组件获取事件数据缓存组件的缓存数据，并与事件提取组件获取的数据进行合并去重，得到事件数据集合，把事件数据集合上送到服务器。

步骤7：通过服务器中的数据接收组件接收事件数据集合，并存储到数据库中，服务器中的数据分发组件读取数据库中的数据，并与事件数据请求器进行数据交互。

步骤8：事件数据请求器将接收的事件数据发送至事件数据渲染分发组件。

步骤9：事件数据渲染分发组件对获取的事件数据进行处理分类模板化后，分发到事件数据渲染分类模块。

步骤10：事件数据渲染分类模块接收所需数据，根据第三方图表插件技术的API定义数据模板，并通过事件图表直接将数据模板渲染至事件可视化web页面。

下面对上述各步骤的操作做进一步的详细说明。

本实施例中，步骤1至步骤6通过事件提取上送模块实现其具体操作过程。具体地，事件提取上送模块包括事件收集器、事件提取组件、事件数据缓存组件、身份识别组件、事件数据上送组件。

具体地，事件载体作为事件数据的发起者，需要能够被用户可见和操作，即它是用户web页面中真实存在的DOM元素，该DOM同时具备事件提取组件要求的元素属性，这些元素属性包括已定义的class类名，以及可被事件提取组件获取的attribute，其attribute可以是包含事件所在页面的名称、事件的名称、事件的类别以及其他需要存储的信息。

事件收集器监听用户对事件载体的交互操作，且提取事件载体的相关属性信息，然后将属性信息传递到事件提取组件，事件提取组件将完成对数据的分类处理，分类好的数据发送到事件数据缓存组件和事件数据上送组件，事件数据缓存组件一方面会按照缓存策略对数据缓存，另一方面会在缓存策略既定的时机上调用事件数据上送组件，事件数据上送组件接收到事件数据，立即请求后端服务器。

具体地，事件收集器将对页面中的事件载体，即根据已定义class类名的元素进行事件监听，将监听有事件触发的事件载体，获取其自身定义的attribute，将attribute的值进行JSON化处理，输出一个包含事件信息的对象或者输出多个事件对象的集合，事件信息将会打上事件载体被触发时的时间戳为标记，作为判断事件是否有效性的依据之一，传送给事件提取组件。

其中事件提取上送模块中的事件提取组件，将会对接收到的事件信息作出有效性和唯一性的判断，有效性是指依据需求条件去筛选事件信息，对符合需求的事件信息保留，不符合需求的事件信息剔除，唯一性是指在毫秒级短时间内，将重复的相同事件操作去重，保留一次有效事件信息，同时对符合需求条件的数据根据事件属性进行分类，解析出分类好的数据队列，定义为分类事件队列，传送给事件数据缓存组件。

其中事件提取上送模块中的事件数据缓存组件，将获取到的事件队列集通过localStorage技术缓存在用户浏览器中以后，如果事件数据被成功上传至服务器，删除对应缓存信息，否则保留在缓存中等待下次上送服务器时机，可根据约定程序条件，在事件队列的数据量达到一定数值后、或者一段时间内、或者页面关闭前等约定程序条件下，立即调用事件数据上送组件。

其中事件提取上送模块中的身份识别组件，可以用开源的工具或者自定义的方式获取用户IP，如搜狐或腾讯的开源接口，依据IP作为用户的身份ID，身份ID可以保障用户数据的唯一性和真实性，以及数据可收集的价值，将获取到的事件数据同身份ID进行数据绑定后合并生成具有时效性和唯一性的事件数据进行上送，一般情况下，身份识别组件在第一次获取到IP后，可以在页面生命周期中缓存，作为一个全局变量，直到页面初始化后再重新获取。

其中事件提取上送模块中的事件数据上送组件，在接收事件提取组件传送的数据后，同时读取事件数据缓存组件中的缓存数据，将两组数据进行去重合并，得到具有时效性和唯一性的事件数据后，同服务器建立请求响应，向服务器的数据接收组件发送事件数据，在响应握手成功后，事件数据上送组件会向事件数据缓存组件调用删除缓存数据功能，删除已成功发送的事件数据，为后续的事件数据让渡出缓存空间，若是同服务器握手失败，则不会删除缓存的事件数据，等待下次握手时机。

本实施例中，步骤7在服务器中实现。具体地，服务器中设置有数据接收组件、数据分发组件和数据库。

具体地，服务器中的数据接收组件获取到事件数据，将事件数据存储到数据库，存储成功后，返回存储成功的信息，存储失败则返回存储失败的信息。而数据分发组件负责响应事件数据接收分发模块请求和读取数据库中的事件数据，将事件数据传送到事件数据接收分发模块。

其中数据接收组件接收可存储事件数据，对事件数据进行后端存储校验梳理，按照身份ID的索引存入相应的数据库，存储成功或者失败均会向事件数据上送组件发送反馈信息。数据分发组件接收到事件数据接收分发模块的请求，将读取数据库数据，并把从数据库获取的数据传送到事件数据接收分发模块中的事件数据请求器。

本实施例中，步骤8至步骤10在事件数据可视化终端中实现，事件可视化web页面作为事件数据可视化终端，包含了事件数据接收分发模块、事件数据渲染分类模块和不同的事件图表。具体地，事件数据接收分发模块包括事件数据请求器和事件数据渲染分发组件，事件数据渲染分类模型由多个事件数据渲染分类组件组成。

事件数据请求器用Axios技术向服务器发起请求，同数据分发组件进行响应连接，负责响应后端服务器获取数据库对应的用户事件数据，将获取的事件数据发送到事件数据渲染分类组件。事件数据渲染模块接收到事件数据，按照各个事件图表组件需要的图表模板，根据图表对数据的要求，对数据进行分类和筛选处理，将事件数据处理成符合事件图表需求的图表数据模板，并分发到对应的事件图表中。

事件图表将模板数据表现到web页面中，每一个事件数据渲染组件是自定义主题的，比如点击事件图表组件、拖拽事件图表组件、表单事件图表组件，当然不限制以上这些组件再细化子组件，以达到用户数据的多维度和丰富性，其中事件数据渲染组件的图表绘制可以运用echarts.js技术或者其他前端技术的图表插件来实现完成事件数据图表的可视化。

以上所述实施例仅为本发明较佳的具体实施方式，本发明的保护范围不限于此，任何熟悉本领域的技术人员在本发明披露的技术范围内，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围，这样，倘若本发明的这些修改和变型属于本发明权利要求及等同技术的范围之内，则本发明也意图包含这些改动和变型在内。

Claims

1.一种前端页面事件提取方法，其特征在于，包括如下步骤：

所述在初始化web页面时通过事件收集器监控事件载体，包括如下步骤：

监听触发事件动作的事件载体，获取其自身定义的attribute；

在每条事件信息上打上事件载体被触发时的时间戳，作为判断该事件是否具有有效性和唯一性的条件之一；

2.如权利要求1所述的一种前端页面事件提取方法，其特征在于，所述事件提取组件通过设定规则对事件信息进行分类，包括如下步骤：

3.如权利要求2所述的一种前端页面事件提取方法，其特征在于，所述对接收到的事件信息作出有效性和唯一性的判断，具体包括：

4.如权利要求1所述的一种前端页面事件提取方法，其特征在于，所述事件缓存组件通过缓存规则将接收的所述事件数据通过localStorage技术缓存在用户浏览器中，如果事件数据被成功上传至服务器，则删除对应缓存信息，否则将事件数据保留在缓存中等待下次上送服务器时机。

5.如权利要求1所述的一种前端页面事件提取方法，其特征在于，所述通过身份识别组件获取用户身份信息并传送至事件数据上送组件，包括如下步骤：

将获取到的事件数据同用户身份ID进行数据绑定后合并生成具有时效性和唯一性的事件数据进行上送；

6.如权利要求4所述的一种前端页面事件提取方法，其特征在于，所述事件数据上送组件把数据集合上送到服务器，具体包括：

7.如权利要求5所述的一种前端页面事件提取方法，其特征在于，所述通过服务器中的数据接收组件接收事件数据集合并存储到数据库中，包括如下步骤：

8.如权利要求7所述的一种前端页面事件提取方法，其特征在于，所述事件数据请求器将接收的事件数据发送至事件数据渲染分发组件，具体为：

事件数据接收分发模块中的事件数据请求器利用Axios技术向服务器发起请求，同数据分发组件进行响应连接，获取数据库对应的事件数据，并将服务器返回的数据传入事件数据渲染分发组件。

9.如权利要求8所述的一种前端页面事件提取方法，其特征在于，所述根据第三方图表插件技术的API定义数据模板具体为：所述事件数据渲染分发组件按照各个事件图表组件需要的图表模板，根据图表对数据的要求，将数据进行分类和筛选处理，计算出符合要求的图表数据模板，并分发到对应的事件图表。