36 lines
908 B
Markdown
36 lines
908 B
Markdown
# React SPA Example
|
|
|
|
A complete example of integrating analytics into a single-page React application.
|
|
|
|
## Setup
|
|
|
|
```bash
|
|
# 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.
|