Windows本地AngularJS项目安装Piwik(Matomo)步骤及资源求助

别慌！我一步步带你搞定，完全不用怕后端操作，跟着做就行～

第一步：先把必备环境装齐 #

针对Windows环境，咱们逐个来：

• Node.js + npm：去Node.js官网下载LTS版本（长期支持版，稳定性拉满），安装时一定要勾选「Add to PATH」选项，这样命令行就能直接调用node和npm。装完打开CMD，输入node -v和npm -v，能看到版本号就说明安装成功。
• MySQL：去MySQL官网下载社区版（MySQL Community Server），安装时选「Developer Default」模式一路下一步就行，记得设置root用户的密码（一定要记牢！后面要用到）。装完打开MySQL Workbench，用root账号登录能进去就没问题。
• Express生成器：打开CMD，输入npm install -g express-generator，这是用来快速生成Express项目结构的工具，省得自己写一堆基础代码。

第二步：搭建本地Express服务器 #

咱们要给AngularJS项目搭个后端载体，同时让Matomo能正常运行：

1. 找个空文件夹（比如命名为my-angular-matomo），打开CMD进入这个文件夹，输入express --no-view backend——--no-view是因为咱们不需要Express的模板引擎，backend是后端项目的名字。
2. 进入backend文件夹：cd backend，然后安装依赖：npm install。
3. 启动服务器：npm start，打开浏览器访问http://localhost:3000，能看到Express的默认欢迎页就说明服务器跑起来了。

第三步：配置MySQL数据库给Matomo #

Matomo需要数据库存储统计数据，咱们来建个专属库：

1. 打开MySQL Workbench，用root账号登录，点击「Create new Schema」（新建数据库），命名为matomo_db（名字随便起，记好就行），字符集选utf8mb4，排序规则选utf8mb4_general_ci，点Apply完成创建。
2. 新建一个Matomo专属用户（比用root更安全）：在Workbench打开SQL编辑器，输入以下代码，把your_password换成你想设的密码，然后点击闪电图标执行：

CREATE USER 'matomo_user'@'localhost' IDENTIFIED BY 'your_password';
GRANT ALL PRIVILEGES ON matomo_db.* TO 'matomo_user'@'localhost';
FLUSH PRIVILEGES;

第四步：下载并配置Matomo #

现在来安装Matomo本身：

1. 去Matomo官网下载最新压缩包，解压到刚才的backend/public文件夹里（Express的public目录是静态资源根目录，这样Matomo就能通过服务器访问），解压后把文件夹改名为matomo（方便后续访问）。
2. 重启Express服务器（先按Ctrl+C停掉，再输入npm start），然后访问http://localhost:3000/matomo，就能看到Matomo的安装向导了。
3. 跟着向导一步步走：
   • 第一步环境检查：没问题就点下一步；
   • 第二步数据库配置：服务器填localhost，数据库名填matomo_db，用户名matomo_user，密码就是你刚才设的，端口默认3306；
   • 第三步创建数据表：等待系统自动完成；
   • 第四步创建Matomo管理员账号：记好账号密码，后面登录后台要用；
   • 第五步设置网站信息：网站名称随便填（比如「我的本地AngularJS项目」），网站URL填http://localhost:4200（如果你的AngularJS项目端口不是4200，就改成对应的端口）；
   • 最后一步完成安装，就能进入Matomo后台管理页面了。

第五步：把Matomo跟踪代码集成到AngularJS项目里 #

要让Matomo能跟踪你的AngularJS页面访问数据，需要加跟踪代码：

1. 登录Matomo后台，点击左侧菜单「设置」→「网站」，找到你刚才创建的网站，点击「查看跟踪代码」。
2. 复制那段JavaScript跟踪代码，粘贴到你的AngularJS项目的index.html里，放在</body>标签前面。
3. 注意！AngularJS是单页应用（SPA），默认跟踪代码只能跟踪首次页面加载，要跟踪路由切换，得加一段额外代码。在你的AngularJS路由配置文件（比如app.js）里添加：
   • 如果用的是ui-router：

   // 记得注入$rootScope、$location、$document依赖
   $rootScope.$on('$stateChangeSuccess', function() {
     _paq.push(['setCustomUrl', $location.path()]);
     _paq.push(['setDocumentTitle', $document[0].title]);
     _paq.push(['trackPageView']);
   });
   

   • 如果用的是原生ngRoute：

   // 记得注入$rootScope、$location、$document依赖
   $rootScope.$on('$routeChangeSuccess', function() {
     _paq.push(['setCustomUrl', $location.path()]);
     _paq.push(['setDocumentTitle', $document[0].title]);
     _paq.push(['trackPageView']);
   });
   

第六步：测试验证 #

1. 启动你的AngularJS项目（如果用Angular CLI就输入ng serve），访问http://localhost:4200，随便切换几个页面。
2. 回到Matomo后台，点击左侧菜单「访客」→「实时」，就能看到你的访问记录了，说明整个流程成功啦！

实用参考资源 #

• Matomo官方内置文档：安装完成后，后台的「帮助」菜单里有针对当前配置的详细指南，比网上乱找靠谱；
• Express入门指南：在CMD输入npm docs express就能打开本地文档，或者直接看Express官网的入门教程；
• SPA跟踪专属说明：Matomo后台「设置」→「网站」→「跟踪代码」里有专门的单页应用跟踪教程，仔细看就能解决大部分问题。

内容的提问来源于stack exchange，提问作者s4tr2