蝙蝠岛资源网 Design By www.hbtsch.com
前言
之前做到了一个页面及接口访问流量统计的需求, 然后在网上找了很多帖子,发现有些有的但是写的都不是很详细,所以今天就整理了一下
正文
第一步
首先自然是引入matomo
npm i vue-matomo
第二步
在main.js中注册一下matomo
import VueMatomo from 'vue-matomo' Vue.use(VueMatomo, { host: 'http://matomo.na.xyz', // 这里配置你自己的piwik服务器地址和网站ID siteId: 3,//siteId值 // 根据router自动注册 router: router, // // 是否需要在发送追踪信息之前请求许可 // // 默认false requireConsent: false, enableLinkTracking: true, // // 是否追踪初始页面 // // 默认true trackInitialView: false, // // 最终的追踪js文件名 // // 默认 'piwik' trackerFileName: 'matomo', debug: false });
当然这里也可以提出一个公共的文件来动态维护你的piwik服务器地址和网站
import VueMatomo from 'vue-matomo' // 动态维护的文件 import baseUrlto from './utils/baseUrlto' // 这段代码作用是获取当前加载的路径,并去维护文件中数组里匹配出相应的的集合对象. let uitem baseUrlto.map(e => { if (document.URL.indexOf(e.environmentUrl) !== -1) { uitem = e } }) if (!uitem) { uitem = baseUrlto[0] } Vue.use(VueMatomo, { host: uitem.staUrl, // 这里是匹配到的地址 siteId: uitem.staId, //这里是匹配到的siteId值 // 根据router自动注册 router: router, // // 是否需要在发送追踪信息之前请求许可 // // 默认false requireConsent: false, enableLinkTracking: true, // // 是否追踪初始页面 // // 默认true trackInitialView: false, // // 最终的追踪js文件名 // // 默认 'piwik' trackerFileName: 'matomo', debug: false });
附上baseUrlto的代码
const statistics = [ // 数组第一项,即为,当路径匹配不到时,默认传送的统计网址,可以是开发环境下测试统计的地址 { staUrl: '//analytics.baowei-inc.com/', // 统计网址 staId: '2', // 统计ID environmentUrl: '默认' }, { staUrl: '//analytics.baowei-inc.com/', // 开发环境统计网址 staId: '2', // 统计ID environmentUrl: 'http://bwcaigou.baowei-inc.com' }, { staUrl: '//analytics.baowei-inc.com/', // 生产环境统计网址 staId: '1', // 统计ID environmentUrl: 'http://portal.baowei-inc.com' }, { staUrl: '//106.12.95.245:8888/', // 本地环境统计网址 staId: '2', // 统计ID environmentUrl: 'http://localhost:' } ] export default statistics
第三步 ,是在app.vue中监听路由变化
watch: { '$route' () { let locationHash = window.location.hash; //把路由存在缓存中,此处你可以console.log看出路由变化 sessionStorage.setItem("hashLocation",locationHash); } },
第四步, 然后在每一个被跳转时都需要统计的组件中,添加上一段追踪信息的代码,每一个页面组件, 对于反复使用的子组件不需要添加,弹窗等也不需要,针对的是页面级得组件,
// 这里说明一下, this.$matomo是注册过后,自动会有得, 不需要进行其他得操作. created(){ const hashLocation= sessionStorage.getItem("hashLocation");//缓存中获取当前页面的路由名称 const newLocation = hashLocation.split("#/")[1]; // 注意, 这里使用全路径匹配,在hash模式中,因为地址会携带#,所以页面报告中的url需要重新覆盖一下, 将#去除 this.$matomo.setCustomUrl("http:baidu.com"+"/"+newLocation);//覆盖页面报告的url,可以自定义页面url,加上本页面路由 // this.$matomo.trackEvent(shopCode,hashLocation);//事件 this.$matomo.trackPageView(hashLocation);//页面名称,可以自定义页面名称 }
图片现在上传不了,稍后回去上传上来,
特地说明一下, setCustomUrl的作用是重新设定url,因为在matomo的页面网址统计那块中,它是通过url去统计的, 如果不做处理的话, 会自动统计域名后一级目录为相同页面, 也就是说, /#/会被读取为一个页面网址,不处理的话,那么无论访问哪个页面,都会被统计为/index页面.
// 注意, 这里使用全路径匹配,在hash模式中,因为地址会携带#,所以页面报告中的url需要重新覆盖一下, 将#去除 this.$matomo.setCustomUrl("http:baidu.com"+"/"+newLocation);// 非全路径 this.$matomo.setCustomUrl("http://www.baidu.com"+"/"+newLocation); // 全路径 //覆盖页面报告的url,可以自定义页面url,加上本页面路由
重要的事说两遍, 需要全路径字符串, 否则依然会把#带上.
第五步, 其实到这里, 已经能正常统计数据了,下面是一些优化的步骤.
针对接口的统计
针对接口的统计就是在请求拦截器中添加发送统计信息的代码
import pathToname from '@/utils/pathname' // 请求拦截器 service.interceptors.request.use( config => { if (config.url.indexOf('/login') === -1) { // 设置用户名 const name = store.getters.name let urlName let curl = config.url curl = curl.split('"htmlcode">const changeName = { // goods相关API '/pdc/api/v1/dic/query': '基础档案管理-获取货品信息', '/pdc/api/v1/product/query': '基础档案管理-获取货品详情', // role相关API '/api/root/list': '基础-获取菜单权限', '/api/createRole': '权限管理-创建角色', '/api/checkRoleName': '权限管理-查询角色是否存在', '/api/custom/master/permission': '权限管理-获取外部客户角色列表', '/api/internal/user/info': '基础-获取用户信息', // statement相关API '/statement/financialForm': '财务管理-获取JIT财务列表', '/statement/export': '财务管理-导出JIT财务报表', '/statement/count': '财务管理-获取JIT数据总条目', // trade相关API(待定) // user相关API '/api/internal/user/list': '权限管理-获取外部用户列表', '/api/internal/custom/list': '权限管理-获取外部客户列表', '/user/create': '权限管理-创建用户', '/user/update': '权限管理-修改用户信息', '/api/user/password': '权限管理-修改用户密码', // 订单列表相关API '/order/api/v1/orderConfirmation': 'B2B交易管理-提交订单', '/order/api/v1/serviceApprove': 'B2B交易管理-确认订单', '/order/api/v1/serviceRefuse': 'B2B交易管理-拒绝订单', '/order/api/v1/getDispatchSelectInfo': 'B2B交易管理-获取订单字典数据', '/order/api/v1/import/productList': 'B2B交易管理-导入订单数据', '/order/api/v1/*/orderInformation': 'B2B交易管理-获取订单基本信息', '/order/api/v1/*/customerCode': 'B2B交易管理-检查客户代码是否存在', '/order/api/v1/*/discount': 'B2B交易管理-导入订单折扣', '/order/api/v1/*/occupyInventory': 'B2B交易管理-导出占库结果', '/order/api/v1/createDispatch': 'B2B交易管理-提交发货单', '/order/api/vi/dispatchCancel': 'B2B交易管理-取消发货单', '/order/api/vi/*/orderCancel': 'B2B交易管理-取消订单', '/order/api/v1/dispatchApprove': 'B2B交易管理-同意发货单', '/order/api/v1/dispatchRefuse': 'B2B交易管理-拒绝发货单', '/order//api/v1/confirmSubmissionApproval': 'B2B交易管理-订单提交审批', '/order/api/v1/orderStatus': 'B2B交易管理-获取订单状态', '/bff/api/v1/dispatch/*': 'ODS管理-获取发货单基本信息', '/bff/api/v1/receive/*': 'ODS管理-获取收货单基本信息', '/bff/api/v1/vend-cust': 'ODS管理-获取客商列表信息', '/bff/api/v1/warehouses': 'ODS管理-实时获取仓库信息', '/bff/api/v1/dict/type': 'ODS管理-仓库类型查询', '/bff/api/v1/dispatch/_export': 'ODS管理-导出发货单信息', '/bff/api/v1/receive/_export': 'ODS管理-导出收货单信息', '/bff/api/v1/dict/type/_list': 'ODS管理-查询字典数据', '/bff/api/v1/dispatch/_page': 'ODS管理-查询发货单列表', '/order/api/v1/orderList': 'B2B交易管理-查询订单列表', '/order/api/v1/orderDetail': 'B2B交易管理-获取订单商品列表', '/order/api/v1/orderDispatchInfo': 'B2B交易管理-获取订单发货单信息', '/order/api/v1/dispatchList': 'B2B交易管理-获取订单发货单列表', '/order/api/v1/confirm': 'B2B交易管理-修改占库结果', '/order/api/v1/toBeConfirmedDispatch': 'B2B交易管理-查看历史发货单信息', '/order/api/v1/cumulativeState': 'B2B交易管理-获取占库结果信息' } export default changeName其他的就不赘述了,中文转化方面, 各人有各人的理解, 能达到效果就行.
js方式的统计也是类似的.有需要的话,评论留言,我后续传上来.
结语
Vue-matomo流量统计这块,就算整理完成了, 实际项目中已经正常使用,所以正常来讲应该不会出现问题. 加油, 各位
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
蝙蝠岛资源网 Design By www.hbtsch.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com
暂无Vue中使用matomo进行访问流量统计的实现的评论...
更新日志
2024年12月25日
2024年12月25日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]