vue项目前端埋点实施

埋点方案的确定。行业内的掩埋方案主要分为以下三类：

代码嵌入点：在需要嵌入点的节点调用接口，上传数据。比如百度统计；可视化嵌入点：利用可视化工具配置的嵌入点，即所谓的“无迹嵌入点”。加载页面时，前端可以读取配置数据，自动调用接口嵌入点。比如开源的Mixpanel无埋点：前端自动采集所有事件，上报埋点数据。如国内政策数据；当时时间紧，人力稀缺，显然不允许我们开发可视化嵌入方案，也没有嵌入方案，只好采用代码嵌入方案。

命令埋点

基于命令的嵌入，顾名思义，开发人员需要在需要嵌入的节点手动嵌入点。例如，当您在链接和页面准备就绪后单击按钮或回调函数时，发送请求。每个人都必须熟悉这个代码：

//发送隐藏请求$(文档)。就绪(函数(){//.这里有一些业务逻辑sendRequest(参数)；});//当按钮被点击时，发送一个隐藏请求$ ('button ')。单击(function () {//.有一些业务逻辑sendRequest(参数)；});很容易发现，这种方式很可能会将嵌入的代码入侵到业务代码中，使得整个业务代码繁琐易错，后续代码会变得更加膨胀，难以维护。因此，我们需要将嵌入的代码与具体的业务逻辑进行解耦，即声明式嵌入，从而提高嵌入的效率和代码的可维护性。

声明性埋藏点

理论上，声明式嵌入只需要注意两个问题：

需要掩埋的DOM节点；因此，要携带的数据可以很快得到一个声明性嵌入方法：

//key表示埋藏点的唯一标识；Act表示埋点按钮data-stat=' {key:' 111 '，act:' click'} '埋点/按钮的方式，然后可以遍历DOM树，找到[data-stat]的节点，将click事件绑定到这个按钮，通过回调函数中的请求将这些参数发送出去。

在DOM节点(html)上声明隐藏点与业务逻辑(通常在Javascript文件中)是分离的。打电话也很方便。

看起来很漂亮，但能解决问题吗？显然是不够的。需要解决以下问题：

遍历DOM树的时机，一个简单的例子，一个表的行数据是异步加载的，表行中的操作按钮需要被掩埋，所以在DOM准备好的时候进行遍历显然是一个无法找到的绑定掩埋事件次数的问题。如何保证埋藏事件不会重复绑定到元素，一次操作发送n个埋藏请求？如何处理特殊的掩埋行为，如显示掩埋点的页面和显示掩埋点的区域？解除绑定时如何销毁绑定事件？1.实现埋点数据统计的自定义指令

在项目中，通常需要进行数据嵌入。此时，使用自定义指令将变得非常简单

在项目输入文件main.js中配置我们的自定义指令

//指令vue.directive ('stat '，{bind (El，binding) {El。addeventlistener ('click '，()={ const data=binding.valuelet前缀=' storeif(OS . IsAnDroid | | OS . Isphone){ prefix=' mall '；} analytics . request({ ty: ` $ { prefix } _ $ { data . type } `，dc: data.desc || '' }，' n ')；}，false)；}});2.使用路由拦截统计页面级PV

由于在单页应用中首次尝试数据嵌入，项目上线一周后，数据统计后台发现首页PV远高于其他页面，数据异常。后来在数据后台与人沟通，询问他们埋葬点的统计原理后，发现了问题。

传统应用一般在页面加载的时候都有一个异步js加载，就像百度的统计代码一样，所以我们加载每个页面的时候都会统计数据；但是在单页应用中，页面加载初始化只有一次，其他页面的统计需要我们自己手工上报

解决办法

使用vue-router的beforeEach或afterEach钩子来报告数据，最好根据业务逻辑来选择。

Const Analytics Request=(to，from)={//只计算页面跳转数据，不计算当前页面不同查询的数据。//所以这里只使用路径。如果需要计数查询，可以使用to.fullPath if (to.path！==from . path){ analytics . request({ URL : ` $ { location . protocol }//$ { location . host } $ { to . path } `})；}};路由器。beforeeach ((to，from，next)={if (to)。matched . some(record=record . meta . require sauth)){//在这里做登录等前置逻辑判断。//判决通过后，上报数据.analyticsRequest(to，from)；} else {//如果不需要判断，直接上报数据analyticsRequest(to，from)；next()；}});在组件中使用我们的自定义说明

基于jquery小部件的旧项目，

那么这些项目中的DOM操作都是通过jquery甚至是原生的DOM API来实现的，Vue的自定义指令无法工作

基于突变服务器应用编程接口的混合

MutationObserver是DOM3标准中提出的标准API，它为开发人员提供了在某个DOM节点感知变化的能力。您可以监控以下情况：

子列表：目标节点属性的子节点的插入和删除引起的变化：目标节点属性的变化引起的变化characterData:目标节点的文本节点的变化引起的变化，例如子树：目标节点的后代节点如appendData()的变化引起的变化attributeOldValue:当属性监控设置为true时，可以记录变化前的属性值；当characterDataOldValue monitoring设置为true时，AttributeFilter可以在更改前记录属性值：可以设置需要监控的属性列表，但是为了保证MutationObserver可以在所有浏览器上正常工作，我们还是介绍一下这个API的polyfill，详细内容见这里。

在这个能力的前提下，我们可以触发Vue在任何DOM操作下重新解析指令。

我们把MutationObserver封装成一个Vue mixin，非Vue应用的业务代码只需要引入这个mixin，就可以很好的解耦。详细的实现原理可以在下面的伪代码中看到：

让观察者；导出默认{ready() {//打开侦听观察器=新突变观察器(突变={this。$ compile(这个。$ El)；});观察者观察(这个。$el，config)；}，销毁(){//clean observer . disconnect()；observer . takerecords()；}}以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。