13. 添加博客访问统计面板

想给博客加个访问统计面板，我尝试用 Cloudflare Web Analytics 的 GraphQL API 实现数据可视化，结果踩了一堆坑——免费版连国家来源、设备类型都查不了！折腾12小时后，我转向开源工具 Umami ，终于搞定了实时 PV/UV、访客分布、设备统计等全维度数据展示。

本文记录从 Cloudflare API 接入到放弃的全过程，并手把手教你用 Umami 快速搭建功能完整的统计面板。适合想避开 Cloudflare 权限限制、追求轻量级开源方案的开发者。

核心亮点：

• 避坑指南 ：Cloudflare 免费版 API 的真实权限限制（无独立访客、国家/设备数据）
• 实战方案 ：Umami 从注册、部署到嵌入 Hexo 的完整流程
• 对比分析 ：Cloudflare vs. Umami 功能差异一目了然

Cloudflare（踩坑记录）

最近想给博客搞一个访问量可视化功能，最好能显示每天有多少访问、访客来自哪里、用什么设备等等。于是打起了 Cloudflare Web Analytics 的主意，想着用官方 GraphQL API 直接抓数据，部署到 Cloudflare Workers，再前端用 ECharts 展示。

过程不复杂，但结局有点唏嘘。只弄出访客记录，但是国家、设备无法抓取，但我的 Web Analytics 的记录很丰富。

1. 安装依赖并初始化项目

mkdir cf-analytics && cd cf-analytics
npm init -y
npm install graphql-request
npm install -g wrangler
wrangler login

2. 初始化 Cloudflare Worker 项目

mkdir cf-worker-analytics && cd cf-worker-analytics
wrangler init

文件结构如下：

cf-analytics
├── wrangler.toml ✅
└── src
    └── index.js ✅

3. wrangler.toml 文件配置

name = "cf-analytics"
account_id = "efc060ff--------8d2645763f4f4"
compatibility_date = "2025-07-14"
main = "src/index.js"

[vars]
CF_API_TOKEN = "9A-HoHXH7NwMX--------Qw3a2hLp2klKeF"
ZONE_ID = "678f45130--------8148ef3b345"

[observability.logs]
enabled = true

4. Worker 核心逻辑 src/index.js

这个文件负责接收外部请求，向 Cloudflare GraphQL API 请求每日访问数据，再把数据以 JSON 返回前端使用。

export default {
  async fetch(request, env) {
    const { CF_API_TOKEN, ZONE_ID } = env;

    const now = new Date();
    const today = now.toISOString().slice(0, 10);
    const sevenDaysAgo = new Date(now - 7 * 24 * 3600 * 1000).toISOString().slice(0, 10);

    const query = `
      {
        viewer {
          zones(filter: { zoneTag: "${ZONE_ID}" }) {
            httpRequests1dGroups(
              filter: {
                date_geq: "${sevenDaysAgo}",
                date_lt: "${today}"
              },
              limit: 7,
              orderBy: [date_ASC]
            ) {
              dimensions { date }
              sum { requests }
            }
          }
        }
      }
    `;

    const response = await fetch("https://api.cloudflare.com/client/v4/graphql", {
      method: "POST",
      headers: {
        "Authorization": "Bearer " + CF_API_TOKEN,
        "Content-Type": "application/json"
      },
      body: JSON.stringify({ query })
    });

    const json = await response.json();
    const stats = json?.data?.viewer?.zones?.[0]?.httpRequests1dGroups ?? [];

    return new Response(JSON.stringify(stats), {
      headers: {
        "Content-Type": "application/json",
        "Access-Control-Allow-Origin": "*"
      }
    });
  }
}

5. 博客前端展示页面 index.md

我在博客里新建了一个页面 index.md 来显示折线图，用的是 ECharts：

<div id="cfChart" style="width: 100%; height: 400px; border: 1px solid red;"></div>

{% raw %}
<script src="https://cdn.jsdelivr.net/npm/echarts@5"></script>
<script>
  fetch('https://cf-analytics.artin-tan.workers.dev/api/stats')
    .then(res => res.json())
    .then(data => {
      const x = data.map(d => d.dimensions.date);
      const y = data.map(d => d.sum.requests);
      const chart = echarts.init(document.getElementById('cfChart'));
      chart.setOption({
        title: { text: 'Cloudflare 访问趋势' },
        tooltip: {},
        xAxis: { type: 'category', data: x },
        yAxis: { type: 'value' },
        series: [{ type: 'line', name: '请求量', data: y }]
      });
    }).catch(err => console.error('图表加载失败:', err));
</script>
{% endraw %}

访问页面后，能成功看到近 7 天的访问量曲线。

6. 遇到的现实问题（🤡 免费用户看这里！）

我本来想进一步获取这些数据：

• Unique Visitors（独立访客）
• Visits by Country（国家来源）
• Device Breakdown（设备类型）
• Referral Sources（来源网站）

于是尝试把 GraphQL 查询改成使用 httpRequestsAdaptiveGroups，并加上 sum.uniques、countryMap 等字段：

httpRequestsAdaptiveGroups {
  dimensions { date }
  sum { requests uniques }
  countryMap { clientCountryName requests }
}

但是现实是，无论我怎么更换国家和设备字段，拉取的内容都是空，
使用 https://cf-analytics.<你的名字>.workers.dev/api/stats?days=7
来查看拉取的数据如下：

