项目github仓库：https://github.com/darkXmo/bury项目npm仓库：@xmon/bury项目gitee仓库：Xmo/bury如果你的项目埋点会很严重影响业务代码，就要考虑使用@xmon/bury除了必要的添加eventId，也就是给项目添加一个ID，@xmon/bury不会影响你的业务代码，只需要添加一个配置足够的！对页面行为进行埋点，通过事件监控进行行为监控。目前监听事件包括点击事件（Click）、页面加载（Load&Unload）、具体行为（Action）、axios请求（Api）、路由跳转（Router）安装#yarnyarnadd@xmon/bury#npmnpminstall@xmon/bury#pnpmpnpminstall@xmon/buryExamples监听一般事件（打开监听点击、页面加载、特定行为）//main.jsimport{init}from"@xmon/bury";importconfigfrom"./config.js";常量埋=初始化（配置）；configuration需要在config中指定要监控的路由，以及路由对应事件（进入和退出）的eventId。同时需要指定埋点的基本参数，通常是环境、埋点版本和系统版本，这些参数是可选的。//config.jsimport{initUrlMap}from"@xmon/bury";//使用initUrlMap配置1要监控的页面路径2加载页面3离开页面事件IDinitUrlMap([{path:"/user/:id",leave:"eventIdLeavePage",//保留EventIdenter:"eventIdEnterPage",//EnterEventId},]);//这里填写内嵌事件返回值的额外字段，一般需要添加如下配置信息constconfig={environment:process.env.NODE_ENV,dataPointVersion:"v0.0.1",version:"1.0.0",};导出默认配置；monitorRouter如果你使用的是Vue单页面应用，还需要监听Vue-Router的跳转，所以你还需要传入路由器实例作为第二个参数importrouterfrom"@/router";//注册埋葬constbury=init(config,router)的路由器实例；监听Api如果需要监听AxiosApi，需要封装axios实例。从“axios”导入axios；从“@xmon/bury”导入{trackApi}；constaxiosInstance=axios.create({...});//提醒@xmon/bury监听axiosexampletrackApi(axiosInstance)发出的请求；配置和页面监控类似，同样需要指定你要监控的api路径和对应的eventId。import{initUrlMap,initApiMap}from"@xmon/bury";initUrlMap([...]);//使用initApiMap配置urlinitApiMap([{url:"/v3/search/anime",eventId:"eventIdApi",},]);常量配置={...};导出默认配置；值得注意的是，无论是监控页面加载还是监控api，查询参数都会被忽略。监听点击事件对于需要监听点击事件的元素，添加data-bupoint属性，注入eventId。监听具体的行为import{track}from"@xmon/bury";//对于具体的行为，需要将行为包装成一个函数，配置eventId，然后使用track来监听这个函数的行为constincrease=track(()=>{console.log("我被跟踪了");},"eventId");//track的返回值就是你传入的函数，原封不动。//increase=()=>{console.log('Iamtracked')}对于行为，应该使用track进行封装，第一个参数是要封装的函数，第二个参数是eventId。track将在包装后返回包装后的函数。隐藏的动作发生在执行特定动作之前。触发埋点事件回调触发监听行为也会触发埋点行为，通过onBury我们可以得到埋点行为的回调。初始化（init）后才能访问instance、track、trackApi、onBury等方法，否则会抛出未定义错误事件//一旦你配置的url被加载或关闭OR你监听的api请求被发送OR你监听的事件被调用OR你观察到的Dom被点击=>onBury中注册的回调函数将被触发((value)=>{//下面的BuryConfig会解释payload中包含哪些值constburyInfo=value.payload;//以下是我埋点回调的示例行为，你应该将示例替换成你的行为constqueries=Object.entries(buryInfo).map(([key,value])=>{returnkey+"="+encodeURI(value);}).join("&");让img=newImage(1,1);//请将url更改为您的后端掩埋系统的APIimg.src=`http://exmapleApi.com/bury?`+queries;//3000ms超时过程ingsetTimeout(()=>{如果(img&&(!img.complete||!img.naturalWidth)){img.src="";}},3000);});每当监听到的事件发生时，都会注册到onBury事件回调中。在此示例中，它将获取回调参数中的有效负载，将其包装并发出对img的Get请求。由于onBeforeUnload方法是在页面即将关闭时执行的，此时不能使用axios发起异步请求。但是img和XMLHttpRequest同步请求还是可以执行的。APIinitexportconstinit=(config:BuryConfig,router?:VueRouter)=>Bury;//预配置中的一些配置没有默认值，可以通过config手动添加预设//标记为!!!的参数在预定义的有效载荷中。//也可以自定义参数exportinterfaceBuryConfig{eventId?:string;//必填，事件IDtimestamp?:string;//!!!ua?:字符串；//!!!浏览器？：“MSIE”|“火狐”|“野生动物园”|“铬”|“歌剧”;//!!!推荐人？：字符串；//!!!宽度？：字符串；//!!!高度？：字符串；//!!！ip？：字符串；//!!!城市名称？：字符串；//!!!isPhone?:"电话"|“个人电脑”;//!!!用户ID？：字符串；apiUrl？：字符串；pageUrl?:字符串;pageStayTime?:字符串;项目？：字符串；环境？：字符串；数据点版本？：字符串；细绳;额外信息？：字符串；[K:string]:string;}BuryConfig通过“@fingerprintjs/fingerprintjs”模块和“http://pv.sohu.com/cityjson?ie=utf-8”Api接口获取的一些预设值，它们是时间戳-时间戳-newDate().getTime()ua-客户端信息(navigator.userAgent)，请查看https://developer.mozilla.org...browser-浏览详情Referrertypereferrer-参考来源-http://www.ruanyifeng.com/blo...width-窗口宽度h8-窗口高度ip-客户端ip地址cityName-客户端省市名称-如“江苏省南京市”isPhone-是否为移动终端，如果是则值为phoneuserId-客户端设备的唯一标识,详情请参考https://github.com/fingerprin...一个常见的解决方案是传入project,version,dataPointVersion,environmentconstbury=init(config,router);config预定义参数router可选参数，如果要监听VueRouter跳转如果Bury.spy开启了监听模式（生产模式请不要开启），可以查看bury.spy()的返回值；initUrlMap在控制台的devtools数组中初始化监控的url的页面路径及其eventId。所有的eventId都会被包含在回调函数参数接口的payload中UrlMap:{path:string;//页面url地址，同VueRouter中path的定义enter?:string;//输入本页的EventId离开？：细绳;//离开页面的EventId}[]url页面的url地址，定义如下https://github.com/pillarjs/p...，通常可以根据VueRouter中的path参数填写。enter进入埋点页面的eventIdleave留下埋点页面的eventId关于路径https://github.com/pillarjs/p...initApiMapinterfaceApiMap:{url:string;//接口方法的URL地址?:Method;//方法，如`GET``POST`，如果没有定义，将监听url下的所有方法eventId:string;//EventId}[]=[]当接口被触发时；url接口方法的url地址，可以选择参数Method，比如GETPOST，如果不定义，将监听该url下的所有MethodeventId。buried接口的eventIdtrack会监听事件函数trackany>(fn:T,eventId:string):T;fn埋入方法eventId埋入方法的eventId为传入的埋入方法，返回埋入方法。trackApi监听axios的埋点functiontrackApi(axiosInstance:AxiosInstance):void;onBury埋点触发时的回调函数functiononBury(callback:(value:BuryCallBack)=>void):void;callbackcallbackfunctionBuryCallBackinterfaceBuryCallBack{类型：“行动”|“点击”|“离开”|“输入”|“阿皮”；有效负载：BuryConfig；额外的？有效负载.ActionPayload|有效负载.ApiPayload|有效载荷。点击有效载荷|有效载荷.LoadPayload|RoutePayload;}type类型为埋点事件，点击，离开页面，加载页面和接口payload加载，除了预定义的配置EnterpageUrl进入页面urlLeavePageStayTime停留在当前页面pageUrl离开页面urlApiapiUrl接口urlextra监听事件加载，请参考https://github.com/darkXmo/mo...帮助了解详情。如何使用Nuxt2项目中的插件在插件文件夹中创建文件bury.js或bury.ts;//bury.jsimport{init,initUrlMap}from'@xmon/bury';constbury=init({version:'projectVersion',dataPointVersion:'v1',project:'projectName'});initUrlMap([{路径:"/",输入:"EnterEventPoint",离开:"LeaveEventPoint"},...])bury.spy();bury.onBury((值)=>{//用值做一些事情})在nuxt.config.js或nuxt.config.ts添加插件配置{plugins:[...{src:"@/plugins/bury.ts",mode:'client'},...],}
