Analytics Setup

Jose Madrid Salsa uses multiple analytics platforms: Amplitude for product analytics, Google Analytics for traffic analysis, and Vercel Analytics for web vitals.

Amplitude

Setup

Amplitude is initialized in lib/analytics/amplitude.ts:

import * as amplitude from '@amplitude/analytics-browser'
import { sessionReplayPlugin } from '@amplitude/plugin-session-replay-browser'

export const initAmplitude = () => {
  const apiKey = process.env.NEXT_PUBLIC_AMPLITUDE_API_KEY
  if (!apiKey) {
    console.warn('Amplitude API key not found. Analytics will not be tracked.')
    return
  }

  amplitude.init(apiKey, {
    defaultTracking: {
      sessions: true,
      pageViews: true,
      formInteractions: true,
      fileDownloads: true,
    },
  })

  // Session replay for debugging user experiences
  amplitude.add(sessionReplayPlugin())
}

Set the environment variable:

NEXT_PUBLIC_AMPLITUDE_API_KEY="your-amplitude-api-key"

Tracking Events

import { trackEvent } from '@/lib/analytics/amplitude'

// Track a custom event
trackEvent('product_viewed', {
  productId: product.id,
  productName: product.name,
  heatLevel: product.heatLevel,
  price: product.price,
})

// Track a purchase
trackEvent('order_completed', {
  orderId: order.id,
  total: order.total,
  itemCount: order.items.length,
})

User Identification

import { identifyUser, resetUser } from '@/lib/analytics/amplitude'

// On login
identifyUser(user.id, {
  email: user.email,
  role: user.role,
  name: user.name,
})

// On logout
resetUser()

Default Tracking

Amplitude automatically tracks:

Sessions - Start and end times
Page Views - Every route change
Form Interactions - Form starts and completions
File Downloads - Download link clicks

Google Analytics

Configuration

Google Analytics settings are managed through the admin panel and stored in the database via lib/google-analytics-config.ts.

Set the measurement ID:

NEXT_PUBLIC_GOOGLE_ANALYTICS_ID="G-XXXXXXXXXX"

Admin Dashboard Configuration

The analytics admin at /admin/analytics allows customizing chart definitions. Each chart is defined by:

interface GoogleAnalyticsChartDefinition {
  id: string
  title: string
  description: string | null
  metric: string        // e.g., 'sessions', 'totalUsers'
  dimension: string     // e.g., 'date', 'deviceCategory'
  chartType: 'bar' | 'line' | 'pie'
  limit: number | null
  color: 'indigo' | 'emerald' | 'amber' | 'rose'
}

Available Metrics

Metric	Description
`sessions`	Total number of visits
`totalUsers`	Unique visitors
`newUsers`	First-time visitors
`engagedSessions`	Sessions longer than 10 seconds
`eventCount`	Total recorded events
`conversions`	Conversion events
`bounceRate`	Percentage of single-page sessions
`averageSessionDuration`	Average session length
`screenPageViews`	Page views
`purchaseRevenue`	E-commerce revenue

Available Dimensions

Dimension	Description
`date`	Calendar day
`sessionDefaultChannelGrouping`	Traffic channel (Organic, Paid, etc.)
`sessionSourceMedium`	Source and medium
`deviceCategory`	Desktop, mobile, tablet
`country`	User country
`city`	User city
`pageTitle`	Page title
`pagePathPlusQueryString`	Full page path
`landingPage`	Session entry page

Default Charts

Three charts are created by default:

Sessions by Source/Medium - Bar chart showing top traffic sources
Engaged Sessions Over Time - Line chart of engagement trends
Users by Device Category - Pie chart of device breakdown

Adding Custom Charts

import { addGoogleAnalyticsChartDefinition } from '@/lib/google-analytics-config'

await addGoogleAnalyticsChartDefinition({
  title: 'Revenue Over Time',
  description: 'Daily purchase revenue',
  metric: 'purchaseRevenue',
  dimension: 'date',
  chartType: 'line',
  limit: 30,
  color: 'emerald',
  updatedBy: user.id,
})

Programmatic Settings Management

import {
  getGoogleAnalyticsSettings,
  saveGoogleAnalyticsSettings,
} from '@/lib/google-analytics-config'

// Read settings
const settings = await getGoogleAnalyticsSettings()

// Update settings
await saveGoogleAnalyticsSettings({
  measurementId: 'G-XXXXXXXXXX',
  propertyId: '123456789',
  dataStreamId: '987654321',
  updatedBy: user.id,
})

Vercel Analytics

Vercel Analytics provides Core Web Vitals monitoring. It is included in the root layout:

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

// In app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  )
}

No additional configuration is needed -- Vercel Analytics is automatically active on Vercel deployments.

Sentry Error Tracking

Sentry is configured for error monitoring across all runtimes:

// sentry.client.config.ts
// Captures client-side JavaScript errors

// sentry.server.config.ts
// Captures server-side Node.js errors

// sentry.edge.config.ts
// Captures Edge Runtime errors

Set the Sentry DSN:

SENTRY_DSN="https://xxx@xxx.ingest.sentry.io/xxx"

GrowthBook (Feature Flags)

The project includes GrowthBook for A/B testing and feature flags:

import { GrowthBook } from '@growthbook/growthbook-react'

Optional Analytics

All analytics services are optional. The app runs without any analytics keys set. Missing keys produce console warnings but do not affect functionality.

Key Files

amplitude.ts

date-range.ts

google-analytics.tsx

How is this guide?

Analytics Setup

On this page