From 07f7a3da351b5ac1ff3f5af4909c788cd30c17bd Mon Sep 17 00:00:00 2001
From: Radiumcoders <radiumcoders@gmail.com>
Date: Thu, 17 Sep 2026 12:45:38 +0530
Subject: [PATCH] feat: replace Umami with Tracwell browser analytics

Initialize one client-side Tracwell instance and track completed copy outcomes without extra page-view hooks.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 app/layout.tsx                    |  8 ++-----
 components/cli-command.tsx        |  9 +++++++
 components/component-controls.tsx |  7 ++++++
 components/copy-button.tsx        |  3 +++
 components/mdx-pre.tsx            |  2 ++
 components/tracwell-analytics.tsx | 39 +++++++++++++++++++++++++++++++
 package.json                      |  1 +
 pnpm-lock.yaml                    |  9 +++++++
 8 files changed, 72 insertions(+), 6 deletions(-)
 create mode 100644 components/tracwell-analytics.tsx

diff --git a/app/layout.tsx b/app/layout.tsx
index 9767b39..4f16338 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,12 +1,12 @@
 import { Geist, Geist_Mono } from "next/font/google"
 import { RootProvider } from "fumadocs-ui/provider/next"
 import type { Metadata, Viewport } from "next"
-import Script from "next/script"
 import type { ReactNode } from "react"
 
 import { DocsSearchDialog } from "@/components/docs-search-dialog"
 import { JsonLd } from "@/components/json-ld"
 import { ThemeProvider } from "@/components/theme-provider"
+import { TracwellAnalytics } from "@/components/tracwell-analytics"
 import { TooltipProvider } from "@/components/ui/tooltip"
 import { THEME_BOOTSTRAP_SCRIPT } from "@/lib/theme-bootstrap"
 import { Toaster } from "sonner"
