Loading...
Loading...
Add Temps analytics to React applications with comprehensive tracking capabilities including page views, custom events, scroll tracking, engagement monitoring, session recording, and Web Vitals performance metrics. Use when the user wants to: (1) Add analytics to a React app (Next.js App Router, Next.js Pages Router, Vite, Create React App, or Remix), (2) Track user events or interactions, (3) Monitor scroll depth or element visibility, (4) Add session recording/replay, (5) Track Web Vitals or performance metrics, (6) Measure user engagement or time on page, (7) Identify users for analytics, (8) Set up product analytics or telemetry. Triggers: "add analytics", "track events", "session recording", "web vitals", "user tracking", "temps analytics", "react analytics".
npx skill4agent add gotempsh/temps add-react-analyticsnpm install @temps-sdk/react-analytics
# or: yarn add / pnpm add / bun add// app/layout.tsx
import { TempsAnalyticsProvider } from '@temps-sdk/react-analytics';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<TempsAnalyticsProvider basePath="/api/_temps">
{children}
</TempsAnalyticsProvider>
</body>
</html>
);
}// pages/_app.tsx
import { TempsAnalyticsProvider } from '@temps-sdk/react-analytics';
import type { AppProps } from 'next/app';
export default function App({ Component, pageProps }: AppProps) {
return (
<TempsAnalyticsProvider basePath="/api/_temps">
<Component {...pageProps} />
</TempsAnalyticsProvider>
);
}// src/main.tsx or src/index.tsx
import { TempsAnalyticsProvider } from '@temps-sdk/react-analytics';
ReactDOM.createRoot(document.getElementById('root')!).render(
<TempsAnalyticsProvider basePath="/api/_temps">
<App />
</TempsAnalyticsProvider>
);// app/root.tsx
import { TempsAnalyticsProvider } from '@temps-sdk/react-analytics';
export default function App() {
return (
<html lang="en">
<body>
<TempsAnalyticsProvider basePath="/api/_temps">
<Outlet />
</TempsAnalyticsProvider>
</body>
</html>
);
}<TempsAnalyticsProvider
basePath="/api/_temps"
autoTrack={{
pageviews: true, // Auto-track page views
pageLeave: true, // Track time on page
speedAnalytics: true, // Track Web Vitals
engagement: true, // Track engagement
engagementInterval: 30000,
}}
debug={process.env.NODE_ENV === 'development'}
>
{children}
</TempsAnalyticsProvider>| Hook | Purpose |
|---|---|
| Track custom events |
| Access analytics context, identify users |
| Track element visibility on scroll |
| Track page leave and time on page |
| Heartbeat engagement monitoring |
| Web Vitals (LCP, FCP, CLS, TTFB, INP) |
| Manual page view tracking |
'use client';
import { useTrackEvent } from '@temps-sdk/react-analytics';
function MyComponent() {
const trackEvent = useTrackEvent();
const handleClick = () => {
trackEvent('button_click', {
button_id: 'subscribe',
plan: 'premium'
});
};
return <button onClick={handleClick}>Subscribe</button>;
}'use client';
import { useAnalytics } from '@temps-sdk/react-analytics';
import { useEffect } from 'react';
function UserProfile({ user }) {
const { identify } = useAnalytics();
useEffect(() => {
if (user) {
identify(user.id, {
email: user.email,
name: user.name,
plan: user.subscription?.plan
});
}
}, [user, identify]);
return <div>Profile</div>;
}import { SessionRecordingProvider } from '@temps-sdk/react-analytics';
<SessionRecordingProvider
enabled={true}
maskAllInputs={true}
blockClass="sensitive"
>
{children}
</SessionRecordingProvider>/api/_temps