hugo-theme-stack集成Umami
温馨提醒
总结摘要
本文介绍了如何在 Hugo 博客主题 hugo-theme-stack 中集成开源网站分析工具 Umami。通过在 1Panel 中私有化部署 Umami(解决 ghcr.io 镜像拉取问题),配置反向代理实现域名访问,并将 Umami 提供的追踪代码嵌入到主题的 head.html 模板中,最终实现对博客访问数据的隐私友好型统计与分析。
umami 是什么
Umami是一个现代的分析平台,旨在帮助用户轻松收集、分析和理解网站数据,以便专注于增长。以下是关于Umami的详细介绍:
核心功能
- 流量分析:能够深入了解网站流量,快速查看所有关键指标,从而优化网站以实现增长。
- 访客分析:提供访客的详细信息,包括他们的地理位置和使用的设备类型,帮助更好地了解目标受众。
- 自定义事件跟踪:不仅可以跟踪页面浏览量,还能捕获网站上的任何事件,如按钮点击和表单提交,为用户提供更全面的行为数据。
- 强大的过滤功能:通过易于应用的过滤器,可以深入分析数据,根据浏览器、操作系统、国家等任何指标对用户进行细分,以便更精准地定位目标群体。
- 实时数据查看:能够实时查看当前网站流量,看到访客正在访问的确切页面,及时了解网站的实时动态。
- 趋势检测:通过比较不同时间段的数据,发现流量的关键趋势,轻松衡量营销活动的成功与否。
产品分析
- 用户旅程:帮助用户了解用户如何在产品中导航,从而优化用户体验和产品流程。
- 用户留存:通过跟踪用户返回网站的频率,衡量网站的粘性,了解用户对网站的忠诚度和吸引力。
- 漏斗分析:了解用户的转化率和流失率,分析用户在不同阶段的行为,找出转化过程中的瓶颈和优化点。
简单的设置流程
- 注册:在Umami Cloud上创建一个免费账户。
- 安装跟踪代码:将隐私友好的跟踪代码添加到网站中。
- 查看数据:数据会立即出现在仪表盘上,整个设置过程非常快速便捷。
开源特性
Umami是开源的,这意味着全球数千名开发者可以共享和贡献代码,共同提升Umami的功能和用户体验。开源社区的力量使得Umami能够不断更新和改进,以满足不同用户的需求。
用户评价
- 易用性:许多用户表示Umami的安装和设置过程非常简单,通常在几分钟内就能完成,对于技术能力有限的用户来说也非常友好。
- 隐私保护:作为谷歌分析的替代品,Umami注重隐私保护,符合GDPR等隐私法规,让用户在使用过程中更加安心。
- 功能强大:尽管强调简单易用,但Umami的功能并不逊色,能够满足大多数网站分析的需求,包括流量分析、用户行为分析等。
- 成本效益:提供有吸引力的定价模型,尤其是对于小型企业和个人开发者来说,是一个经济实惠的选择。
- 社区支持:拥有一个活跃的用户和开发者社区,用户可以在社区中分享经验、解决问题,共同推动Umami的发展。
私有化搭建Umami
搭建方法:使用1Panel简化搭建步骤
依赖环境:
- 数据库:支持的数据库版本:MySQL >= 5.7,PostgreSQL >= 12.14.,习惯使用MySQL所有这里就直接选择了MySQL的默认数据库
- 1Panel
搭建步骤:
- 搭建1Panel步骤略
- 在【应用商店】搜索Umami,并点击安装(这里有一个小问题,因为Umami使用的是
ghcr.io/umami-software/umami镜像地址,大陆访问ghrc.io是有问题的,所有这里可以点击啊下滑找到编辑compose文件,并将image字段的ghcr.io跟改为ghcr.m.daocloud.io、ghcr.eli1.top或自行找到其他镜像加速地址使用) - 点击安装,等待安装完成之后找到应用,并点击设置的服务端口,首次登录默认用户名为:admin,密码为:umami。

公网反向代理实现域名访问:
我这里使用的一个内网穿透+公网服务器实现使用域名来访问

添加好网站之后点击【追踪代码】

复制这个js代码,去到服务器内找到hugo-theme-stack/layouts/partials/head/head.html文件,将复制的代码粘贴到文件中第六行,如下图所示

添加好之后执行 hugo 命令生成html文件,若生成不生效,可以将public、resources目录下的所有文件删除,再次执行hugo命令重新生成即可
生成之后访问网站并登录Umami后台查看是否生效
