From 9c49394997ce753653b52c63633ff225d13d11e6 Mon Sep 17 00:00:00 2001
From: Vercel <vercel[bot]@users.noreply.github.com>
Date: Sat, 7 Mar 2026 00:21:08 +0000
Subject: [PATCH] Set up Vercel Web Analytics
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Vercel Web Analytics Implementation

Successfully implemented Vercel Web Analytics integration for the Ghostr application.

## Changes Made

### 1. Package Installation
- **Modified**: `package.json`
- **Modified**: `package-lock.json`
- Added `@vercel/analytics` package to dependencies

### 2. Analytics Component Integration
- **Modified**: `src/App.tsx`
- Imported `Analytics` component from `@vercel/analytics/react`
- Added `<Analytics />` component to the app's main component tree
- The Analytics component is placed at the root level alongside other global components (Toaster, LoginDialog)

## Implementation Details

This is a Vite + React + TypeScript application, so I followed the React (create-react-app) pattern from the Vercel Web Analytics documentation:

1. Installed the `@vercel/analytics` package using npm
2. Imported the Analytics component from `@vercel/analytics/react`
3. Added the component to the main App component

The Analytics component is a wrapper around the tracking script that provides seamless integration with React applications. It will automatically track page views and user interactions once the app is deployed to Vercel.

## Verification

- ✅ Build completed successfully (`npm run build`)
- ✅ TypeScript compilation passed
- ✅ No breaking changes introduced
- ✅ Analytics component properly integrated into the React component tree

## Next Steps

After deployment to Vercel:
1. Enable Web Analytics in the Vercel dashboard under Project > Analytics
2. Deploy the application to activate the `/_vercel/insights/*` routes
3. Verify tracking is working by checking for Fetch/XHR requests to `/_vercel/insights/view` in the browser's Network tab
4. View analytics data in the Vercel dashboard under the Analytics tab

## Note

The Analytics component will only send tracking data when the app is deployed to Vercel. In local development, it will run in a safe mode that doesn't send data.

Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com>
---
 package-lock.json | 43 +++++++++++++++++++++++++++++++++++++++++--
 package.json      |  1 +
 src/App.tsx       |  2 ++
 3 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d3346c1..05551c0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "ghostr",
-  "version": "0.6.4",
+  "version": "0.8.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "ghostr",
-      "version": "0.6.4",
+      "version": "0.8.0",
       "license": "ISC",
       "dependencies": {
         "@nostr-dev-kit/ndk": "^2.18.1",
@@ -20,6 +20,7 @@
         "@tanstack/query-sync-storage-persister": "^5.90.18",
         "@tanstack/react-query": "^5.90.16",
         "@tanstack/react-query-persist-client": "^5.90.18",
+        "@vercel/analytics": "^1.6.1",
         "blossom-client-sdk": "^4.1.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
@@ -2800,6 +2801,44 @@
       "integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==",
       "license": "ISC"
     },
+    "node_modules/@vercel/analytics": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/@vercel/analytics/-/analytics-1.6.1.tgz",
+      "integrity": "sha512-oH9He/bEM+6oKlv3chWuOOcp8Y6fo6/PSro8hEkgCW3pu9/OiCXiUpRUogDh3Fs3LH2sosDrx8CxeOLBEE+afg==",
+      "license": "MPL-2.0",
+      "peerDependencies": {
+        "@remix-run/react": "^2",
+        "@sveltejs/kit": "^1 || ^2",
+        "next": ">= 13",
+        "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
+        },
+        "react": {
+          "optional": true
+        },
+        "svelte": {
+          "optional": true
+        },
+        "vue": {
+          "optional": true
+        },
+        "vue-router": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@vitejs/plugin-react": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-5.1.2.tgz",
diff --git a/package.json b/package.json
index 181246d..385ba49 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "@tanstack/query-sync-storage-persister": "^5.90.18",
     "@tanstack/react-query": "^5.90.16",
     "@tanstack/react-query-persist-client": "^5.90.18",
+    "@vercel/analytics": "^1.6.1",
     "blossom-client-sdk": "^4.1.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
diff --git a/src/App.tsx b/src/App.tsx
index 4a1ea09..9620716 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,6 @@
 import { useEffect } from 'react'
 import { Routes, Route, Navigate } from 'react-router-dom'
+import { Analytics } from '@vercel/analytics/react'
 import { useNDKStore } from '@/stores/ndkStore'
 import { useAuthStore } from '@/stores/authStore'
 import { useUIStore } from '@/stores/uiStore'
@@ -160,6 +161,7 @@ function App() {
         onOpenChange={setLoginModalOpen}
       />
       <Toaster />
+      <Analytics />
     </div>
   )
 }