Vue matomo be used to achieve traffic statistics

Vue matomo be used in traffic statistics

Description link

Foreword

Before the need to do a page and interface traffic statistics, and the Internet to find a lot of posts, but found some written and some are not very detailed, so today tidied

text

• The first step  First, naturally, is to introduce matomo

npm i vue-matomo
复制代码

• The second step in registering what matomo in main.js

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 }); 复制代码

Of course, this can also make a public document to dynamically maintain your server address and website 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 }); 复制代码

Attach baseUrlto code

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 复制代码

• The third step is to monitor the routing changes in app.vue

watch: {
      '$route' () {
        let locationHash = window.location.hash;
        //把路由存在缓存中，此处你可以console.log看出路由变化
        sessionStorage.setItem("hashLocation",locationHash);
      }
    },
复制代码

• The fourth step, and then jump when each component requires statistics, add tracking code information of the previous paragraph, each page components, sub-assemblies for repeated use without adding, pop, etc. do not need, for is a page-level components,

// 这里说明一下, 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);//页面名称,可以自定义页面名称 } 复制代码

 

 

Specifically explain the role setCustomUrl is reset url, because the statistics page URL of the piece matomo, it is the url to go through the statistics, if not treated, it will automatically count a directory of the same page after the domain name, in other words, / # / pages will be read as a URL, does not deal with the case, then no matter what page views, it will be counted as / index page.

After a directory would be counted as a subdirectory

 

 

// 注意, 这里使用全路径匹配,在hash模式中,因为地址会携带#,所以页面报告中的url需要重新覆盖一下, 将#去除
      this.$matomo.setCustomUrl("http：baidu.com"+"/"+newLocation);// 非全路径 this.$matomo.setCustomUrl("http://www.baidu.com"+"/"+newLocation); // 全路径 //覆盖页面报告的url，可以自定义页面url，加上本页面路由 复制代码

Something important to say it twice, require full path string, otherwise it will still take #.

• The fifth step, in fact, here, has been able to normal statistics, here are some steps optimization.

  Statistics for the interface

  Statistics for the interface is add the code to send statistical information in the request interceptor

  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']) } 复制代码

 

 

Of course, here is the way I js principle is the same, the above code, the name of the statistics that I address to do a matching culture. Because of the variety of interfaces, need to do a deal with, say, the path of mass participation in fact, only the parameters changed, the address has not changed, this time can not be considered a new address, so we need to match the deal. I did not write the code is too complicated, step by step forward is basically very easy to understand.

Attach pathname code for a matching address to Chinese statistics:

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 复制代码

Other not go into details, Chinese conversions, everyone has his own understanding, to achieve the desired effect on the line.

Js statistical approach is similar. There are necessary, Comments, after my resume up.

Epilogue

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