给自己网站添加分析统计功能，以 Next.js 为例，使用 Vercel Analytics 和 Google Analytics 还有 Clarity 三种工具
为什么要添加分析统计功能？
通过用户行为数据分析，包括页面访问路径、停留时间、交互行为等，优化网站的用户体验和内容策略 获取用户来源、地理分布、设备类型等流量数据，制定更有针对性的内容运营和推广策略 监控网站性能指标，如加载时间、跳出率等，及时发现并解决技术问题 衡量内容效果和转化率，为内容创作和功能迭代提供数据支持
三种统计工具
本文将介绍三种统计工具，分别是 Vercel Analytics、Google Analytics 和 Clarity。
使用 Vercel Analytics
Vercel Analytics 是 Vercel 提供的分析统计功能，如果你使用 Vercel 部署你的网站，那么可以很方便地使用 Vercel 自带的分析统计功能， 官方文档中说明免费用户可以免费查看 2500 条统计记录，超出限额也不会额外收费，但是会暂停统计数据 7 天， 7 天之后会自动恢复。
先在 Vercel 的 Dashboard 中找到你的项目，打开 Web Analytics 功能
安装 @vercel/analytics-next包
pnpm i @vercel/analytics
在 app/layout.tsx文件中添加Analytics组件
import { Analytics } from '@vercel/analytics/next';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<head>
<title>Next.js</title>
</head>
<body>
{children}
<Analytics />
</body>
</html>
);
}
使用 Google Analytics
先在 Google Analytics 中创建一个账号，然后创建一个项目，Google Analytics创建过程可以看到谷歌的这个统计功能更多地是面向商业用途的，需要你填写很多信息，比如商家描述。 可以统计的数据有：
网页浏览量 滚动次数 出站点击次数 网站搜索 视频互动度 文件下载次数 表单互动次数
在网站中添加 Google Analytics 的代码
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_GOOGLE_ANALYTICS_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'YOUR_GOOGLE_ANALYTICS_ID');
</script>
或者可以使用 Next.js 官方提供的模块
pnpm add @next/third-parties@latest
import { GoogleAnalytics } from '@next/third-parties/google'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
<GoogleAnalytics gaId="YOUR_GOOGLE_ANALYTICS_ID" />
</html>
)
}
使用 Clarity
Microsoft Clarity 是一款免费的分析工具，可帮助网站所有者了解用户如何与其网站互动。它可以跟踪页面交互、用户滚动、点击等情况，进行详细的会话回放和热图可视化。 使用 Clarity 可以让您了解用户行为：
热图显示用户点击和滚动的位置。 会话回放显示用户与网站的互动。
访问 Microsoft Clarity 网站并注册一个账户。Clarity登录后，创建一个新项目。
在
app/layout.tsx文件中添加Clarity脚本
{/* Microsoft Clarity Script */}
<Script id="clarity-script" strategy="afterInteractive">
{`
(function(c,l,a,r,i,t,y){
c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
})(window, document, "clarity", "script", "YOUR_PROJECT_ID");
`}
</Script>
使用 Google Tag Manager 管理跟踪脚本
在写文章的过程中，我了解到谷歌还有一个东西叫 Google Tag Manager。 Google Tag Manager (GTM) 是 Google 提供的一个免费的标签管理系统。它允许您在不修改网站代码的情况下，通过 Web 界面管理和部署各种营销和分析标签（代码片段）。
主要优势：
集中管理：在一个界面中管理所有跟踪代码，包括 Google Analytics、Facebook Pixel、广告转化跟踪等 无需开发：营销人员可以自行添加和更新标签，减少对开发团队的依赖 版本控制：支持标签更改的版本控制和回滚 调试工具：提供预览模式，可以在发布前测试标签
使用场景：
需要频繁更新或添加跟踪代码 网站需要集成多个第三方分析工具 团队中有非技术人员需要管理跟踪代码 需要对不同页面应用不同的跟踪规则
基本使用流程：
在 Google Tag Manager 创建账户和容器 将 GTM 安装代码添加到网站 在 GTM 界面配置标签、触发器和变量 测试配置 发布更改
GTM 特别适合需要灵活管理多个跟踪工具的中大型网站，但对于简单的个人网站，直接添加所需的跟踪代码可能更加直观。
? 传统方式（不使用GTM）
<head>
<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXX"></script>
<!-- Facebook Pixel -->
<script>!function(f,b,e,v,n,t,s){...}...</script>
<!-- Microsoft Clarity -->
<script>(function(c,l,a,r,i,t,y){...}...</script>
<!-- Hotjar -->
<script>(function(h,o,t,j,a,r){...}...</script>
<!-- 其他各种分析工具的代码 -->
</head>
? 使用GTM后
<head>
<!-- 只需要这一段GTM代码 -->
<script>(function(w,d,s,l,i){
w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;
j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXX');</script>
</head>
主要优势
✅ 网页代码更整洁 ✅ 不用找开发改代码 ✅ 随时可以在GTM后台添加/删除工具 ✅ 更容易维护和管理
这就像是把所有的"插头"都集中到了一个"插线板"（GTM）上，需要用什么工具就在GTM后台"插上"，不用了就"拔掉"，而网站本身的代码始终保持简洁。
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真）、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）、微信小程序定制开发等一系列互联网应用服务。
公安局备案号：
专属顾问
