Vue中使用matomo进行访问流量统计的实现


Posted in Javascript onNovember 05, 2019

前言

之前做到了一个页面及接口访问流量统计的需求, 然后在网上找了很多帖子,发现有些有的但是写的都不是很详细,所以今天就整理了一下

正文

第一步

首先自然是引入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('?')[0] || curl
 // 将请求地址转为中文
 for (const k in pathToname) {
  if (curl === k) {
  urlName = pathToname[k]
  } else {
  const kurl = k
  const turl = curl
  const karr = kurl.split('/')
  if (karr[karr.length - 1] === '*') {
   // 代表最后一位为*
   karr.splice(karr.length - 1, 1)
   const karr1 = turl.split('/')
   karr1.splice(karr1.length - 1, 1)
   const str = karr.join('/')
   const str2 = karr1.join('/')
   if (str === str2) {
   urlName = pathToname[k]
   }
  } else {
   karr.splice(karr.length - 2, 1)
   const str = karr.join('/')
   const karr1 = turl.split('/')
   karr1.splice(karr1.length - 2, 1)
   const str2 = karr1.join('/')
   if (str === str2) {
   urlName = pathToname[k]
   }
  }
  }
 }
 // urlName = urlName || '其他'
 urlName = urlName || config.url
 window._paq.push(['setCustomUrl', `${document.URL.split('/#')[0]}${curl}123`])
 window._paq.push(['setDocumentTitle', urlName])
 window._paq.push(['setUserId', name])
 window._paq.push(['trackPageView'])
 }

图片依然等回去上传

当然,我这里用的是js的方式原理是一样的,上面的代码,是我对统计的地址名做了中文化的匹配.因为接口的多样性,需要做一个处理,比如说,路径传参中, 其实只是参数变了,地址没变, 这个时候不能算一个新的地址, 所以就需要匹配处理. 代码没写太复杂, 一步一步深入,基本上很容易懂.

附上pathname的代码. 用于将地址匹配为中文统计,:

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流量统计这块,就算整理完成了, 实际项目中已经正常使用,所以正常来讲应该不会出现问题. 加油, 各位

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
SyntaxHighlighter代码加色使用方法
Sep 07 Javascript
jQuery 在光标定位的地方插入文字的插件
May 10 Javascript
seajs1.3.0源码解析之module依赖有序加载
Nov 07 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
Apr 24 Javascript
JS下拉框内容左右移动效果的具体实现
Jul 10 Javascript
node.js中的events.emitter.once方法使用说明
Dec 10 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
Dec 07 Javascript
基于Angularjs实现分页功能
May 30 Javascript
利用js的闭包原理做对象封装及调用方法
Apr 07 Javascript
Node.js EventEmmitter事件监听器用法实例分析
Jan 07 Javascript
JavaScript常用工具函数大全
May 06 Javascript
vue+Element-ui实现分页效果
Nov 15 Javascript
node.js实现简单的压缩/解压缩功能示例
Nov 05 #Javascript
js实现随机点名程序
Sep 17 #Javascript
vue+vant-UI框架实现购物车的复选框全选和反选功能
Nov 05 #Javascript
Vue通过WebSocket建立长连接的实现代码
Nov 05 #Javascript
原生js实现随机点名功能
Nov 05 #Javascript
element-ui 文件上传修改文件名的方法示例
Nov 05 #Javascript
vue keep-alive 动态删除组件缓存的例子
Nov 04 #Javascript
You might like
php单例模式实现(对象只被创建一次)
2012/12/05 PHP
WEB高性能开发之疯狂的HTML压缩
2010/06/19 Javascript
淘宝搜索框效果实现分析
2011/03/05 Javascript
关于JavaScript的with 语句的使用方法
2011/05/09 Javascript
JavaScript中的object转换成number或string规则介绍
2014/12/31 Javascript
jQuery实现折线图的方法
2015/02/28 Javascript
js使用setTimeout实现定时炸弹的方法
2015/04/10 Javascript
JavaScript对数组进行随机重排的方法
2015/07/22 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
2016/10/09 Javascript
基于JavaScript定位当前的地理位置
2017/04/11 Javascript
基于JavaScript实现的插入排序算法分析
2017/04/14 Javascript
webpack使用 babel-loader 转换 ES6代码示例
2017/08/21 Javascript
JS实现简单的文字无缝上下滚动功能示例
2019/06/22 Javascript
vue组件中节流函数的失效的原因和解决方法
2020/12/02 Vue.js
[16:56]heroes英雄教学 司夜刺客
2014/09/18 DOTA
python中split方法用法分析
2015/04/17 Python
wxPython中listbox用法实例详解
2015/06/01 Python
Django中模版的子目录与include标签的使用方法
2015/07/16 Python
python实现感知器算法(批处理)
2019/01/18 Python
Python如何调用外部系统命令
2019/08/07 Python
Python中Flask-RESTful编写API接口(小白入门)
2019/12/11 Python
查看jupyter notebook每个单元格运行时间实例
2020/04/22 Python
解决pymysql cursor.fetchall() 获取不到数据的问题
2020/05/15 Python
浅谈Python里面None True False之间的区别
2020/07/09 Python
关于多种方式完美解决Python pip命令下载第三方库的问题
2020/12/21 Python
使用HTML5捕捉音频与视频信息概述及实例
2018/08/22 HTML / CSS
NBA欧洲商店(英国):NBA Europe Store UK
2018/07/27 全球购物
Guess美国官网:美国知名服装品牌
2019/04/08 全球购物
软件测试有哪些?什么是配置项?
2012/02/12 面试题
促销活动总结报告
2014/04/26 职场文书
祖国在我心中演讲稿600字
2014/05/04 职场文书
党性观念心得体会
2014/09/03 职场文书
2014年科研工作总结
2014/12/03 职场文书
2015年政务公开工作总结
2015/05/19 职场文书
python文件目录操作之os模块
2021/05/08 Python
centos7安装mysql5.7经验记录
2022/05/02 Servers