当前位置:   article > 正文

Vue + Matomo 实现访问流量统计_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
  1. 重启Nginx
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/456200
推荐阅读
相关标签
  

闽ICP备14008679号