【技术实现步骤摘要】
本专利技术涉及计算机，尤其涉及一种基于vue的个性化数据前端埋点方法、装置及存储介质，旨在实现快速、便捷的数据采集。
技术介绍
1、为了实现精准的用户推送，我们需深入了解用户需求，对用户的历史行为轨迹数据进行有效存储，为后续的数据分析提供支持，从而不断优化产品。在数据采集领域，尤其是用户行为数据采集领域，“埋点”是指针对特定用户行为或事件进行数据捕获、处理和发送的相关技术及其实施过程。例如，记录用户对某个图标的点击次数或观看特定视频的时长等。
2、目前市场上的埋点方案主要有全埋点、前端埋点和服务端埋点(后端埋点)。全埋点可以不进行任何开发实现数据的收集，但是数据质量较差，对后期分析帮助有限，且数据清洗需要花费大量时间。前端埋点能够实现较为精准的数据存储，但需要定义特定的触发机制，如用户点击、访问特定页面或请求特定接口等，开发工作量相对较大。服务端埋点同前端埋点一样，同样能收集精准的数据，但主要针对接口层面，无法收集用户在页面上的操作数据，且不易发现问题。
3、针对现有技术的不足，如何在前端埋点的基础上，结合目前市场上流行的前端框架，通过编写少量代码实现个性化数据的埋点方案，成为本领域技术人员亟待解决的问题。
技术实现思路
1、本专利技术的目的在于提供一种基于vue的前端埋点方法、装置及存储介质，以解决上述技术背景中提出的问题。
2、为实现上述目的，本专利技术采用以下技术方案：
3、第一个方面，本申请提供了一种基于vue的前端埋点方法，
4、在浏览器的全局对象上设置一个全局的埋点变量，供vue项目上传所需参数，参数包括路由模式、vue构造函数对象、需要被埋点的访问地址映射对象和埋点方法；根据参数确定埋点类型，埋点类型包括路由埋点、事件埋点和模块曝光埋点；其中，路由模式包括history和hash模式，vue构造函数对象用于注册全局自定义的埋点指令；
5、根据埋点类型，监听vue项目中对应的路由、事件或模块的变化，实时触发相应的埋点方法，具体包括如下步骤：
6、根据路由模式选择不同的路由埋点方式来监听浏览器访问地址的改变，以实现路由埋点：当路由模式为history时，通过重写history对象的pushstate和replacestate方法来监听页面路由跳转，并根据访问地址映射对象判断是否调用路由埋点方法；当路由模式为hash时，通过监听浏览器的hashchange事件来实现对页面路由跳转的监听，并根据访问地址映射对象判断是否调用路由埋点方法；
7、通过vue.directive注册一个全局自定义的事件埋点指令tb-clicklog，用于记录用户点击事件；创建bindglobalclickevent方法给document对象绑定点击事件，通过冒泡机制监听浏览器所有点击事件：在点击事件的回调函数中，判断触发点击事件的dom节点是否含有自定义属性tb-clicklog，如果有，则获取该dom节点的自定义属性tb-clicklog绑定的埋点数据，然后调用事件埋点方法实现事件埋点；如果没有，则获取当前dom节点的parentnode属性继续判断，直到获取到有自定义属性tb-clicklog的dom节点或达到根节点为止，然后获取该dom节点或根节点的自定义属性绑定的埋点数据，然后调用事件埋点方法实现事件埋点；其中，埋点数据包括行为编码；
8、通过vue.directive注册一个全局自定义的模块曝光埋点指令tb-modulelog，用于记录页面模块的曝光；利用bind和componentupdated钩子函数在页面首次加载数据和数据更新时触发埋点逻辑；在bind和componentupdated生命周期内处理与解析tb-modulelog指令绑定的埋点数据，该埋点数据包含曝光的数据列表；调用模块曝光埋点方法，传入埋点类型、页面编码、行为编码和个性化埋点数据，实现模块曝光埋点。
9、在一种优选实施例中，需要被埋点的访问地址映射对象是一个用于匹配当前浏览器地址栏访问地址的javascript对象，访问地址映射对象以访问路径作为key值、以埋点编码作为value，其中访问路径是指需要被埋点的浏览器里的访问地址，埋点编码是一个具有唯一性的字符串，用于标识特定的埋点；
10、在当前浏览器地址栏访问地址与访问地址映射对象中的key值相匹配时，通过调用后端接口实现路由埋点。
11、在一种优选实施例中，所述当路由模式为history时，通过重写history对象的pushstate和replacestate方法来监听页面路由跳转，并根据访问地址映射对象判断是否调用路由埋点方法，具体包括如下步骤：
12、复制原始的pushstate和replacestate方法至新的变量中，用于后续调用；
13、重写history对象的pushstate和replacestate方法，在页面发生跳转时获取当前的访问地址，该访问地址不包括协议、域名和端口；
14、执行object.prototype.hasownproperty.call方法，检查访问地址映射对象是否有与当前的访问地址匹配的key值；
15、如果匹配，则调用vue项目传入的路由埋点方法，并传入埋点类型、页面编码和上一页面编码参数；同时，将获取到的页面编码赋值给上一页面编码变量，用于后续的路由埋点；
16、调用原始的pushstate和replacestate方法，以确保页面跳转正常进行。
17、在一种优选实施例中，所述当路由模式为hash时，通过监听浏览器的hashchange事件来实现对页面路由跳转的监听，并根据访问地址映射对象判断是否调用路由埋点方法，具体包括如下步骤：
18、通过window.location.hash获取访问地址中带有#的hash值；
19、对带有#的hash值进行substring操作，去掉#号，得到不带#的hash值；
20、执行object.prototype.hasownproperty.call方法，检查访问地址映射对象是否有与不带#的hash值相匹配的key值；
21、如果匹配，则调用vue项目传入的路由埋点方法，并传入埋点类型、页面编码和上一页面编码参数；同时将获取到的页面编码赋值给上一页面编码变量，用于后续的路由埋点。
22、在一种优选实施例中，实现事件埋点的过程中，通过window.document.addeventlistener绑定全局的click回调函数，用于接受event事件对象参数；
23、获取event事件对象的target属性，得到当前触发点击事件的dom元素；
24、通过dom.hasattribute("tb-clicklog")判断该dom元素上是否含有自定义属性tb-clicklog：如果该dom元素具有自定义属性tb-clicklog，本文档来自技高网...
【技术保护点】
1.一种基于Vue的前端埋点方法，包括：
2.根据权利要求1所述的一种基于Vue的前端埋点方法，其特征在于，包括：需要被埋点的访问地址映射对象是一个用于匹配当前浏览器地址栏访问地址的JavaScript对象，访问地址映射对象以访问路径作为key值、以埋点编码作为value，其中访问路径是指需要被埋点的浏览器里的访问地址，埋点编码是一个具有唯一性的字符串，用于标识特定的埋点；
3.根据权利要求2所述的一种基于Vue的前端埋点方法，其特征在于，所述当路由模式为history时，通过重写history对象的pushState和replaceState方法来监听页面路由跳转，并根据访问地址映射对象判断是否调用路由埋点方法，具体包括如下步骤：
4.根据权利要求2所述的一种基于Vue的前端埋点方法，其特征在于，所述当路由模式为hash时，通过监听浏览器的hashchange事件来实现对页面路由跳转的监听，并根据访问地址映射对象判断是否调用路由埋点方法，具体包括如下步骤：
5.根据权利要求1所述的一种基于Vue的前端埋点方法，其特征在于，实现事件
6.根据权利要求1所述的一种基于Vue的前端埋点方法，其特征在于，在事件埋点中，所述自定义属性tb-clicklog绑定的埋点数据还包括pending属性，用于控制事件埋点方法的执行时机，所述pending属性的值的变化通过修改与dom元素相关联的自定义属性tb-clicklog来实现；
7.根据权利要求1所述的一种基于Vue的前端埋点方法，其特征在于，所述模块曝光埋点的实现，具体包括如下步骤：
8.一种基于Vue的前端埋点装置，其特征在于，包括：
9.根据权利要求8所述的一种基于Vue的前端埋点装置，其特征在于，所述事件埋点单元中，所述自定义属性tb-clicklog绑定的埋点数据还包括pending属性，用于控制事件埋点方法的执行时机，所述pending属性的值的变化通过修改与dom元素相关联的自定义属性tb-clicklog来实现；
10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有指令，当所述指令在计算机上运行时，执行如权利要求1～7任意一项所述的基于Vue的前端埋点方法。
...【技术特征摘要】
1.一种基于vue的前端埋点方法，包括：
2.根据权利要求1所述的一种基于vue的前端埋点方法，其特征在于，包括：需要被埋点的访问地址映射对象是一个用于匹配当前浏览器地址栏访问地址的javascript对象，访问地址映射对象以访问路径作为key值、以埋点编码作为value，其中访问路径是指需要被埋点的浏览器里的访问地址，埋点编码是一个具有唯一性的字符串，用于标识特定的埋点；
3.根据权利要求2所述的一种基于vue的前端埋点方法，其特征在于，所述当路由模式为history时，通过重写history对象的pushstate和replacestate方法来监听页面路由跳转，并根据访问地址映射对象判断是否调用路由埋点方法，具体包括如下步骤：
4.根据权利要求2所述的一种基于vue的前端埋点方法，其特征在于，所述当路由模式为hash时，通过监听浏览器的hashchange事件来实现对页面路由跳转的监听，并根据访问地址映射对象判断是否调用路由埋点方法，具体包括如下步骤：
5.根据权利要求1所述的一种基于vue的前端埋点方法，其特征在于，实现事件埋点的过程中，通过window.document.addeven...
【专利技术属性】
技术研发人员：郭大勇，曹斌，
申请(专利权)人：上海通办信息服务有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。