Vueではmatomoを使ってアクセス流量統計を実施しています。

9585 ワード
Vue matoo 流量統計
前言
前に、ページとインタフェースのアクセス統計の需要を達成しました。そして、ネットで多くの招待状を探しましたが、書いたのは全部詳しくないので、今日は整理しました。
本文
第一歩
まず自然にマメを導入します。

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
});
もちろんここでは、ピwikサーバーのアドレスとウェブサイトを動的に維持するための公共文書を提出することもできます。

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
第三のステップは、ap.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);//    ,         
 }
画像は今アップロードできません。後でアップロードします。
特に説明します。set CutstomUrlの役割はurlを再設定することです。matooのページアドレス統計の中で、urlで統計しています。処理しないと、自動的にドメイン名の次のリストが同じページになります。

//   ,          , hash   ,       #,        url        ,  #  
  this.$matomo.setCustomUrl("http：baidu.com"+"/"+newLocation);//     
  this.$matomo.setCustomUrl("http://www.baidu.com"+"/"+newLocation); //    
  //       url，       url，
重要なことを二回言っても、全パス文字列が必要です。そうでないと、相変わらず持って行きます。
第5歩、実はここに来て、すでに正常にデータを統計することができました。
インタフェースに対する統計
インターフェースに対する統計とは、要求ブロックに統計情報を送信するコードを追加することです。

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-matoo流量はこれを統計して、整理が終わっても、実際のプロジェクトでは正常に使用されていますので、正常には問題がないはずです。頑張ってください。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。
Struts 2はognl表現により投影を実現する。
Mybatis一括修正の操作コード