出于和洪哥一样的考虑,为了隐私和数据考虑想尽可能减少第三方的统计服务,我关闭了包括51la和各个如百度统计谷歌统计一类的统计软件,改用了自行搭建Umami来进行统计网站的访问量。
这里洪哥是使用了百度统计的TongjiAPI来实现显示访客数据,那由于我的百度统计已经关了,就直接使用Umami的API来获取数据。
洪哥的教程请移步

下面就是我们的Umami API的使用教程啦

Umami设置

创建只读账号

由于前端页面会储存Umami的token,所以我们需要做好安全措施,这里我们可以创建一个账号来确保这个token只能用其访问数据而不会修改我们的站点设置(这里也可以自己写一个中间件来实现或者是将其写入到配置文件中)这部分就不是本文的教程了
登录我们的管理员账号,点击设置 -> 用户 -> 创建用户,角色选择仅浏览量

创建团队

由于这个账号只有只读权限,我们需要将其移动到可以管理网站的团队里。
点击设置 -> 团队 -> 创建团队

当我们的团队创建完成后,我们的管理员账号会自动进入团队里面,我们点击查看,找到访问代码,点击复制,这里我一会要使用。

变更网站所属

假如你还没有创建网站,你可以先切换到团队账号直接创建网站,假如你已经创建好网站了,那么点击设置 -> 团队 -> 编辑 -> 统计数据 -> 转移来将其转移到团队账号里

只读账号加入团队

点击设置 -> 团队 -> 加入团队,输入刚刚复制的访问代码

这是在网站里就可以看到我们自己的网站了。

获取Token

加入你没有习惯的工具,可以使用在线的这个Hoppscotch
选择post,输入https://Umami/api/auth/login,选择Body,点击Conetent Type 复选框选择application/json,输入你的只读账号的账号密码

1
2
3
4
{
"username":"username",
"password":"password"
}

保存返回的token

前端调用全站数据

这里只给出木木木木木的基础模板,有需要的可以自行修改

1
<div class="tongji">总访问量 <span id="pvStatic">0</span> 次 | 总访客数 <span id="uvStatic">0</span></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
document.addEventListener('DOMContentLoaded', () => {
umiTongji();
});
function umiTongji(){
var umiToken = "o7......w=" //获取到的 token
var umiId = "c27bd84b-02a3-4c3f-a168-0d7fadec9c74" //获取到的 websiteId
var umiTime = Date.parse(new Date());
var umiUrl = "https://Umami/api/websites/"+umiId+"/stats?startAt=0000000000&endAt="+umiTime;
fetch(umiUrl,{
method: 'GET',
mode: 'cors',
cache: 'default',
headers: {
'Authorization': 'Bearer ' + umiToken,
'Content-Type': 'application/json'
}
})
.then(res => res.json()).then(resdata => {
document.querySelector('#pvStatic').innerHTML = resdata.pageviews.value
document.querySelector('#uvStatic').innerHTML = resdata.uniques.value
});
}

更多:当前在线数……

1
2
3
4
5
GET /api/websites/{websiteId}/active  //获取网站上的活跃用户数。
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
Umami API 使用方法:https://www.zywvvd.com/notes/tools/umami/umami-api/umami-api/