From be2c9e83950af4f5a80d437e0e2cd98fb867bb46 Mon Sep 17 00:00:00 2001
From: Quang Tran <16215255+trmquang93@users.noreply.github.com>
Date: Sun, 15 Mar 2026 14:48:19 +0700
Subject: [PATCH] feat: add Vercel Analytics for page view and web vitals
 tracking

Install @vercel/analytics and render <Analytics /> once at the App level
so all routes (landing, editor, docs) are tracked without duplicating
the component across early-return branches.
---
 package-lock.json | 43 +++++++++++++++++++++++++++++++++++++++++++
 package.json      |  1 +
 src/App.jsx       | 17 +++++++++++++----
 3 files changed, 57 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e904635..c51639f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "drawd",
       "version": "1.0.0",
       "dependencies": {
+        "@vercel/analytics": "^2.0.1",
         "react": "^19.0.0",
         "react-dom": "^19.0.0"
       },
@@ -1729,6 +1730,48 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@vercel/analytics": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@vercel/analytics/-/analytics-2.0.1.tgz",
+      "integrity": "sha512-MTQG6V9qQrt1tsDeF+2Uoo5aPjqbVPys1xvnIftXSJYG2SrwXRHnqEvVoYID7BTruDz4lCd2Z7rM1BdkUehk2g==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@remix-run/react": "^2",
+        "@sveltejs/kit": "^1 || ^2",
+        "next": ">= 13",
+        "nuxt": ">= 3",
+        "react": "^18 || ^19 || ^19.0.0-rc",
+        "svelte": ">= 4",
+        "vue": "^3",
+        "vue-router": "^4"
+      },
+      "peerDependenciesMeta": {
+        "@remix-run/react": {
+          "optional": true
+        },
+        "@sveltejs/kit": {
+          "optional": true
+        },
+        "next": {
+          "optional": true
+        },
+        "nuxt": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "svelte": {
+          "optional": true
+        },
+        "vue": {
+          "optional": true
+        },
+        "vue-router": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@vitejs/plugin-react": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.7.0.tgz",
diff --git a/package.json b/package.json
index c82e390..355cb0d 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "test": "vitest run"
   },
   "dependencies": {
+    "@vercel/analytics": "^2.0.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
diff --git a/src/App.jsx b/src/App.jsx
index 16e86c8..d3dfa4b 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,4 +1,5 @@
 import { useState, useEffect, lazy, Suspense } from "react";
+import { Analytics } from "@vercel/analytics/react";
 import LandingPage from "./pages/LandingPage";
 import DocsPage from "./pages/DocsPage";
 import { COLORS } from "./styles/theme";
@@ -23,8 +24,9 @@ export default function App() {
     return () => window.removeEventListener("hashchange", onHashChange);
   }, []);
 
+  let page;
   if (route === "editor") {
-    return (
+    page = (
       <Suspense
         fallback={
           <div
@@ -46,9 +48,16 @@ export default function App() {
         <Drawd />
       </Suspense>
     );
+  } else if (route === "docs") {
+    page = <DocsPage />;
+  } else {
+    page = <LandingPage />;
   }
 
-  if (route === "docs") return <DocsPage />;
-
-  return <LandingPage />;
+  return (
+    <>
+      {page}
+      <Analytics />
+    </>
+  );
 }