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 相关文章推荐
lib.utf.js
Aug 21 Javascript
addEventListener和attachEvent二者绑定的执行函数中的this不相同
Dec 09 Javascript
iframe子父页面调用js函数示例
Nov 07 Javascript
js call方法详细介绍(js 的继承)
Nov 18 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
Jun 19 Javascript
写给小白的JavaScript引擎指南
Dec 04 Javascript
react native与webview通信的示例代码
Sep 25 Javascript
在Vue组件中使用 TypeScript的方法
Feb 28 Javascript
Vue.js实现数据响应的方法
Aug 13 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
Apr 22 Javascript
Node.js系列之连接DB的方法(3)
Aug 30 Javascript
Node在Controller层进行数据校验的过程详解
Aug 28 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 特殊字符处理函数
2008/09/05 PHP
基于php设计模式中工厂模式详细介绍
2013/05/15 PHP
使用PHP求两个文件的相对路径
2013/06/20 PHP
Yii中srbac权限扩展模块工作原理与用法分析
2016/07/14 PHP
3种方法轻松处理php开发中emoji表情的问题
2016/07/18 PHP
PHP框架laravel的.env文件配置教程
2017/06/07 PHP
thinkPHP5实现的查询数据库并返回json数据实例
2017/10/23 PHP
PHP上传文件及图片到七牛的方法
2018/07/25 PHP
php写入文件不覆盖的实例讲解
2019/09/17 PHP
“不能执行已释放的Script代码”错误的原因及解决办法
2007/09/09 Javascript
js跨域问题之跨域iframe自适应大小实现代码
2010/07/17 Javascript
JQuery UI DatePicker中z-index默认为1的解决办法
2010/09/28 Javascript
关于Javascript模块化和命名空间管理的问题说明
2010/12/06 Javascript
JQueryEasyUI Layout布局框架的使用
2013/04/08 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
2013/06/17 Javascript
Windows系统中安装nodejs图文教程
2015/02/28 NodeJs
JS使用cookie实现DIV提示框只显示一次的方法
2015/11/05 Javascript
纯js实现手风琴效果
2020/04/17 Javascript
JavaScript必知必会(九)function 说起 闭包问题
2016/06/08 Javascript
AngularJS中指令的四种基本形式实例分析
2016/11/22 Javascript
使用jquery实现的循环连续可停顿滚动实例
2016/11/23 Javascript
利用canvas实现的加载动画效果实例代码
2017/07/05 Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
2020/06/19 Javascript
使用命令行工具npm新创建一个vue项目的方法
2017/12/27 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
2018/09/01 Javascript
使用Javascript简单计算器
2018/11/17 Javascript
jquery实现轮播图特效
2020/04/12 jQuery
jQuery+ajax实现文件上传功能
2020/12/22 jQuery
如何用Python破解wifi密码过程详解
2019/07/12 Python
Java如何基于wsimport调用wcf接口
2020/06/17 Python
C++是不是类型安全的
2014/02/18 面试题
个人实习生的自我评价
2014/02/16 职场文书
党员承诺践诺书
2014/05/20 职场文书
数学教师个人工作总结
2015/02/06 职场文书
2016年公司新年寄语
2015/08/17 职场文书
七年级数学教学反思
2016/02/17 职场文书