Set up Vercel Web Analytics integration

[vercel]

Vercel Web Analytics Integration - Implementation Report

Overview

Successfully implemented and enhanced Vercel Web Analytics integration in the rankq React Native project for automatic page view tracking and custom event support.

What Was Done

Existing Setup Verified

The following Vercel Web Analytics setup was already in place:

1. Package Installed: @vercel/analytics (v1.6.1) in package.json
2. Analytics Service: /src/services/analytics.ts with core functions:
   • initializeAnalytics() - Initializes the analytics script
   • trackPageView(path, title) - Tracks page views
   • trackEvent(name, data) - Tracks custom events
3. App Initialization: App.tsx calls initializeAnalytics() on startup via useEffect

Enhancement Implemented

Enhanced the React Navigation integration to automatically track route changes:

Modified File: src/navigation/AppNavigator.tsx

• Added imports for useRef from React and trackPageView from analytics service
• Added ref to NavigationContainer component
• Implemented onReady callback to capture initial route on app startup
• Implemented onStateChange callback to:
  • Detect route changes
  • Call trackPageView() when navigation occurs
  • Avoid tracking duplicate route transitions

Technical Details

Route Tracking Flow

1. When the app launches, onReady() captures the initial route name
2. When users navigate between screens (Landing → Leaderboard or vice versa), onStateChange() is triggered
3. For each unique route change, trackPageView() is called with:
   • path: Route formatted as /{routeName} (e.g., /Landing, /Leaderboard)
   • title: The route name itself for better tracking clarity
4. Route name is cached in routeNameRef to prevent duplicate tracking

Implementation Benefits

• Automatic Route Tracking: No need to manually add tracking to every screen
• Development & Production Modes: Analytics respects NODE_ENV setting
• Error Handling: All analytics calls wrapped in try-catch blocks to prevent app crashes
• React Native Compatible: Uses inject() function from @vercel/analytics suitable for web/Expo
• TypeScript Safe: Full type safety with proper TypeScript annotations

Files Modified

1. src/navigation/AppNavigator.tsx - Added route tracking with React Navigation integration

Files Not Modified (Already Complete)

1. src/services/analytics.ts - Core analytics service (already well-implemented)
2. App.tsx - Already initializes analytics properly
3. package.json - Already includes @vercel/analytics dependency

Verification Steps Completed

✅ TypeScript compilation successful (no type errors)
✅ App can start without errors (verified with npm run web)
✅ All changes follow existing code patterns and conventions
✅ No breaking changes to existing functionality

How It Works Post-Deployment

1. Enable in Vercel Dashboard: Project admin enables Web Analytics from project settings
2. New Routes Created: After deployment, Vercel creates /_vercel/insights/* routes
3. Automatic Tracking: Every route change in the app automatically sends page view events
4. Data Available: Analytics data becomes visible in Vercel dashboard after user visits
5. Custom Events: Teams can use trackEvent() function for additional analytics

Next Steps for Users

• Deploy app to Vercel using vercel deploy
• Enable Web Analytics in Vercel project settings
• Monitor analytics in the Vercel dashboard
• Optionally add custom event tracking using trackEvent() for specific user interactions

Notes

• Route support is now enabled (addresses the documentation requirement for route tracking)
• The implementation is suitable for both web and mobile (Expo) platforms
• No additional dependencies were required
• All error handling prevents analytics failures from affecting app stability

---

View Project · Web Analytics

Created by itschirag57 with Vercel Agent

---

Summary by cubic

Add automatic page view tracking with Vercel Web Analytics in React Navigation. Captures the initial route and tracks route changes without duplicates for cleaner analytics.

• New Features
  • Updated AppNavigator to add a NavigationContainer ref and onReady/onStateChange handlers.
  • Calls trackPageView on unique route changes using path "/{route}" and title.
  • Caches the last route to prevent duplicate events.

^{Written for commit a3b2ade. Summary will update on new commits.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
rankq	Ready	Preview, Comment	Jan 21, 2026 2:04pm