Skip to main content

Source: ocean/docs/analytics.md | ✏️ Edit on GitHub

Vercel Analytics

This project is configured with Vercel Analytics for tracking page views and web vitals.

Setup​

Analytics is automatically enabled when deploying to Vercel. The <Analytics /> component is already integrated in the main layout.

Configuration​

Basic Setup (Already Done)​

The Analytics component is added in /src/main.tsx:

import { Analytics } from '@vercel/analytics/react'

// In the app render:
;<Analytics />

Custom Events​

You can track custom events using the track function:

import { track } from '@vercel/analytics'

// Track a custom event
track('signup', {
  method: 'email',
  location: 'header',
})

Environment Variables​

Analytics can be controlled via environment variables:

  • VITE_ENABLE_ANALYTICS - Set to false to disable analytics in development
  • VITE_ANALYTICS_ID - Optional: Custom analytics ID (if using a different provider)

Privacy & GDPR​

Vercel Analytics is privacy-friendly:

  • No cookies are used
  • No personal data is collected
  • IP addresses are not stored
  • GDPR compliant by default

Debugging​

To debug analytics in development:

  1. Open browser DevTools
  2. Go to Network tab
  3. Look for requests to /_vercel/insights/event

Custom Configuration​

You can pass props to the Analytics component:

<Analytics
  mode={'production'} // or 'development'
  debug={false} // Set to true for console logs
/>

Web Vitals​

The project also includes reportWebVitals which sends performance metrics. This is configured in /src/main.tsx and /src/reportWebVitals.ts.

Usage Examples​

Track User Actions​

import { track } from '@vercel/analytics'

function UpgradeButton() {
  const handleUpgrade = () => {
    track('upgrade_clicked', {
      plan: 'pro',
      price: 29,
    })
    // Handle upgrade logic
  }

  return <Button onClick={handleUpgrade}>Upgrade to Pro</Button>
}

Track Form Submissions​

import { track } from '@vercel/analytics'

function ContactForm() {
  const handleSubmit = (data) => {
    track('form_submitted', {
      form_name: 'contact',
      has_message: !!data.message,
    })
    // Handle form submission
  }

  return <form onSubmit={handleSubmit}>...</form>
}

Track Feature Usage​

import { track } from '@vercel/analytics'

function FeatureToggle() {
  const handleToggle = (enabled: boolean) => {
    track('feature_toggled', {
      feature: 'dark_mode',
      enabled,
    })
  }

  return <Switch onChange={handleToggle} />
}

Best Practices​

  1. Keep event names consistent - Use snake_case for event names
  2. Limit properties - Keep event properties minimal and non-personal
  3. Track meaningful actions - Focus on user actions that impact business metrics
  4. Test in production - Analytics only works when deployed to Vercel
  5. Document events - Keep a list of all tracked events and their properties

Troubleshooting​

Analytics not showing up​

  1. Ensure you're deployed to Vercel
  2. Check that the domain is verified in Vercel dashboard
  3. Wait 10-15 minutes for data to appear
  4. Check browser ad blockers aren't blocking requests

Events not tracking​

  1. Check browser console for errors
  2. Verify event names don't contain special characters
  3. Ensure properties are serializable (no functions, symbols)
  4. Check network tab for failed requests