Add Google Analytics to docs site (#858)

kawaijoe · claude · web-flow · commit 3c6525d44e6e · 2026-02-22T19:43:35.000+08:00
Use @next/third-parties GoogleAnalytics component to track usage on forui.dev. The measurement ID is passed via GitHub Actions environment variable (docs-production only) to ensure analytics only loads in production, not in preview deployments.

Co-authored-by: Claude Haiku 4.5 &lt;noreply@anthropic.com&gt;
diff --git a/.github/workflows/docs_deploy.yaml b/.github/workflows/docs_deploy.yaml
@@ -65,6 +65,7 @@ jobs:
           CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           CLOUDFLARE_ACCOUNT_ID: ${{ vars.CLOUDFLARE_ACCOUNT_ID }}
           NEXT_PUBLIC_SNIPPETS_URL: ${{ vars.SNIPPETS_URL }}
+          NEXT_PUBLIC_GA_MEASUREMENT_ID: ${{ vars.GA_MEASUREMENT_ID }}
         run: pnpm run deploy ${{ vars.DEPLOY_ARGS }}
 
   docs_snippets:
diff --git a/docs/app/layout.tsx b/docs/app/layout.tsx
@@ -1,4 +1,5 @@
 import { RootProvider } from 'fumadocs-ui/provider/next';
+import { GoogleAnalytics } from '@next/third-parties/google';
 import './global.css';
 import { Inter } from 'next/font/google';
 
@@ -27,6 +28,9 @@ export default function Layout({ children }: LayoutProps<'/'>) {
       <body className="flex flex-col min-h-screen">
         <RootProvider>{children}</RootProvider>
       </body>
+      {process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID && (
+        <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID} />
+      )}
     </html>
   );
 }
diff --git a/docs/package.json b/docs/package.json
@@ -15,6 +15,7 @@
     "cf-typegen": "wrangler types --env-interface CloudflareEnv cloudflare-env.d.ts"
   },
   "dependencies": {
+    "@next/third-parties": "^16.1.6",
     "@opennextjs/cloudflare": "^1.14.8",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-alert-dialog": "^1.1.15",
diff --git a/docs/pnpm-lock.yaml b/docs/pnpm-lock.yaml
