Vue中使用matomo进行访问流量统计 - mouseleo

时间：2024-03-10 20:48:19

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

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

前言

之前做到了一个页面及接口访问流量统计的需求, 然后在网上找了很多帖子,发现有些有的但是写的都不是很详细,所以今天就整理了一下, 今天修改一下, 之前的有点小问题,就是this.$matomo会取不到. 所以列举两种方法.

正文

vue-matomo方式

  • 第一步 首先自然是引入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值
  // 注册名称 =>this.$matomo
  trackerFileName: \'matomo\',
  // 根据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);
      }
    },
复制代码
  • 第四步, 然后在每一个被跳转时都需要统计的组件中,添加上一段追踪信息的代码,每一个页面组件, 对于反复使用的子组件不需要添加,弹窗等也不需要,针对的是页面级的组件,// 纯js不需要此步骤
 created(){
      const hashLocation= sessionStorage.getItem("hashLocation");//缓存中获取当前页面的路由名称
      const newLocation = hashLocation.split("#/")[1];
      // 注意, 这里使用全路径匹配,在hash模式中,因为地址会携带#,所以页面报告中的url需要重新覆盖一下, 将#去除
       window._paq.push([\'setCustomUrl\',"http：baidu.com"+"/"+newLocation);//覆盖页面报告的url，可以自定义页面url，加上本页面路由
      window._paq.push([\'trackPageView\'], hashLocation);//页面名称,可以自定义页面名称
    }
复制代码

 

 

特地说明一下, setCustomUrl的作用是重新设定url,因为在matomo的页面网址统计那块中,它是通过url去统计的, 如果不做处理的话, 会自动统计域名后一级目录为相同页面, 也就是说, /#/会被读取为一个页面网址,不处理的话,那么无论访问哪个页面,都会被统计为/index页面.

一级之后的目录会作为子目录被统计

 

 

// 注意, 这里使用全路径匹配,在hash模式中,因为地址会携带#,所以页面报告中的url需要重新覆盖一下, 将#去除
      window._paq.push([\'setCustomUrl\',"http：baidu.com"+"/"+newLocation);// 非全路径
      window._paq.push([\'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
复制代码

纯JSmatomo统计, 效果和上面一样,比较简单,就一个步骤,在main.js注册,然后就可以在其他页面使用.

// 动态维护的文件
import baseUrlto from \'./utils/baseUrlto\'
let uitem
  baseUrlto.map(e => {
    if (document.URL.indexOf(e.environmentUrl) !== -1) {
      uitem = e
    }
  })
  if (!uitem) {
    uitem = baseUrlto[0]
  }
  var _paq = _paq || []
  window._paq = _paq
  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
  const arr = (document.URL.split(\'#\')[1]).split(\'/\')
  let CurlName
  if (arr.length >= 5) {
    arr.splice(arr.length - 1, 1)
    const str = arr.join(\'/\')
    CurlName = urlName[str]
  } else {
    const str = arr.join(\'/\')
    CurlName = urlName[str]
  }
  CurlName = CurlName || \'其他页面\'
  sessionStorage.setItem(\'urlName\', CurlName)
  // 页面刷新执行一次, 记录页面访问
  _paq.push([\'setCustomUrl\', `${document.URL.split(\'/#\')[0]}${document.URL.split(\'/#\')[1]}`])
  _paq.push([\'setDocumentTitle\', CurlName])
  _paq.push([\'trackPageView\'])
  _paq.push([\'enableLinkTracking\']);
  (function() {
    const u = uitem.staUrl
    _paq.push([\'setTrackerUrl\', u + \'matomo.php\'])
    _paq.push([\'setSiteId\', uitem.staId])
    var d = document
    var g = d.createElement(\'script\')
    var s = d.getElementsByTagName(\'script\')[0]
    g.type = \'text/javascript\'
    g.async = true
    g.defer = true
    g.src = u + \'matomo.js\'
    s.parentNode.insertBefore(g, s)
  })()
  
  
  
  // 其他页面
  window._paq.push([\'setDocumentTitle\', \'ODS管理-发货单列表页面\'])
      window._paq.push([\'trackPageView\'])
复制代码

js方式比较简单, 就一个步骤, 其他的转换地址, 汉化之类的和上述的方式是一样的, 如果学友们用第一种方式有什么问题,又没及时答复的话, 可以直接使用js的方式.

其他的就不赘述了,中文转化方面, 各人有各人的理解, 能达到效果就行.

js方式的统计也是类似的.有需要的话,评论留言,我后续传上来.

结语

Vue-matomo与js流量统计这块,就算整理完成了, 实际项目中已经正常使用,所以正常来讲应该不会出现问题. 加油, 各位

相关文章