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

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

【技术实现步骤摘要】
一种前端页面事件提取方法


[0001]本专利技术涉及web前端
，尤其涉及一种前端页面事件提取方法。

技术介绍

[0002]随着互联网行业的发展，运营管理和产品研发对用户交互数据的深度依赖，迫切需要掌握用户行为数据。目前市面绝大多数公司获取用户交互数据依赖的是第三方运营工具，需要对上线的产品二次开发或者在网页开发时引入第三方工具的代码库，用来配合第三方运营工具对用户交互数据的抓取，经济成本较高和需要增加开发人员的学习、研发成本。
[0003]使用第三方运营工具，其自身产品运营的数据将被保存在第三方平台上，会面临平台监管失控、经营不善造成数据丢失，数据泄露，数据安全等风险，且同第三方平台合作终止后，运营数据的不可迁移会出现数据断层，不能自主保护和延续管理运营数据，不可控风险因素增多，造成经济损失的风险增加。

技术实现思路

[0004]本专利技术提供了一种前端页面事件提取方法，目的是解决现有技术中存在的缺点，实现低成本高灵活度的开发方式获取web页面用户的交互数据。
[0005]为了实现上述目的，本专利技术提供如下技术方案：一种前端页面事件提取方法，包括如下步骤：对web页面中用户触发交互行为的DOM元素进行约定，得到事件载体；在初始化web页面时通过事件收集器监控事件载体，每次事件载体被用户触发后，将事件信息发送至事件提取组件；事件提取组件通过设定规则对事件信息进行分类，将分类完成的事件数据分别发送至事件数据缓存组件与事件数据上送组件；事件缓存组件通过缓存规则将接收的所述事件数据通过localStorage技术缓存在用户浏览器中；通过身份识别组件获取用户身份信息并传送至事件数据上送组件，作为用户身份识别数据；事件数据上送组件获取事件数据缓存组件的缓存数据，并与事件提取组件获取的数据进行合并去重，得到事件数据集合，把事件数据集合上送到服务器；通过服务器中的数据接收组件接收事件数据集合，并存储到数据库中，服务器中的数据分发组件读取数据库中的数据，并与事件数据请求器进行数据交互；事件数据请求器将接收的事件数据发送至事件数据渲染分发组件；事件数据渲染分发组件对获取的事件数据进行处理分类模板化后，分发到事件数据渲染分类模块；事件数据渲染分类模块接收所需数据，根据第三方图表插件技术的API定义数据
模板，并通过事件图表直接将数据模板渲染至事件可视化web页面。
[0006]优选的，所述在初始化web页面时通过事件收集器监控事件载体，包括如下步骤：所述事件收集器对初始化web页面中的事件载体根据约定定义的class类名进行元素定位，并对符合class类名的元素进行事件监听；监听触发事件动作的事件载体，获取其自身定义的attribute；将attribute的值进行JSON化处理，输出一个包含事件信息的对象或者输出多个事件对象的集合；在每条事件信息上打上事件载体被触发时的时间戳，作为判断该事件是否具有有效性和唯一性的条件之一。
[0007]优选的，所述事件提取组件通过设定规则对事件信息进行分类，包括如下步骤：所述事件提取组件接收事件信息，对接收到的事件信息作出有效性和唯一性的判断；对符合需求条件的数据根据事件属性进行分类，解析出分类好的数据队列，定义为分类事件队列。
[0008]优选的，所述对接收到的事件信息作出有效性和唯一性的判断，具体包括：按需求条件去筛选事件信息，将符合需求的事件信息保留，不符合需求的事件信息剔除；将毫秒级时间间隔内重复的相同事件操作去重，保留一次有效事件信息。
[0009]优选的，所述事件缓存组件通过缓存规则将接收的所述事件数据通过localStorage技术缓存在用户浏览器中，如果事件数据被成功上传至服务器，则删除对应缓存信息，否则将事件数据保留在缓存中等待下次上送服务器时机。
[0010]优选的，所述通过身份识别组件获取用户身份信息并传送至事件数据上送组件，包括如下步骤：所述身份识别组件获取用户IP作为用户身份ID，其中，获取用户IP的方式：运用开源的第三方接口获取或者自定义的方式识别用户IP；将获取到的事件数据同身份ID进行数据绑定后合并生成具有时效性和唯一性的事件数据进行上送；在事件数据的数量达到一定数值后、或者一段时间内、或者页面关闭前及一系列约定程序条件下，立即调用事件数据上送组件。
[0011]优选的，所述事件数据上送组件把数据集合上送到服务器，具体包括：所述事件数据上送组件上送事件数据集合，同服务器建立请求响应，发送事件数据；在响应握手成功后，所述事件数据上送组件向事件数据缓存组件调用删除缓存数据功能，删除已成功发送的事件数据集合。
[0012]优选的，所述通过服务器中的数据接收组件接收事件数据集合并存储到数据库中，包括如下步骤：所述数据接收组件接收到事件数据，对事件数据进行后端存储校验梳理，按照身份ID的索引存入对应的数据库，且向事件数据上送组件发送反馈信息；所述数据分发组件接收到事件数据请求器的请求，读取数据库数据，并把获取的
数据库数据传送到事件数据请求器。
[0013]优选的，所述事件数据请求器将接收的事件数据发送至事件数据渲染分发组件，具体为：事件数据接收分发模块中的事件数据请求器利用Axios技术向服务器发起请求，同数据分发组件进行响应连接，获取数据库对应的事件数据，并将服务器返回的数据接收后传入事件数据渲染分发组件。
[0014]优选的，所述根据第三方图表插件技术的API定义数据模板具体为：所述事件数据渲染分发组件按照各个事件图表组件需要的图表模板，根据图表对数据的要求，将数据进行分类和筛选处理，计算出符合要求的图表数据模板，并分发到对应的事件图表。
[0015]本专利技术与现有技术相比具有以下有益效果：本专利技术提出一种前端页面事件提取的方法，运用前端技术和后端技术，形成一套独立网页事件提取方法，只需要对web页面中用户会触发交互行为的DOM元素进行约定class类名和自定义attribute，形成一个事件载体，然后在web页面中引入事件提取上送模块，就能获取到事件队列数据，传送到服务器，事件可视化web页面从服务器获取到事件数据，就能展示用户交互事件数据，对于开发人员来说，没有学习成本，只要用web页面同样的编程语言即可，同时，事件可视化web页面在浏览器中打开，直接可见统计出来的事件图表数据，方便运营和产品人员观察数据，做出运营和产品决策，本方法实施简单，维护简单，数据真实性强，并且因为事件数据自定义提取，可以根据需求调整提取的attribute，灵活性强。
附图说明
[0016]图1为本专利技术实施例提出的前端页面事件提取方法的整体流程框图。
具体实施方式
[0017]下面结合附图，对本专利技术的具体实施方式做进一步描述。以下实施例仅用于更加清楚地说明本专利技术的技术方案，而不能以此来限制本专利技术的保护范围。
[0018]本专利技术提供了一种前端页面事件提取方法，运用前端技术和后端技术，形成一套独立网页事件提取方法，用户只需要对web页面中用户会触发交互行为的DOM元素进本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种前端页面事件提取方法，其特征在于，包括如下步骤：对web页面中用户触发交互行为的DOM元素进行约定，得到事件载体；在初始化web页面时通过事件收集器监控事件载体，每次事件载体被用户触发后，将事件信息发送至事件提取组件；事件提取组件通过设定规则对事件信息进行分类，将分类完成的事件数据分别发送至事件数据缓存组件与事件数据上送组件；事件缓存组件通过缓存规则将接收的所述事件数据通过localStorage技术缓存在用户浏览器中；通过身份识别组件获取用户身份信息并传送至事件数据上送组件，作为用户身份识别数据；事件数据上送组件获取事件数据缓存组件的缓存数据，并与事件提取组件获取的数据进行合并去重，得到事件数据集合，把事件数据集合上送到服务器；通过服务器中的数据接收组件接收事件数据集合，并存储到数据库中，服务器中的数据分发组件读取数据库中的数据，并与事件数据请求器进行数据交互；事件数据请求器将接收的事件数据发送至事件数据渲染分发组件；事件数据渲染分发组件对获取的事件数据进行处理分类模板化后，分发到事件数据渲染分类模块；事件数据渲染分类模块接收所需数据，根据第三方图表插件技术的API定义数据模板，并通过事件图表直接将数据模板渲染至事件可视化web页面。2.如权利要求1所述的一种前端页面事件提取方法，其特征在于，所述在初始化web页面时通过事件收集器监控事件载体，包括如下步骤：所述事件收集器对初始化web页面中的事件载体根据约定定义的class类名进行元素定位，并对符合class类名的元素进行事件监听；监听触发事件动作的事件载体，获取其自身定义的attribute；将attribute的值进行JSON化处理，输出一个包含事件信息的对象或者输出多个事件对象的集合；在每条事件信息上打上事件载体被触发时的时间戳，作为判断该事件是否具有有效性和唯一性的条件之一。3.如权利要求2所述的一种前端页面事件提取方法，其特征在于，所述事件提取组件通过设定规则对事件信息进行分类，包括如下步骤：所述事件提取组件接收事件信息，对接收到的事件信息作出有效性和唯一性的判断；对符合需求条件的数据根据事件属性进行分类，解析出分类好的数据队列，定义为分类事件队列。4.如权利要求3所述的一种前端页面事件提取方法，其特征在于，所述对接收到的事件信息作出有效性和唯一性的判断，具体包括：按需求条件去筛选事件信息，将符合需求的事件信息保留，不符合需求的事件信息剔除；将毫秒级时间...

【专利技术属性】
技术研发人员：张颖，孙业珺，
申请(专利权)人：创云融达信息技术天津股份有限公司，
类型：发明
国别省市：