之前做到了一个页面及接口访问流量统计的需求, 然后在网上找了很多帖子,发现有些有的但是写的都不是很详细,所以今天就整理了一下,
今天修改一下, 之前的有点小问题,就是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',
siteId: 3,
trackerFileName: 'matomo',
router: router,
requireConsent: false,
enableLinkTracking: true,
trackInitialView: false,
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,
router: router,
requireConsent: false,
enableLinkTracking: true,
trackInitialView: false,
trackerFileName: 'matomo',
debug: false
复制代码
附上baseUrlto的代码
const statistics = [
staUrl: '//analytics.baowei-inc.com/',
staId: '2',
environmentUrl: '默认'
staUrl: '//analytics.baowei-inc.com/',
staId: '2',
environmentUrl: 'http://bwcaigou.baowei-inc.com'
staUrl: '//analytics.baowei-inc.com/',
staId: '1',
environmentUrl: 'http://portal.baowei-inc.com'
staUrl: '//106.12.95.245:8888/',
staId: '2',
environmentUrl: 'http://localhost:'
export default statistics
第三步 ,是在app.vue中监听路由变化
watch: {
'$route' () {
let locationHash = window.location.hash;
sessionStorage.setItem("hashLocation",locationHash);
第四步, 然后在每一个被跳转时都需要统计的组件中,添加上一段追踪信息的代码,每一个页面组件, 对于反复使用的子组件不需要添加,弹窗等也不需要,针对的是页面级的组件,// 纯js不需要此步骤
created(){
const hashLocation= sessionStorage.getItem("hashLocation");
const newLocation = hashLocation.split("#/")[1];
window._paq.push(['setCustomUrl',"http：baidu.com"+"/"+newLocation);
window._paq.push(['trackPageView'], hashLocation);
特地说明一下, setCustomUrl的作用是重新设定url,因为在matomo的页面网址统计那块中,它是通过url去统计的, 如果不做处理的话, 会自动统计域名后一级目录为相同页面, 也就是说, /#/会被读取为一个页面网址,不处理的话,那么无论访问哪个页面,都会被统计为/index页面.
一级之后的目录会作为子目录被统计
window._paq.push(['setCustomUrl',"http：baidu.com"+"/"+newLocation);
window._paq.push(['setCustomUrl', "http://www.baidu.com"+"/"+newLocation);
复制代码
重要的事说两遍, 需要全路径字符串, 否则依然会把#带上.
第五步, 其实到这里, 已经能正常统计数据了,下面是一些优化的步骤.
针对接口的统计
针对接口的统计就是在请求拦截器中添加发送统计信息的代码
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 = {
'/pdc/api/v1/dic/query': '基础档案管理-获取货品信息',
'/pdc/api/v1/product/query': '基础档案管理-获取货品详情',
'/api/root/list': '基础-获取菜单权限',
'/api/createRole': '权限管理-创建角色',
'/api/checkRoleName': '权限管理-查询角色是否存在',
'/api/custom/master/permission': '权限管理-获取外部客户角色列表',
'/api/internal/user/info': '基础-获取用户信息',
'/statement/financialForm': '财务管理-获取JIT财务列表',
'/statement/export': '财务管理-导出JIT财务报表',
'/statement/count': '财务管理-获取JIT数据总条目',
'/api/internal/user/list': '权限管理-获取外部用户列表',
'/api/internal/custom/list': '权限管理-获取外部客户列表',
'/user/create': '权限管理-创建用户',
'/user/update': '权限管理-修改用户信息',
'/api/user/password': '权限管理-修改用户密码',
'/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('/
_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流量统计这块,就算整理完成了, 实际项目中已经正常使用,所以正常来讲应该不会出现问题. 加油, 各位
- 826
-
腾讯云开发者
JavaScript
React.js
- 12.2w
-
前端工程师 @ 上海浪鸽文化传媒有限公司
