82 lines
1.9 KiB
TypeScript
82 lines
1.9 KiB
TypeScript
/**
|
|
* Analytics Provider Setup
|
|
*
|
|
* This file shows how to configure the analytics provider for a React SPA.
|
|
* Wrap your application root with this provider.
|
|
*/
|
|
|
|
import { AnalyticsProvider } from '@analytics/client/react';
|
|
import type { ReactNode } from 'react';
|
|
|
|
interface AnalyticsSetupProps {
|
|
children: ReactNode;
|
|
}
|
|
|
|
/**
|
|
* Get analytics configuration based on environment.
|
|
*
|
|
* In production, point to your analytics backend.
|
|
* In development, you can use a local instance or disable tracking.
|
|
*/
|
|
function getAnalyticsConfig() {
|
|
const isDev = process.env.NODE_ENV === 'development';
|
|
|
|
return {
|
|
// Your analytics backend URL
|
|
apiBaseUrl: isDev
|
|
? 'http://localhost:4001'
|
|
: process.env.REACT_APP_ANALYTICS_URL || 'https://analytics.yoursite.com',
|
|
|
|
// Unique identifier for this application
|
|
appName: 'my-react-app',
|
|
|
|
// Disable in development if you don't want noise
|
|
enabled: !isDev || process.env.REACT_APP_ANALYTICS_DEV === 'true',
|
|
|
|
// Enable debug logging in development
|
|
enableDebugLogging: isDev,
|
|
|
|
// Automatic scroll depth tracking
|
|
scrollTracking: {
|
|
enabled: true,
|
|
thresholds: [25, 50, 75, 100] as const, // Percentages to track
|
|
debounceMs: 150,
|
|
},
|
|
|
|
// Batch settings for performance
|
|
batchSize: 10,
|
|
batchInterval: 5000, // 5 seconds
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Analytics provider wrapper.
|
|
*
|
|
* Place this at the root of your application, typically in App.tsx or index.tsx.
|
|
*/
|
|
export function AnalyticsSetup({ children }: AnalyticsSetupProps) {
|
|
const config = getAnalyticsConfig();
|
|
|
|
return (
|
|
<AnalyticsProvider config={config}>
|
|
{children}
|
|
</AnalyticsProvider>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Example usage in App.tsx:
|
|
*
|
|
* ```tsx
|
|
* import { AnalyticsSetup } from './analytics-setup';
|
|
* import { Router } from './router';
|
|
*
|
|
* export function App() {
|
|
* return (
|
|
* <AnalyticsSetup>
|
|
* <Router />
|
|
* </AnalyticsSetup>
|
|
* );
|
|
* }
|
|
* ```
|
|
*/
|