给自己的网站添加分析统计功能

散韬
285 阅读4分钟

给自己网站添加分析统计功能，以 Next.js 为例，使用 Vercel Analytics 和 Google Analytics 还有 Clarity 三种工具

为什么要添加分析统计功能？

  • 通过用户行为数据分析，包括页面访问路径、停留时间、交互行为等，优化网站的用户体验和内容策略
  • 获取用户来源、地理分布、设备类型等流量数据，制定更有针对性的内容运营和推广策略
  • 监控网站性能指标，如加载时间、跳出率等，及时发现并解决技术问题
  • 衡量内容效果和转化率，为内容创作和功能迭代提供数据支持

三种统计工具

本文将介绍三种统计工具，分别是 Vercel Analytics、Google Analytics 和 Clarity。

使用 Vercel Analytics

Vercel Analytics 是 Vercel 提供的分析统计功能，如果你使用 Vercel 部署你的网站，那么可以很方便地使用 Vercel 自带的分析统计功能， 官方文档中说明免费用户可以免费查看 2500 条统计记录，超出限额也不会额外收费，但是会暂停统计数据 7 天， 7 天之后会自动恢复。

  1. 先在 Vercel 的 Dashboard 中找到你的项目，打开 Web Analytics 功能

vercel-analytics.jpg 2. 安装 @vercel/analytics-next 包

pnpm i @vercel/analytics
  1. 在 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

  1. 先在 Google Analytics 中创建一个账号，然后创建一个项目，Google Analytics 创建过程可以看到谷歌的这个统计功能更多地是面向商业用途的，需要你填写很多信息，比如商家描述。 可以统计的数据有：
  • 网页浏览量
  • 滚动次数
  • 出站点击次数
  • 网站搜索
  • 视频互动度
  • 文件下载次数
  • 表单互动次数

google-analytics.jpg

  1. 在网站中添加 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

clarity.png Microsoft Clarity 是一款免费的分析工具，可帮助网站所有者了解用户如何与其网站互动。它可以跟踪页面交互、用户滚动、点击等情况，进行详细的会话回放和热图可视化。 使用 Clarity 可以让您了解用户行为：

  • 热图显示用户点击和滚动的位置。
  • 会话回放显示用户与网站的互动。

clarity-hotmap.jpg

  1. 访问 Microsoft Clarity 网站并注册一个账户。Clarity登录后，创建一个新项目。

  2. 在 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、广告转化跟踪等
  • 无需开发：营销人员可以自行添加和更新标签，减少对开发团队的依赖
  • 版本控制：支持标签更改的版本控制和回滚
  • 调试工具：提供预览模式，可以在发布前测试标签

使用场景：

  • 需要频繁更新或添加跟踪代码
  • 网站需要集成多个第三方分析工具
  • 团队中有非技术人员需要管理跟踪代码
  • 需要对不同页面应用不同的跟踪规则

基本使用流程：

  1. 在 Google Tag Manager 创建账户和容器
  2. 将 GTM 安装代码添加到网站
  3. 在 GTM 界面配置标签、触发器和变量
  4. 测试配置
  5. 发布更改

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后台"插上"，不用了就"拔掉"，而网站本身的代码始终保持简洁。

avatar
文章
阅读
粉丝