matomo 原名（piwik）主要用於統計用戶訪問記錄，其原理是在宿主系統（有統計需求的系統）應用上放置探針，即系統對接，在不影響宿主系統正常運營的條件下，統計各種主要的指標，以達到數據分析和再加工的目的。
Matomo/Piwik中文網地址 內有vue-matomo簡單介紹以及demo.
簡單介紹完畢，正文開始！！！
首先引入vue-matomo
npm i vue-matomo在 main.js中配置
import VueMatomo from 'vue-matomo' Vue.use(VueMatomo, { host: `你自己的matomo地址`, siteId: '這個值頁需要去matomo上去申請', // siteId值 // 根據router自動注冊,需要注意的是如果有路由傳值值太長的話會matomo會監聽不到並報414，就不能使用此方法了 router: router, // 是否需要在發送追蹤信息之前請求許可 // 默認false requireConsent: false, enableLinkTracking: true, // 是否追蹤初始頁面 // 默認true trackInitialView: false, // 最終的追蹤js文件名，因為我這邊的matomo版本比較老，所以使用的是piwik，現在版本新的話此值應該為matomo trackerFileName: 'piwik', debug: true, userId:'當前用戶登錄Id,可根據需求來設置，非必傳，也可以在用戶登錄成功之后設置' })
到此，就已經可以監聽到頁面訪問、加載時間、訪問次數、訪問時間、實時訪客等等數據。
頁面標題展示的就是在項目中router中設置的title.
需要注意的是如果有路由傳值值太長的話會matomo會監聽不到並報414，就不能根據router自動注冊了。
我的解決辦法是在app.vue中監聽router，然后設置
watch: { $route (to, from) { this.$matomo.setCustomUrl('設置頁面地址，可使用location.href，注意，如果使用的路由模式是hash模式，需要把url中的#號截取掉') this.$matomo.trackPageView(to.meta.title) //設置頁面名稱 }, },Ok，以上就完成了前端埋點。如果需要監聽點擊事件的話，在點擊事件方法內添加matomo方法為：
//使用事件類別（視頻，音樂，游戲...），事件動作（播放，暫停，時長，添加播放列表，下載，單擊...）以及可選的事件名稱和可選的數值來記錄事件。 this.$matomo.trackEvent(category, action, [name], [value])