Umami UV / PV 统计显示 - PengXing's Blog

鹏星

Love what you love, all will be well! / 爱你所爱，一切美好！

统计加载中...

1087 字

5 分钟

Umami UV / PV 统计显示

2025-09-16

笔记

Blog

/

Umami

统计加载中...

Umami 官方文档并没有提供 UV 和 PV 展示的 API，但是我们可以通过 Umami 的访客 API 获取到网站的访问量和访问人数。

本文将介绍如何通过 Umami 的 API 获取网站的 UV 和 PV 数据，并在页面上展示。

这是本站的 Umami 访问统计页面，显示了每日的访问量和访问人数，链接：

https://us.umami.is/websites/f11536ad-eac1-434b-a0c7-fc78faa63405

我们在前文介绍过如何安装 Umami：Umami 安装使用教程

下面我们将新建用户，通过 Umami 的 API 调用，编写一个简单的页面来显示 Umami 的 UV, PV 访问情况。本文使用类似于 postman 的 API 测试工具来发送 GET, POST 请求。你也可以使用 hoppscotch、curl 等工具。

1. 新建 `View only` 权限的用户#

点击 Settings -> 点击 Users -> 点击 Create user -> 填写账号密码，Role 选择 View only -> 点击 Save

肯定有读者很疑惑，为什么不直接调用 Umami 的 API 获取数据，而是要额外创建一个账户。

因为我的博客是 静态开源无服务器 的，所有代码都展示在前端，包括 API 调用。而 Umami 的 admin API 权限太大了，如果使用 admin 权限的 API Token，那么这个 token 可以获取、修改、删除所有网站的数据，会有严重的安全隐患。

所以我们需要创建一个 View only 权限的用户，使用这个 低权限的用户的 API Token 来访问我们的浏览量等数据。

2. 新建 `Team` 并添加用户和网站#

点击 Settings -> 点击 Teams -> 点击 Create team -> 填写名称 -> 点击 Save

Teams 中选择你刚创建的 Team 点击 view -> 复制 Access code，点击 Websites，点击 Add website 添加你想共享的网站。

如果你的网站之前属于个人账户，那么你可以将其转移到团队账户上。

换一个浏览器登录 Umami（使用 View only 权限的用户） -> Settings -> Teams -> Join team -> 输入 Access code -> Join -> 如果没有出错的话，点击 Dashboard 就可以看到你刚刚添加的网站了。

3. 获取 `View only` 用户的 API Token#

1
POST /api/auth/login

例如你的网站地址为 example.com，那么你需要使用 View only 的账户密码向 https://example.com/api/auth/login 发送一个 POST 请求，请求体为：

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

如果成功，你应该会得到以下的结果：

1
{
2
    "token": "39FFnY1og2MSPWg46alFZfS++akKpey37bRcp9D3oH6CsCMvaCbClN2Qbqq0QhUyZBD1FlHQ9UzUwYOS+J0JKSYnOR7SjftGEuCGj+QBY9RFHxJQBJtpZJmtBvodjgsY0ov8e3jLIClNsfyAecZ3RDXnarsZt+hZwRAFL+5WlOShQP1Bg6e6UyJuUD7f/NWfU94C0ZKYkAgg3b66ATWnkh23UuM3LP3EyYBiQXX3T2PmtN5gSFf7XkS0yRLOP4OCkKUn15j6KzGWHkFsWalwfIz3yECPdZgEWZyDtAnxB5i52N/+t9XIdiR2TDy1LpNj7h7D/dgfue6YO9U5akCauecGniXD7ZPdP1awPvXC/oOLl8TzQCuL+yM0JMN8",
3
    "user": {
4
        "id": "41e2b680-648e-4b09-bcd7-3e2b10c06264",
5
        "username": "admin",
6
        "role": "admin",
7
        "createdAt": "2025-09-15T02:10:42.209Z",
8
        "isAdmin": true
9
    }
10
}

保存 token 值，并在所有请求中发送带 Bearer <token> 值的 Authorization 标头。请求标头应该如下所示：

1
Authorization: Bearer 39FFnY1og2MSPWg46a...yM0JMN8

4. 发送请求获取数据#

先分析一下官方文档的 API 接口：

1
# 获取网站所有数据汇总
2
GET /api/websites/{websiteId}/stats

API

有两个必填的查询参数：startAt 和 endAt，都是 Unix 毫秒时间戳，表示开始时间和结束时间

websiteId 和 startAt 需要我们自己获取

websiteId 可以在 Dashboard -> 点击你网站的 View details -> 浏览器栏的地址 https://example.com/websites/{websiteId} 中找到 {websiteId}

1
https://example.com/websites/8dd154a4-2073-415e-830e-3a82444b6bb6

如上链接中的 8dd154a4-2073-415e-830e-3a82444b6bb6 就是 websiteId。

startAt 可发送 GET 请求到 https://example.com/api/websites/{websiteId}，带上上文获取的请求头

1
Authorization: Bearer 39FFnY1og2MSPWg46a...yM0JMN8

在返回结果中找到 createdAt 字段，这个字段就是 startAt 的值，也就是你的网站创建时间，数据的开始时间

createdAt

5. 编写页面#

页面展示

1
<!DOCTYPE html>
2
<html lang="en">
3

4
<head>
5
    <meta charset="UTF-8">
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
    <title>Document</title>
8
</head>
9

10
<body>
11
    <div style="text-align:center;">
12
        <h1>Umami 网站统计</h1>
13
        <span>总访问量 <span id="umami-site-pv"></span> 次</span>
14

15
        <span>总访客数 <span id="umami-site-uv"></span> 人</span>
16
    </div>
17

18
    <script>
19
        // umami 的 website id
20
        const website_id = 'xxx';
21

22
        // 拼接请求地址
23
        const request_url = 'https://xxx.com' + '/api/websites/' + website_id + '/stats';
24

25
        const start_time = new Date('2024-01-01').getTime(); // 你的网站创建时间
26
        const end_time = new Date().getTime();
27

28
        const token = 'xxxxxx';
29

30
        // 检查配置是否为空
31
        if (!website_id) {
32
            throw new Error("Umami website_id is empty");
33
        }
34
        if (!request_url) {
35
            throw new Error("Umami request_url is empty");
36
        }
37
        if (!start_time) {
38
            throw new Error("Umami start_time is empty");
39
        }
40
        if (!token) {
41
            throw new Error("Umami token is empty");
42
        }
43

44
        const params = new URLSearchParams({
45
            startAt: start_time,
46
            endAt: end_time,
47
        });
48

49
        const request_header = {
50
            method: "GET",
51
            headers: {
52
                "Content-Type": "application/json",
53
                "Authorization": "Bearer " + token,
54
            },
55
        };
56

57
        async function allStats() {
58
            try {
59
                const response = await fetch(`${request_url}?${params}`, request_header);
60
                const data = await response.json();
61
                const uniqueVisitors = data.uniques.value; // 获取独立访客数
62
                const pageViews = data.pageviews.value; // 获取页面浏览量
63

64
                let ele1 = document.querySelector("#umami-site-pv")
65
                if (ele1) {
66
                    ele1.textContent = pageViews; // 设置页面浏览量
67
                }
68

69
                let ele2 = document.querySelector("#umami-site-uv")
70
                if (ele2) {
71
                    ele2.textContent = uniqueVisitors;
72
                }
73

74
                console.log(uniqueVisitors, pageViews);
75
                console.log(data);
76
            } catch (error) {
77
                console.error(error);
78
                return "-1";
79
            }
80
        }
81
        allStats();
82
    </script>
83
</body>
84

85
</html>