Vue + Matomo 实现访问流量统计_matomo前端埋点

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

Matomo环境配置

Matomo官网

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

1. Matomo官网搭建所需环境要求

2. Nginx搭建

3. Php搭建

4. Mysql搭建

5. 全部搭建完成并启动成功后，然后下载matomo安装包
   https://matomo.org/download/

6. 将matomo.zip解压到/www/web（没有的可以手动创建

7. 将/www/web 授权apache

   chown -R apache:apache /www/web/

8. 访问服务器ip，会出现一下画面
   https://matomo.org/docs/installation/#the-welcome-screen
   根据步骤一步一步填写完毕

9. 启动前端代码，找到/src/matomo.js,修改host配置，改为服务器ip地址
   

10. 运行项目npm run serve

11. 打开刚才的Matomo网址，你就可以看到项目的实时监测了

Vue使用Matomo

首先引入vue-matomo

npm i vue-matomo
1

在 main.js中配置

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

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

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

查看更多参数

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

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

1. （vue项目）在serve里新建location，如下
   
   访问项目的话，就是服务器地址 + /pf ,就可以了
2. （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;
      }

1
2
3
4
5
6
7
8
9
10
11
12

3. 重启Nginx