Vue + Matomo 实现访问流量统计

matomo是一款很好用的统计访问量的系统，包括浏览量，访问地址，代码监控，页面操作等都有统计。目前国内很少有公司用到matomo，我也是偶然机会接触到它了，在此记录一下

Matomo环境配置

Matomo官网

Matomo/Piwik中文网地址内有vue-matomo简单介绍以及demo.

Matomo官网搭建所需环境要求
Nginx搭建
Php搭建
Mysql搭建
全部搭建完成并启动成功后，然后下载matomo安装包
https://matomo.org/download/
将matomo.zip解压到/www/web（没有的可以手动创建
将/www/web 授权apache

chown -R apache:apache /www/web/
访问服务器ip，会出现一下画面
https://matomo.org/docs/installation/#the-welcome-screen
根据步骤一步一步填写完毕
启动前端代码，找到/src/matomo.js,修改host配置，改为服务器ip地址
运行项目npm run serve
打开刚才的Matomo网址，你就可以看到项目的实时监测了

Vue使用Matomo

首先引入vue-matomo

npm i vue-matomo

在 main.js中配置

import VueMatomo from 'vue-matomo'
Vue.use(VueMatomo, {host: `matomo地址`,siteId: 1, // siteId值// 根据router自动注册,需要注意的是如果有路由传值值太长的话会matomo会监听不到并报414，就不能使用此方法了router: router,// 是否需要在发送追踪信息之前请求许可// 默认falserequireConsent: false,enableLinkTracking: true,// 是否追踪初始页面// 默认truetrackInitialView: false,// 最终的追踪js文件名，因为我这边的matomo版本比较老，所以使用的是piwik，现在版本新的话此值应该为matomotrackerFileName: 'piwik',debug: true,userId:'当前用户登录Id,可根据需求来设置，非必传，也可以在用户登录成功之后设置'
})

需要监听点击事件的话，在点击事件方法内添加matomo方法为：

//使用事件类别（视频，音乐，游戏...），事件动作（播放，暂停，时长，添加播放列表，下载，单击...）以及可选的事件名称和可选的数值来记录事件。
this.$matomo.trackEvent(category, action, [name], [value])

查看更多参数

Ok，以上就完成了前端埋点。

nginx配置Matomo + Vue项目（Linux服务器）

（vue项目）在serve里新建location，如下

访问项目的话，就是服务器地址 + /pf ,就可以了
（Matomo项目）找到下图

内容改为

root    /www/web/matomo; // 根据服务器Matomo的路径自行修改index   index.html index.php;
location ~ \.php$  {fastcgi_pass   127.0.0.1:9000;fastcgi_index  index.php;fastcgi_split_path_info ^(.+\.php)(/.+)$;fastcgi_param PATH_INFO $fastcgi_path_info;fastcgi_param  SCRIPT_FILENAME /www/web/matomo$fastcgi_script_name;fastcgi_param PATH_TRANSLATED $document_root$fastcgi_path_info;include        fastcgi_params;}

重启Nginx

Vue + Matomo 实现访问流量统计相关推荐

基于java的流量数据检测_java网站流量统计管理系统
每天记录学习,每天会有好心情.*^_^* 今天将为大家分析一个基于web的java网站流量统计管理系统,基于Web的网站访问流量统计系统在功能上强化了对用户行为的统计和分析,有利于网站管理者.开发者根 ...
java 网站统计工具_基于B/S模式下的JAVA网站流量统计系统
今日思考,完成一个网站流量统计系统项目,需要实现哪些功能? 此类项目常见描述如下: 传统的网站只是在页面上使用计数器进行简单的访问者数量的统计.随着网站运营规模的扩大,依靠这种简单的数量统计并不能真正 ...
服务器网站访问日志分析,服务器日志分析与流量统计_直观快捷分析每个网站的日志...
本帖最后由软程科技于 2019-9-9 19:13 编辑应用名称:日志分析与流量统计价格:1元作者:软程科技版本: 2.1.9 提示(使用前必读): 1. 此插件未在超大(超过1G)的日志 ...
网站流量统计与网站访问分析
关于网站流量统计与网站访问分析的概念辨析 网站流量统计的基本含义: 网站流量统计,是指对网站访问的相关指标进行统计,常用的网站流量统计指标包括三类:(1)网站流量指标,如在一定统计周期那网站的 ...
Umami自建网站统计工具-免费开源的网站访问流量统计分析平台
几年前网站统计工具遍地都是,例如Google Analytics.百度统计.CNZZ.51啦.腾讯分析等都是免费开放给个人站长使用的,现在的情况是网站统计工具要么就是不再提供免费服务,要么就是对个人用 ...
php 开源流量统计,5款开源的PHP网站流量统计应用程序
下面是5款开源的PHP网站流量统计应用程序. piwik Piwik 是一套基于Php+MySQL技术构建的开源网站访问统计系统,前身是phpMyVisites.Piwik可以给你详细的统计信息,比如 ...
黄聪：PHP网站流量统计开源程序大全
phpMyVisites phpMyVisites是一个网站流量统计系统,它能够提供非常详细的统计报告和高级图形报表.phpMyVisites不是一个Apache log分析工具,它建有自己的log. ...
Flash网站流量统计的方法
在我印象中,一般的免费流量统计代码是不允许嵌套在Flash中使用的,而且也不允许在内置IFrame中嵌套使用,网上检索了一下,找到了Flash网站的流量统计办法,其实就是使用内置IFrame的办法,使 ...
python流量实时统计_Python实现获取nginx服务器ip及流量统计信息功能示例
本文实例讲述了Python实现获取nginx服务器ip及流量统计信息功能.分享给大家供大家参考,具体如下: #!/usr/bin/python #coding=utf8 log_file = &quo ...

Vue + Matomo 实现访问流量统计

Matomo环境配置

Vue使用Matomo

nginx配置Matomo + Vue项目（Linux服务器）

Vue + Matomo 实现访问流量统计相关推荐

最新文章

热门文章