【技术实现步骤摘要】
本专利技术涉及计算机领域，尤其涉及一种自动埋点方法。
技术介绍
1、目前一般采用人工手动在页面代码中的点击事件中进行埋点的方案解决页面点击埋点的问题。为了保证埋点区域的准确性和全面性，需要在页面上线前，由pm(产品经理)尽可能准确全面的提出页面内需要埋点的点击事件有哪些，并和前端rd(研发人员)沟通；前端rd根据pm需求，在页面中的相应位置进行标识，实现手动声明式埋点，或在页面内签入javascript实现命令式埋点。
2、现有技术中，需要前端rd手工在页面代码中进行定义，当项目越来越复杂，前端rd越来越多，key(埋点标识)极有可能会有重复的情况，导致数据出错，埋点key的定义依赖于人工行为，无法保证埋点的准确性、唯一性。
技术实现思路
1、为此本专利技术提供了一种自动埋点方法，能够很好的解决上述问题。通过本专利技术，能够对可交互元素进行有效识别，解决了前端埋点key需要人工手动定义带来的一系列数据质量问题，解决了人工手动定义埋点key带来的研发生产效率过低的问题。
2、为实现本专利技术之目的，采用以下技术方案予以实现：
3、一种自动埋点方法，包括：步骤1、重写api；步骤2、获取vue可交互元素；步骤3、点击自动埋点；步骤4、唯一key生成；
4、所述方法针对的页面是由dom树渲染而成，包括头部区域和主体区域，所述主体区域是可视区域；vue将页面区域抽象为组件树。
5、所述的自动埋点方法，其中步骤包括：
6
7、2)将addeventlistener重写为记录当前页面的元素以及原操作，保证不会影响原有功能；
8、3)将记录下来的元素在内存中存储。
9、所述的自动埋点方法，其中步骤2包括：
10、1)渲染vue组件树；
11、2)触发浏览器侦听事件函数api addeventlistener，对页面事件进行侦听；
12、3)识别出vue渲染过程中的可交互元素并进行存储。
13、所述的自动埋点方法，其中步骤3包括：
14、1)在可视元素的根元素上使用事件委托的方式绑定事件；
15、2)当用户在前端页面上进行操作时，触发上一步所绑定的事件监听器；
16、3)触发事件后，首先判断当前元素是否为vue可交互元素；
17、4)若为可交互元素，则进行打点；
18、5)若非可交互元素，则判断当前元素是否为可交互元素的子元素；
19、6)若为可交互元素的子元素，则进行打点；
20、7)否则，将此次用户操作作为非必要打点操作，不进行打点。
21、所述的自动埋点方法，其中：
22、1)对于打点的可交互元素，读取其元素属性，判断是否为vue组件的根元素；
23、2)若为vue组件根元素，则通过vue属性沿vue组件树向上寻找直至寻至vue组件树根节点，同时记录寻址路径，根据路径生成唯一key。
24、所述的自动埋点方法，其中：
25、3)若非vue组件根元素，则通过dom属性沿dom树向上寻找直至寻至当前元素所在vue组件根节点，同时记录当前元素的标记名以及类，使用两者生成基于当前元素所在vue组件根节点的selector，之后重复第2)步动作，通过vue属性沿vue组件树向上寻找直至寻至vue组件树根节点，同时记录寻址路径；将selector与第2)步的寻址路径组合为唯一key。
26、一种计算机可读存储器，其中，存储有处理器可执行指令，当所述指令被处理器执行时，使处理器执行上述方法。
本文档来自技高网...【技术保护点】
1.一种自动埋点方法，其特征在于所述方法包括：步骤1、重写API；步骤2、获取VUE可交互元素；步骤3、点击自动埋点；步骤4、唯一KEY生成；
2.根据权利要求1所述的自动埋点方法，其特征在于步骤包括：
3.根据权利要求1所述的自动埋点方法，其特征在于步骤2包括：
4.根据权利要求1所述的自动埋点方法，其特征在于步骤3包括：
5.根据权利要求1所述的自动埋点方法，其特征在于步骤4包括：
6.一种计算机可读存储器，其特征在于，存储有处理器可执行指令，当所述指令被处理器执行时，使处理器执行根据权利要求1至5中任一项所述的方法。
【技术特征摘要】
1.一种自动埋点方法，其特征在于所述方法包括：步骤1、重写api；步骤2、获取vue可交互元素；步骤3、点击自动埋点；步骤4、唯一key生成；
2.根据权利要求1所述的自动埋点方法，其特征在于步骤包括：
3.根据权利要求1所述的自动埋点方法，其特征在于步骤2包括：
【专利技术属性】
技术研发人员：魏丞，陈峥，王洁，
申请(专利权)人：度小满科技北京有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。