@@ -143,11 +143,7 @@ export default function RootLayout({
             </TooltipProvider>
           </RootProvider>
         </ThemeProvider>
-        <Script
-          defer
-          src="https://cloud.umami.is/script.js"
-          data-website-id="5a96c4a1-18ca-49b5-9cf9-b80c01c5ffa9"
-        />
+        <TracwellAnalytics />
       </body>
     </html>
   )
diff --git a/components/cli-command.tsx b/components/cli-command.tsx
index 96e6971..ce61c48 100644
--- a/components/cli-command.tsx
+++ b/components/cli-command.tsx
@@ -4,6 +4,7 @@ import { useSyncExternalStore } from "react"
 
 import { CopyButton } from "@/components/copy-button"
 import { FrameworkSelect } from "@/components/framework-select"
+import { trackEvent } from "@/components/tracwell-analytics"
 import {
   BunIcon,
   NpmIcon,
@@ -217,6 +218,14 @@ export function CliCommand({
             text={activeCommand}
             label="Copy command"
             errorMessage="Couldn’t copy command"
+            onCopied={() =>
+              trackEvent("cli_command_copied", {
+                package_manager: manager,
+                framework,
+                source: github ? "github" : "registry",
+                ...(item ? { item } : {}),
+              })
+            }
           />
         </div>
       </div>
diff --git a/components/component-controls.tsx b/components/component-controls.tsx
index 4846a53..0b8c07c 100644
--- a/components/component-controls.tsx
+++ b/components/component-controls.tsx
@@ -13,6 +13,7 @@ import {
 import { RiAddLine, RiRefreshLine } from "@remixicon/react"
 
 import { CopyButton } from "@/components/copy-button"
+import { trackEvent } from "@/components/tracwell-analytics"
 import { Button } from "@/components/ui/button"
 import { Switch } from "@/components/ui/switch"
 import { cn } from "@/lib/utils"
@@ -139,6 +140,12 @@ export function ComponentControls({
                 size="xs"
                 text={snippet}
                 label="Copy"
+                onCopied={() =>
+                  trackEvent("code_copied", {
+                    source: "component_snippet",
+                    ...(component ? { component } : {}),
+                  })
+                }
               />
             ) : null}
             {onReset ? (
diff --git a/components/copy-button.tsx b/components/copy-button.tsx
index f7f00bc..24c5f87 100644
--- a/components/copy-button.tsx
+++ b/components/copy-button.tsx
@@ -17,6 +17,7 @@ export type CopyButtonProps = {
   errorMessage?: string
   size?: CopyButtonSize
   className?: string
+  onCopied?: () => void
 }
 
 export function CopyButton({
@@ -27,6 +28,7 @@ export function CopyButton({
   errorMessage = "Couldn’t copy",
   size = "icon-sm",
   className,
+  onCopied,
 }: CopyButtonProps) {
   const [copied, setCopied] = useState(false)
   const timeoutRef = useRef<number | null>(null)
@@ -46,6 +48,7 @@ export function CopyButton({
       if (timeoutRef.current) window.clearTimeout(timeoutRef.current)
       setCopied(true)
       toast.success(successMessage)
+      onCopied?.()
       timeoutRef.current = window.setTimeout(() => setCopied(false), 1600)
     } catch {
       toast.error(errorMessage)
diff --git a/components/mdx-pre.tsx b/components/mdx-pre.tsx
index 33615b2..29b5712 100644
--- a/components/mdx-pre.tsx
+++ b/components/mdx-pre.tsx
@@ -4,6 +4,7 @@ import { useRef, type ComponentProps } from "react"
 import { CodeBlock, Pre } from "fumadocs-ui/components/codeblock"
 
 import { CopyButton } from "@/components/copy-button"
+import { trackEvent } from "@/components/tracwell-analytics"
 import { cn } from "@/lib/utils"
 
 function codeFromFigure(figure: HTMLElement | null) {
@@ -37,6 +38,7 @@ export function MdxPre({
               size="icon-xs"
               label="Copy code"
               getText={() => codeFromFigure(figureRef.current)}
+              onCopied={() => trackEvent("code_copied", { source: "docs" })}
             />
           ) : null}
         </div>
diff --git a/components/tracwell-analytics.tsx b/components/tracwell-analytics.tsx
new file mode 100644
index 0000000..8874b77
--- /dev/null
+++ b/components/tracwell-analytics.tsx
@@ -0,0 +1,39 @@
+"use client"
+
+import { useEffect } from "react"
+import {
+  createTracwell,
+  type EventProperties,
+  type TracwellClient,
+} from "tracwell"
+
+const TRACWELL_CONFIG = {
+  collectionMode: "private",
+  consent: "granted",
+  projectKey: "tw_live_7f379f3a0de54e719b901e6a51feeaa9",
+  respectDoNotTrack: true,
+} as const
+
+let analytics: TracwellClient | undefined
+
+function getTracwell(): TracwellClient | undefined {
+  if (analytics) return analytics
+  if (typeof document === "undefined") return undefined
+  analytics = createTracwell(TRACWELL_CONFIG)
+  return analytics
+}
+
+export function trackEvent(
+  eventName: string,
+  properties?: EventProperties
+): string | undefined {
+  return getTracwell()?.track(eventName, properties)
+}
+
+export function TracwellAnalytics() {
+  useEffect(() => {
+    getTracwell()
+  }, [])
+
+  return null
+}
diff --git a/package.json b/package.json
index b930423..a9c7069 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
     "shadcn": "^4.15.0",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.6.0",
+    "tracwell": "^0.2.0",
     "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fdd8067..3ffb8e0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -62,6 +62,9 @@ importers:
       tailwind-merge:
         specifier: ^3.6.0
         version: 3.6.0
+      tracwell:
+        specifier: ^0.2.0
+        version: 0.2.0
       tw-animate-css:
         specifier: ^1.4.0
         version: 1.4.0
@@ -2982,6 +2985,7 @@ packages:
   eslint@9.39.5:
     resolution: {integrity: sha512-DgZS62aPLXKlnxILS/AYCoRvHaZeXceIzlXPkkGGzJWSow1aEk0lbTlxUSlyjC8jcaKxAdOnTDz+o1JFSBsyjw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    deprecated: This version is no longer supported. Please see https://eslint.org/version-support for other options.
     hasBin: true
     peerDependencies:
       jiti: '*'
@@ -4984,6 +4988,9 @@ packages:
   tr46@0.0.3:
     resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
 
+  tracwell@0.2.0:
+    resolution: {integrity: sha512-gSBUARShwgsJ9JDmrTGwRXcjsexS59Bl0r+274FKdGcBt4MsMUq749cdCFTdLw68cDYSgFBM9GUf/F9uZTbbBA==}
+
   trim-lines@3.0.1:
     resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
 
@@ -10932,6 +10939,8 @@ snapshots:
 
   tr46@0.0.3: {}
 
+  tracwell@0.2.0: {}
+
   trim-lines@3.0.1: {}
 
   trough@2.2.0: {}