analytics/examples/react-spa

React SPA Example

A complete example of integrating analytics into a single-page React application.

Setup

# Install the client SDK
npm install @analytics/client

Files

• analytics-setup.tsx - Provider configuration
• use-page-tracking.ts - Automatic page view tracking hook
• use-click-tracking.ts - Click tracking utilities
• use-scroll-tracking.ts - Scroll depth tracking (built into provider)
• App.tsx - Example application with analytics

Key Concepts

1. Provider Setup

The AnalyticsProvider wraps your app and provides tracking context to all components.

2. Automatic Page Tracking

Use the usePageTracking hook in your layout to automatically track route changes.

3. Event Tracking

Use useAnalytics() hook to access tracking methods in any component.

4. Consent-Free

No consent banner needed - all session data is held in memory only.