How to Setup and Integrate Uma

lxf2023-12-18 15:00:02

原文链接 ### 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?文中,我们将解读如何使用 VercelSupabase 设定 Umami

提前准备账户

最先,保证你就已经有 Github 账户。如果还没,请注册一个,由于我们应该使用这些来公布大家建造的 Umami

保证你有了 Github 账户后,你可以在 Vercel 和 Supabase 上注册帐号(要是没有)。

设定 Subpabase

如今,你能登陆 Supabase,来到导航栏车内仪表盘网页页面,并点一下 New Project 按键。根据自己个人兴趣爱好和实际需要来挑选组织与键入项目规划。

How to Setup and Integrate Uma

根据自己个人爱好,填好下边的表格。除此之外,在地域表字段中,挑选离自己近期的地区。

How to Setup and Integrate Uma

发布在 Vercel

依据 Umami’s Docs (Running on Vercel section) 章节引导,再通过点一下 Deploy 按键,你可以非常容易将 Umami 分享到 Vercel 上。随后,也可以选择 Github 并提交代码仓库名字,以后依照默认设置流程进行实际操作。

假如你到下边这一步,请移步 Supabase

How to Setup and Integrate Uma

Supabase 中,切出设置界面网页页面并点一下 Database 章节目录。来到 Connection String 一部分。挑选 URI 并拷贝到自己的 Vercel 设定里的 DATABASE_URL 内。别忘了了变更 YOUR_PASSWORD 为你 Supabase 数据库密码。

How to Setup and Integrate Uma

How to Setup and Integrate Uma

针对 HASH_SALT 表字段,你能应用 Password Generator 来形成随机事件字符串数组并拷贝它。进行了这一后,你可将其分享到 Vercel

公布全过程以后,如果你想要变更网站域名,你能换步到新项目设定然后选择网站域名菜单栏,点击 Edit 按键。

How to Setup and Integrate Uma

配备你 Umami

如今,在浏览器输入你部署Umami(连接)。默认账户密码全是 admin。如果你想要修改密码,能够来到设置界面,进到本人章节目录变更你现阶段的登陆密码。

How to Setup and Integrate Uma

加上 Umami 到自己的网站

在设置界面中,切出 Website 章节目录并点一下 Add Website 按键。你可以加你站点名称以及连接,如果你想要打开 Share URL 能够选中。

加上网站后,你能拷贝追踪编码 Tracking Code。更方便把它黏贴到自己的项目中。

How to Setup and Integrate Uma

最后一步,去到自己的网站新项目文件夹名称。从我这个例子中,我采用的是 Next.js 构建项目,因此我将黏贴编码到 _document.tsx 文档中。

祝贺你了