Analytics Integration

Vercel Analytics, Google Analytics, custom events, and performance monitoring.

Overview

Analytics help understand user behavior and app performance.

Key Concepts

Vercel Analytics — Web Vitals tracking
Google Analytics — User behavior analytics
Custom Events — Track specific user actions
Performance Monitoring — Server and client metrics
Error Tracking — Capture and report errors

Code Examples

// app/layout.js
import { Analytics } from '@vercel/analytics/react';

export default function Layout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  );
}

// Custom analytics hook
'use client';
import { useEffect } from 'react';

export function useAnalytics() {
  const trackEvent = (eventName, properties) => {
    // Send to your analytics endpoint
    fetch('/api/analytics', {
      method: 'POST',
      body: JSON.stringify({ event: eventName, properties, timestamp: Date.now() })
    });
  };

  const trackPageView = (url) => {
    trackEvent('page_view', { url });
  };

  const trackClick = (element) => {
    trackEvent('click', { element: element.dataset.trackId });
  };

  return { trackEvent, trackPageView, trackClick };
}

// Usage
'use client';
function ProductCard({ product }) {
  const { trackClick } = useAnalytics();

  return (
    <div 
      data-track-id={`product-${product.id}`}
      onClick={(e) => trackClick(e.currentTarget)}
    >
      {product.name}
    </div>
  );
}

Practice

Implement analytics tracking for user interactions and page views.