原文链接 ### How to Setup and Integrate Umami to Your Next.js Site -- 创作者 Yehezkiel Gunawan
序言
文中,我们将要解读怎样建造并配有
Umami
,然后将和Next.js
项目集成下去。
详细介绍
当某人或某个机构想设置一个网站分析工具,他们往往应用 Google Analytics。可是如同他们所了解,大家不可以搜集真实数据信息,由于当别人浏览网站而且 TA
用浏览器中增设了广告宣传回调函数时,Google Analytics
数据分析工具不能正常工作中。自然,此专用工具也存在隐私泄露。
那样,有别的可供选择的专用工具?没错,强烈推荐 Umami。怎么回事?按照其官方文档,Umami
是开源代码的并可以保护个人隐私,是 Google Analytics
的替代选择。
Okay,大家进到关键。如何设置和建造 Umami
?文中,我们将解读如何使用 Vercel
和 Supabase
设定 Umami
。
提前准备账户
最先,保证你就已经有 Github 账户。如果还没,请注册一个,由于我们应该使用这些来公布大家建造的 Umami
。
保证你有了 Github
账户后,你可以在 Vercel 和 Supabase 上注册帐号(要是没有)。
设定 Subpabase
如今,你能登陆 Supabase,来到导航栏车内仪表盘网页页面,并点一下 New Project
按键。根据自己个人兴趣爱好和实际需要来挑选组织与键入项目规划。
根据自己个人爱好,填好下边的表格。除此之外,在地域表字段中,挑选离自己近期的地区。
发布在 Vercel
依据 Umami’s Docs (Running on Vercel section) 章节引导,再通过点一下 Deploy
按键,你可以非常容易将 Umami
分享到 Vercel
上。随后,也可以选择 Github
并提交代码仓库名字,以后依照默认设置流程进行实际操作。
假如你到下边这一步,请移步 Supabase
。
在 Supabase
中,切出设置界面网页页面并点一下 Database
章节目录。来到 Connection String
一部分。挑选 URI
并拷贝到自己的 Vercel
设定里的 DATABASE_URL
内。别忘了了变更 YOUR_PASSWORD
为你 Supabase
数据库密码。
针对 HASH_SALT
表字段,你能应用 Password Generator 来形成随机事件字符串数组并拷贝它。进行了这一后,你可将其分享到 Vercel
。
公布全过程以后,如果你想要变更网站域名,你能换步到新项目设定然后选择网站域名菜单栏,点击 Edit
按键。
配备你 Umami
如今,在浏览器输入你部署的 Umami
(连接)。默认账户密码全是 admin
。如果你想要修改密码,能够来到设置界面,进到本人章节目录变更你现阶段的登陆密码。
加上 Umami 到自己的网站
在设置界面中,切出 Website
章节目录并点一下 Add Website
按键。你可以加你站点名称以及连接,如果你想要打开 Share URL
能够选中。
加上网站后,你能拷贝追踪编码 Tracking Code
。更方便把它黏贴到自己的项目中。
最后一步,去到自己的网站新项目文件夹名称。从我这个例子中,我采用的是 Next.js
构建项目,因此我将黏贴编码到 _document.tsx
文档中。
祝贺你了