analytics/examples/react-spa/App.tsx

/**
 * Example React SPA with Analytics Integration
 *
 * This demonstrates a complete analytics setup in a React application.
 */

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import { AnalyticsSetup } from './analytics-setup';
import { usePageTracking } from './use-page-tracking';
import { useClickTracking, useOutboundLinkTracking } from './use-click-tracking';

// ─────────────────────────────────────────────────────────────────────────────
// Root Layout (with page tracking)
// ─────────────────────────────────────────────────────────────────────────────

function RootLayout({ children }: { children: React.ReactNode }) {
  // Automatic page view tracking on route changes
  usePageTracking({
    excludePaths: ['/admin'], // Don't track admin pages
  });

  return (
    <div className="app">
      <header>
        <nav>
          <Link to="/">Home</Link>
          <Link to="/products">Products</Link>
          <Link to="/about">About</Link>
        </nav>
      </header>
      <main>{children}</main>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Home Page
// ─────────────────────────────────────────────────────────────────────────────

function HomePage() {
  const { createClickHandler } = useClickTracking();

  return (
    <div>
      <h1>Welcome to Our App</h1>
      <p>The best app for doing app things.</p>

      {/* Track CTA button clicks */}
      <button
        onClick={createClickHandler({
          elementId: 'hero-cta',
          category: 'cta',
          metadata: { variant: 'primary' },
        })}
      >
        Get Started Free
      </button>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Products Page
// ─────────────────────────────────────────────────────────────────────────────

interface Product {
  id: string;
  name: string;
  price: number;
}

function ProductsPage() {
  const { trackClick } = useClickTracking();

  const products: Product[] = [
    { id: 'prod-1', name: 'Widget Pro', price: 99 },
    { id: 'prod-2', name: 'Widget Basic', price: 49 },
    { id: 'prod-3', name: 'Widget Enterprise', price: 299 },
  ];

  const handleProductClick = (product: Product) => {
    // Track product card clicks
    trackClick({
      elementId: 'product-card',
      category: 'product',
      metadata: {
        productId: product.id,
        productName: product.name,
        productPrice: product.price,
      },
    });
  };

  return (
    <div>
      <h1>Our Products</h1>
      <div className="product-grid">
        {products.map((product) => (
          <div
            key={product.id}
            className="product-card"
            onClick={() => handleProductClick(product)}
          >
            <h3>{product.name}</h3>
            <p>${product.price}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// About Page (with outbound link tracking)
// ─────────────────────────────────────────────────────────────────────────────

function AboutPage() {
  const { trackOutboundClick } = useOutboundLinkTracking();

  return (
    <div>
      <h1>About Us</h1>
      <p>We make great software.</p>

      <p>
        Follow us on{' '}
        <a
          href="https://twitter.com/yourcompany"
          target="_blank"
          rel="noopener noreferrer"
          onClick={() => trackOutboundClick('https://twitter.com/yourcompany')}
        >
          Twitter
        </a>
        {' '}and{' '}
        <a
          href="https://github.com/yourcompany"
          target="_blank"
          rel="noopener noreferrer"
          onClick={() => trackOutboundClick('https://github.com/yourcompany')}
        >
          GitHub
        </a>
      </p>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// App Root
// ─────────────────────────────────────────────────────────────────────────────

export function App() {
  return (
    <AnalyticsSetup>
      <BrowserRouter>
        <RootLayout>
          <Routes>
            <Route path="/" element={<HomePage />} />
            <Route path="/products" element={<ProductsPage />} />
            <Route path="/about" element={<AboutPage />} />
          </Routes>
        </RootLayout>
      </BrowserRouter>
    </AnalyticsSetup>
  );
}

export default App;