⚛️ React Integration

Integrate Sypnia with any React application (Create React App, Vite, etc.).

🚀 Quick Setup

Add the scripts to your index.html:

public/index.html (CRA) or index.html (Vite)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My App</title>
  </head>
  <body>
    <div id="root"></div>
    
    <!-- Sypnia Analytics SDK -->
    <script src="https://sypnia.com/api/sdk/YOUR_PROJECT_KEY"></script>
    
    <!-- Sypnia Survey Widget (optional) -->
    <script src="https://sypnia.com/api/survey/YOUR_PROJECT_KEY"></script>
  </body>
</html>

That's it! Sypnia will automatically start tracking pageviews, sessions, and errors.

📝 Track Custom Events

Track events from any component:

src/components/ProductCard.tsx

interface ProductCardProps {
  product: {
    id: string;
    name: string;
    price: number;
  };
}

export function ProductCard({ product }: ProductCardProps) {
  const handleAddToCart = () => {
    // Track the event
    window.Sypnia?.track('add_to_cart', {
      product_id: product.id,
      product_name: product.name,
      price: product.price
    });
    
    // Add to cart logic...
  };

  return (
    <div>
      <h3>{product.name}</h3>
      <p>${product.price}</p>
      <button onClick={handleAddToCart}>Add to Cart</button>
    </div>
  );
}

👤 User Identification

Identify users when they log in:

// After successful login
const handleLogin = async () => {
  const user = await loginUser(email, password);
  
  // Identify the user
  window.Sypnia?.identify(user.id, {
    email: user.email,
    name: user.name,
    plan: user.subscription?.plan
  });
  
  // Track the login event
  window.Sypnia?.track('login', { method: 'email' });
};

🔄 React Router Integration

Track page views on route changes:

src/App.tsx

import { useEffect } from 'react';
import { useLocation, BrowserRouter, Routes, Route } from 'react-router-dom';

function PageTracker() {
  const location = useLocation();

  useEffect(() => {
    window.Sypnia?.page();
  }, [location.pathname]);

  return null;
}

function App() {
  return (
    <BrowserRouter>
      <PageTracker />
      <Routes>
        {/* Your routes */}
      </Routes>
    </BrowserRouter>
  );
}

🔧 TypeScript Types

Add this to a src/types/sypnia.d.ts file:

src/types/sypnia.d.ts

declare global {
  interface Window {
    Sypnia: {
      track: (event: string, properties?: Record<string, unknown>) => void;
      identify: (userId: string, traits?: Record<string, unknown>) => void;
      page: () => void;
      feedback: (score: number | null, message?: string) => void;
    };
  }
}

export {};

🎣 Custom Hook (Optional)

Create a hook for convenience:

src/hooks/useAnalytics.ts

import { useCallback } from 'react';

export function useAnalytics() {
  const track = useCallback((event: string, properties?: Record<string, unknown>) => {
    window.Sypnia?.track(event, properties);
  }, []);

  const identify = useCallback((userId: string, traits?: Record<string, unknown>) => {
    window.Sypnia?.identify(userId, traits);
  }, []);

  return { track, identify };
}

// Usage:
// const { track } = useAnalytics();
// track('button_clicked', { button: 'signup' });

💡 The SDK is only 2KB gzipped and loads asynchronously - it won't block your app's initial render.

Next.js Vue / Nuxt