← 返回博客
4 分钟阅读nextjstutorial

为 Next.js 应用添加隐私优先分析

一步步指导你将 Monoid 集成到 Next.js 中，无需 cookie、同意横幅或合规烦恼。

Next.js 应用有几种常见的分析方法，大多数都涉及 cookie 横幅或拖慢你 Core Web Vitals 的重量级第三方脚本。这里讲述如何添加实时、隐私优先的分析，而避免这两种问题。

你会得到什么

  • 在每次路由变化（包括客户端导航）时进行 pageview 追踪
  • 访客计数、推荐来源、国家、浏览器系列和设备类型
  • 无 cookie、无指纹，无需 GDPR 同意
  • 单个 async script 标签——无需维护 npm 包

步骤 1：创建 Monoid 账户

在 monoid.website 注册并创建新站点。你将收到一个 site_id——你站点的简短字母数字标识符。

步骤 2：将追踪器添加到布局

在使用 App Router 的 Next.js 13+ 中，将追踪器脚本添加到根 layout.tsx：

import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://api.monoid.website/tracker.min.js"
          data-site-id="YOUR_SITE_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

使用 strategy="afterInteractive" 会在页面变得可交互后加载脚本，确保你的 Largest Contentful Paint 分数不受影响。

步骤 3：处理客户端导航

追踪器内置的 history.pushState 钩子会在 Pages Router 和 App Router 的每次导航事件上自动触发。你无需添加任何额外内容。

如果你想发送自定义事件——例如，当用户完成结账或点击特定按钮时——直接调用全局辅助函数：

window.monoid('event', 'checkout_complete')

步骤 4：在仪表板中验证

打开你的 Monoid 仪表板并导航到站点上的某个页面。你应该会在几秒内看到一个实时访客出现在实时信息流中。如果你设置了暂存环境，请确保它使用单独的 site_id，以避免开发流量污染你的生产指标。

不需要的东西

你不需要安装 cookie 同意管理器。你不需要更新隐私政策以提及分析 cookie（因为根本没有）。你也不需要 npm 包——追踪器是从全球边缘网络提供的单个原生 JavaScript 文件。

浏览器系列和设备类型在服务器端从普通请求 User-Agent 推导得出，用于聚合报告。完整的 User-Agent 字符串、浏览器版本、cookie、持久标识符和设备指纹从不存储。

对于大多数 Next.js 项目，从注册到实时数据，整个过程不到两分钟。