Loading... <div class="tip inlineBlock error"> **该教程适用于宝塔v8.0版本以上** </div> # 宝塔安装umami * 宝塔dockers搜索umami应用  * 如果端口占用，换个端口安装即可  * 安装成功后是运行状态  # 配置域名反代 * 新建个统计网站域名，用来反代刚建立的umami  * 如果要求安全性，请部署上ssl证书  * 编辑反代，目标url为:`http://127.0.0.1:3002` 输入dockers建立的umami应用端口  **进入网站，输入账号密码登录** * 默认账号：admin * 默认密码：umami  # 创建需要统计的网站 * 点击设置，团队，创建团队（这部分是为了后面引入前端展示做的）  * 建立网站，我这里拿密码查询站作为演示，因此我名字输入密码查询站，域名输入cx.paixx.cn   * 这个时候就可以放入统计代码了，将在网站设置里面获取到的统计代码放入你想统计的网站内   * 直接刷新下需要统计的网站，可以看到，统计代码请求成功，我们的访问数已经正常统计  # 创建前端调用api用户 * 点击设置-用户-新建用户-创建一个view用户-权限选择仅查看浏览量  * 打开个无痕窗口，进入统计网站后台，登录上刚刚新建的view用户 * 新建的view登录上后，点击设置-团队-加入我们用admin创建好的view团队  * 接着，我们可以在view用户看到我们想要统计的网站了  # 获取token 接着在无痕窗口点击退出登录，在登录页面右键-检查-点击network  * 输入设置的view账号密码登录  * 抓取login包，里面的回包就是我们接下来用的内容  ```json { "token": "HXoD+mfeTgVTIXl3n2rVQBV/Kq9Sb3wgPNOKn+GxaWWxsYPoSj8Q1lSRa7lEs/lkT+M4wDBgdLV2K1+0OC8VSBJ/3srcSAa48BjhBQa4Lc1iJ7ytMPzSdy+3VtEjBI7CEtDf43QArEF5xCg0SacIa6bvR1uAtydge1VTdHZxrW1QvCZhwn30CaUowiD4w3ULtUwIdKVqXXx76+jg1DVsvF2k21HHbm1ARPTSwoO2s7hyO5xEzcB2emufaNKremDpc0ZG8uw37EcGYeqbbTCJ159MC2RZqkrp7Kkmw3fYPQmofefGo4CEO98ylLCOwMYt/fWjzZeb1TF90up25DZbeiYIciqw9H9emg==", "user": { "id": "e52786e5-d50d-4f8a-94e1-56ff966279cd", "username": "view", "role": "view-only", "createdAt": "2024-04-21T19:02:16.632Z", "isAdmin": false } } ``` # 获取website_id * 点击网站，进入查看  * 记录下我们要统计网页的website_id  **websites后面的e3c74992-9d1c-4a6a-b5e6-71f9a57a9e46就是我们要的website_id** **因此3个参数我们集齐了** * website_id = 'e3c74992-9d1c-4a6a-b5e6-71f9a57a9e46'; * request_url = 'https://tj.paixx.cn' + '/api/websites/' + website_id + '/stats'; * token = 'HXoD+mfeTgV..............ZbeiYIciqw9H9emg=='; # 创建js文件 新建一个umamiStats.js`文件，用来存储和发送api请求 **umamiStats.js:** ```javascript // 从配置文件中获取 umami 的配置 const website_id = 'e3c74992-9d1c-4a6a-b5e6-71f9a57a9e46'; // 拼接请求地址 const request_url = 'https://tj.paixx.cn' + '/api/websites/' + website_id + '/stats'; const start_time = new Date('2024-01-01').getTime(); const end_time = new Date().getTime(); const token = 'HXoD+mfeTgVTIXl3n2rVQBV/Kq9Sb3wgPNOKn+GxaWWxsYPoSj8Q1lSRa7lEs/lkT+M4wDBgdLV2K1+0OC8VSBJ/3srcSAa48BjhBQa4Lc1iJ7ytMPzSdy+3VtEjBI7CEtDf43QArEF5xCg0SacIa6bvR1uAtydge1VTdHZxrW1QvCZhwn30CaUowiD4w3ULtUwIdKVqXXx76+jg1DVsvF2k21HHbm1ARPTSwoO2s7hyO5xEzcB2emufaNKremDpc0ZG8uw37EcGYeqbbTCJ159MC2RZqkrp7Kkmw3fYPQmofefGo4CEO98ylLCOwMYt/fWjzZeb1TF90up25DZbeiYIciqw9H9emg=='; // 检查配置是否为空 if (!website_id) { throw new Error("Umami website_id is empty"); } if (!request_url) { throw new Error("Umami request_url is empty"); } if (!start_time) { throw new Error("Umami start_time is empty"); } if (!token) { throw new Error("Umami token is empty"); } const params = new URLSearchParams({ startAt: start_time, endAt: end_time, }); const request_header = { method: "GET", headers: { "Content-Type": "application/json", "Authorization": "Bearer " + token, }, }; async function allStats() { try { const response = await fetch(`${request_url}?${params}`, request_header); const data = await response.json(); const uniqueVisitors = data.visitors?.value; // 获取独立访客数 const visits = data.visits?.value; // 获取页面访问 const pageViews = data.pageviews?.value; // 获取页面浏览量 const bounces = data.bounces?.value; //获取在线人数 let ele1 = document.querySelector("#umami-site-pv"); if (ele1) { ele1.textContent = pageViews; // 设置页面浏览量 } let ele2 = document.querySelector("#umami-site-uv"); if (ele2) { ele2.textContent = uniqueVisitors; } let ele3 = document.querySelector("#umami-site-bc"); if (ele3) { ele3.textContent = bounces; } let ele4 = document.querySelector("#umami-site-vi"); if (ele4) { ele4.textContent = visits; } console.log(uniqueVisitors, pageViews, bounces, visits); console.log(data); } catch (error) { console.error(error); return "-1"; } } allStats(); ```  # 前端引入统计 **前端：** **例如index.html:** ```html <!--统计代码--> <script defer src="https://tj.paixx.cn/random-string.js" data-website-id="e3c74992-9d1c-4a6a-b5e6-71f9a57a9e46"></script> <!--可以按自己需求修改样式--> <div style="text-align:center;"> <span>总浏览量 <span id="umami-site-pv"></span> 次</span> <span>总访问数 <span id="umami-site-vi"></span> 次</span> <span>总访客数 <span id="umami-site-uv"></span> 人</span> <span>在线访客数 <span id="umami-site-bc"></span> 人</span> </div> <!--引入的js--> <script src="static/js/umamiStats.js"></script> ``` **引入代码，大功告成**  # 有更多api参数等 ......... GET /api/websites/{websiteId}/events //获取给定时间范围内的事件。 GET /api/websites/{websiteId}/pageviews //获取给定时间范围内的页面浏览量。 GET /api/websites/{websiteId}/metrics //获取给定时间范围内的指标。 GET /api/websites/{websiteId}/stats //获取汇总的网站统计信息。 # 更多教程 官方 API ：[https://umami.is/docs/website-stats](https://umami.is/docs/website-stats) 最后修改：2024 年 04 月 22 日 © 允许规范转载 赞 如果觉得我的文章对你有用，请随意赞赏