{"daily":[{"dimensions":{"date":"2025-07-08"},"sum":{"pageViews":135},"uniq":{"uniques":136}},
{"dimensions":{"date":"2025-07-09"},"sum":{"pageViews":154},"uniq":{"uniques":147}},
{"dimensions":{"date":"2025-07-10"},"sum":{"pageViews":194},"uniq":{"uniques":224}},
{"dimensions":{"date":"2025-07-11"},"sum":{"pageViews":176},"uniq":{"uniques":148}},
{"dimensions":{"date":"2025-07-12"},"sum":{"pageViews":246},"uniq":{"uniques":221}},
{"dimensions":{"date":"2025-07-13"},"sum":{"pageViews":192},"uniq":{"uniques":183}},
{"dimensions":{"date":"2025-07-14"},"sum":{"pageViews":293},"uniq":{"uniques":184}}],
"countryStats":[],"browserStats":[],"deviceStats":[]}

最下面一行全是空的，这些改了很多次，利用ChatGPT搜了很多资料依然是不行。
结果是证实了 字段其实是对的，只是无法获取数据。
原因可能是免费用户的原因。

当前阶段能实现的内容

内容	是否支持	备注
每日请求量	✅	通过 httpRequests1dGroups 实现
独立访客（uniques）	❌	免费用户不支持
国家访问统计	❌	免费用户不支持 countryMap
来源网站（referer）	❌	免费用户无权限
设备类型	❌	Cloudflare GraphQL 不提供这类数据

Umami（最终选择）

Cloudflare 免费版 Web Analytics 的 API 限制一堆，想拿个国家访问来源、独立访客数根本不可能。于是我直接切换到 Umami ——一个轻量级但强大的开源网站统计方案，支持可视化面板、API 拉数据、自定义追踪等。

虽然很不情愿，但花了12个小时，各种尝试 Cloudflare 的可行性但终于是放弃了。

手把手教你如何注册、配置和集成 Umami Cloud，让你的博客流量统计不再受限于 Cloudflare 免费版，享受真实 PV/UV、国家、设备、来源等全维度数据。

1. 为什么选择 Umami？

功能	Cloudflare Free	Umami
请求量统计	✅	✅
独立访客统计	❌	✅
国家 / 设备 / 浏览器统计	❌	✅
来源网站统计	❌	✅
免费可用	✅	✅
可自部署 / 托管	❌	✅
可视化分享页	❌	✅

对个人博客来说，Umami 简直就是理想选择！

2. 注册 Umami Cloud 账号

1. 访问 https://umami.is/
2. 点击右上角 Sign up，用邮箱或 GitHub 账号注册
3. 进入后台，完成邮箱验证

3. 创建网站并获取配置参数

1. 登录后进入 Umami Dashboard

2. 进入 Websites，点击 Create website

   • Domain 填写你的域名（比如 neurowave.tech），不要加 http/https
   • Name 随便填（如 “My Blog”）
   • 点击 Save

3. 创建后，网站列表会显示你的站点信息

   • Website ID（形如 8c8b9955----------215ee339cb）
   • Tracking script 地址：如

   <script defer src="https://cloud.umami.is/script.js" 
       data-website-id="8c8b9955------------86215ee339cb">
   </script>

   • 记住这个 website ID，后面用

4. 获取 API Token（可选，适合做高级自定义）

1. 进入 Account - 新建一个 viewOnly user（更安全，防止写入）
2. 用这个账号登录，进入 Account -> API Keys
3. 新建 token，设置为 view only
4. 复制下来的 api_XXXX... 即为你的 API Token

5. 集成 Umami 统计代码到博客

基础用法（直接统计展示）：

1. 打开你的博客主题配置或直接编辑 _config.yml、index.md 等（不同博客平台位置不同）

2. 你的 umami 配置示例（适合写在 hexo/fluid/_config.yml）：

umami:
  src: https://cloud.umami.is/script.js
  website_id: 8c8b9955----------86215ee339cb
  domains: neurowave.tech
  start_time: 2024-01-01
  token: api_LSzAvc----------RuFb0Q1
  api_server: https://cloud.umami.is

6. 在博客展示实时统计图

Umami 自带分享页，开箱即用，无需自己拉 API 或做数据清洗。

1. 打开网站设置，启用 Share URL 功能

2. 系统会生成一个独立的公开统计页面，例如：https://cloud.umami.is/share/IDux-----9lVV/neurowave.tech

3. 你可以在博客页面插入 <iframe> 展示这个统计面板：

   menu:
   - { key: "home", link: "/", icon: "iconfont icon-home-fill" }
   - { key: "archive", link: "/archives/", icon: "iconfont icon-archive-fill" }
   - { key: "category", link: "/categories/", icon: "iconfont icon-category-fill" }
   - { key: "tag", link: "/tags/", icon: "iconfont icon-tags-fill" }
   - { key: "say", link: "/say/", icon: "iconfont icon-comment" }
   ###### 添加地址到 link ######
   - { key: "my-stat", link: "https://cloud.umami.is/share/IDuxEAjut0hD9lVV/neurowave.tech", icon: "iconfont icon-chart" }
   ###########################
   - { key: "about", link: "/about/", icon: "iconfont icon-user-fill" }

4. 发布后你就拥有了一个功能全面、可自定义的实时访问分析页，包含国家、设备、浏览器、来源、热门页面、趋势等所有信息。