feat: integrate analytics tracking

app/layout.tsx

@@ -6,6 +6,7 @@ import { Footer } from "@/components/layout/footer";
 import { CartDrawer } from "@/components/cart/cart-drawer";
 import { ToastProvider } from "@/components/ui/toast-provider";
 import { WebVitals } from "@/_components/web-vitals";
+import { InteractionTracker } from "@/components/interaction-tracker";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -36,6 +37,7 @@ export default function RootLayout({
         </div>
         <CartDrawer />
         <ToastProvider />
+        <InteractionTracker />
         {process.env.NODE_ENV === "production" ? null : <WebVitals />}
       </body>
     </html>

components/interaction-tracker.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { useEffect } from "react";
+import { createCrowSDK } from "@b3-crow/website-hook-sdk";
+
+export function InteractionTracker() {
+  useEffect(() => {
+    // Create and initialize the SDK (only runs in browser)
+    const crow = createCrowSDK({
+      projectId: "pk_test_abc123def456",
+      debug: true, // Enable detailed logging
+    });
+
+    crow.initializeSdk();
+
+    // Cleanup on unmount
+    return () => {
+      crow.destroySdk();
+    };
+  }, []);
+
+  return null;
+}

package.json

@@ -26,7 +26,7 @@
     "lighthouse:performance": "pnpm exec lighthouse http://localhost:3000 --only-categories=performance --output=json --verbose --chrome-flags=\"--headless\" --output-path ./.lighthouse/lighthouse-performance.json"
   },
   "dependencies": {
-    "@b3-crow/website-hook-sdk": "0.0.19",
+    "@b3-crow/website-hook-sdk": "0.0.23",
     "@opennextjs/cloudflare": "^1.14.7",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-separator": "^1.1.8",