十分钟给静态页面加上分析

Ghost 自带的 Web Analytics(基于 Tinybird)非常好用。但问题是——它只统计 Ghost 博客自己的页面。如果你像我一样把博客迁移到 /blog/ 子路径,然后在根路径放了独立的 Landing / About / Cases 页面,这些静态页面的访问数据 Ghost 是不知道的。

十分钟给静态页面加上分析

Ghost 自带的 Web Analytics(基于 Tinybird)非常好用。但问题是——它只统计 Ghost 博客自己的页面。如果你像我一样把博客迁移到 /blog/ 子路径,然后在根路径放了独立的 Landing / About / Cases 页面,这些静态页面的访问数据 Ghost 是不知道的。

这篇文章记录了我怎么花十分钟解决这件事。

先看 Ghost 的分析怎么工作的

打开浏览器开发者工具,看看 Ghost 博客页面加载了什么:

<script defer src="/blog/public/ghost-stats.min.js?v=3d251a135e" 
  data-stringify-payload="false" 
  data-datasource="analytics_events" 
  data-storage="localStorage" 
  data-host="https://<你的域名>/.ghost/analytics/api/v1/page_hit"
  tb_site_uuid="<你的站点UUID>" 
  tb_post_uuid="..." 
  tb_post_type="post" 
  tb_member_uuid="..." 
  tb_member_status="...">
</script>

核心逻辑很简单: 1. 加载 ghost-stats.min.js(Ghost 官方提供的前端统计脚本) 2. 脚本从标签属性里读取配置:API 地址、站点 ID、页面类型等 3. 页面加载后发送 page_hit 事件到 data-host 指定的端点 4. Ghost 的服务端把这个事件转发到 Tinybird

关键发现:这个脚本不依赖 Ghost 运行时。它就是一个独立的前端统计脚本。那就好办了。

给静态页面加上

我只需要把同样的 <script> 标签复制到三个静态页面的 <head> 里,改几个参数就行:

<script defer src="/blog/public/ghost-stats.min.js?v=3d251a135e"
  data-stringify-payload="false"
  data-datasource="analytics_events"
  data-storage="localStorage"
  data-host="https://<你的域名>/.ghost/analytics/api/v1/page_hit"
  tb_site_uuid="<你的站点UUID>"
  tb_post_type="page"           <!-- 改成 page,区别于博客文章 -->
  tb_member_uuid="undefined"
  tb_member_status="undefined">
</script>

改动点: - tb_post_type"post" 改为 "page" —— 方便在 Tinybird 里区分来源 - tb_post_uuid 去掉 —— 静态页面没有文章 ID - tb_member_uuidtb_member_status 设为 undefined —— 静态页面没有会员系统

同一个 tb_site_uuid、同一个 data-host,所有数据会进入同一个 Tinybird analytics_events 数据源。

部署到线上

SSH 连上服务器,把三个文件推上去:

scp index.html user@<你的域名>:/path/to/site/index.html
scp about/index.html user@<你的域名>:/path/to/site/about/index.html
scp cases/index.html user@<你的域名>:/path/to/site/cases/index.html

验证一下:

curl -s https://<你的域名>/ | grep ghost-stats
# <script defer src="/blog/public/ghost-stats.min.js?v=3d251a135e"

curl -s https://<你的域名>/about/ | grep ghost-stats
# <script defer src="/blog/public/ghost-stats.min.js?v=3d251a135e"

curl -s https://<你的域名>/cases/ | grep ghost-stats
# <script defer src="/blog/public/ghost-stats.min.js?v=3d251a135e"

全部正常加载。总耗时不到十分钟。

事后想想

这事的本质是:Ghost 的 Tinybird 集成方案本身就是前端脚本 + 后端代理的组合。前端脚本可以独立运行,后端代理只负责转发。只要 nginx 配置正确(/blog/ 子路径下的静态资源能正常访问),任何页面都能复用这套分析能力。

如果你的 Ghost 博客也有独立静态页面,这个方案可以直接抄。

2026-06-23 更新

文章里说去掉 tb_post_uuid,但后来 Ghost Analytics 容器升级到了 1.0.244 版本,对 payload 做了严格 schema 校验——post_uuid 是必填字段。空字符串不行,必须是有效的 UUID 或者字面字符串 "undefined"。所以静态页面的追踪脚本应该改成:

转发至

微信扫一扫分享

WeChat QR Code