Rewatched - Product Analytics & In-App Guidance

Installation

Install the Rewatched React SDK via npm or yarn:

npm install @rewatched/react
# or
yarn add @rewatched/react

Provider Setup

Wrap your application with the RewatchedProvider to enable analytics throughout your app:

// app/layout.tsx or pages/_app.tsx
import { RewatchedProvider } from '@rewatched/react';

export default function RootLayout({ children }) {
  return (
    <RewatchedProvider
      sdkKey="YOUR_SDK_KEY"
      config={{
        apiHost: 'https://api.rewatched.io',
        autocapture: true,
        sessionRecording: true,
        capturePageviews: true
      }}
    >
      {children}
    </RewatchedProvider>
  );
}

Next.js 13+ App Router: Add 'use client' directive if wrapping in a client component, or use the provider in layout.tsx with client-side rendering.

useRewatched Hook

Access the Rewatched instance anywhere in your component tree:

'use client';

import { useRewatched } from '@rewatched/react';

export function SignupButton() {
  const rewatched = useRewatched();

  const handleClick = () => {
    // Track custom event
    rewatched.capture('signup_button_clicked', {
      location: 'homepage',
      variant: 'primary'
    });

    // Navigate to signup
    window.location.href = '/signup';
  };

  return (
    <button onClick={handleClick}>
      Sign up
    </button>
  );
}

usePageTracking Hook

Automatically track page views in SPAs (especially useful for React Router or Next.js):

'use client';

import { usePageTracking } from '@rewatched/react';
import { usePathname } from 'next/navigation';

export function Analytics() {
  const pathname = usePathname();

  usePageTracking(pathname, {
    // Optional: Add custom properties to page views
    properties: {
      section: pathname.split('/')[1] || 'home'
    }
  });

  return null;
}

// Use in layout.tsx
export default function Layout({ children }) {
  return (
    <>
      <Analytics />
      {children}
    </>
  );
}

useIdentify Hook

Identify users when they log in or their profile is loaded:

'use client';

import { useIdentify } from '@rewatched/react';
import { useEffect } from 'react';

export function UserIdentifier({ user }) {
  const identify = useIdentify();

  useEffect(() => {
    if (user) {
      identify(user.id, {
        email: user.email,
        name: user.name,
        plan: user.subscription.plan,
        signupDate: user.createdAt,
        // Any custom properties
        company: user.company,
        role: user.role
      });
    }
  }, [user, identify]);

  return null;
}

useEvent Hook

Track events with a dedicated hook that handles dependencies correctly:

'use client';

import { useEvent } from '@rewatched/react';

export function VideoPlayer({ videoId, title }) {
  const trackEvent = useEvent();

  const handlePlay = () => {
    trackEvent('video_played', {
      videoId,
      title,
      timestamp: new Date().toISOString()
    });
  };

  const handleComplete = () => {
    trackEvent('video_completed', {
      videoId,
      title
    });
  };

  return (
    <video
      onPlay={handlePlay}
      onEnded={handleComplete}
    >
      {/* video content */}
    </video>
  );
}

Feature Component

Tag entire components as features for automatic click tracking:

'use client';

import { Feature } from '@rewatched/react';

export function PricingCard({ plan }) {
  return (
    <Feature name="pricing_card" properties={{ plan: plan.name }}>
      <div className="pricing-card">
        <h3>{plan.name}</h3>
        <p className="price">{plan.price}</p>
        <button>Choose Plan</button>
      </div>
    </Feature>
  );
}

// All clicks within the Feature component
// are automatically tracked with the feature name

Next.js 13+ App Router

Special considerations for Next.js App Router with Server Components:

Client Components

Always use 'use client' directive for components that use Rewatched hooks:

'use client';  // Required!

import { useRewatched } from '@rewatched/react';

export function MyComponent() {
  const rewatched = useRewatched();
  // ...
}

Layout Configuration

Recommended setup for app/layout.tsx:

// app/providers.tsx
'use client';

import { RewatchedProvider } from '@rewatched/react';

export function Providers({ children }) {
  return (
    <RewatchedProvider sdkKey={process.env.NEXT_PUBLIC_REWATCHED_KEY}>
      {children}
    </RewatchedProvider>
  );
}

// app/layout.tsx
import { Providers } from './providers';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Providers>
          {children}
        </Providers>
      </body>
    </html>
  );
}

TypeScript Support

The React SDK is fully typed. Define your event properties for type safety:

import { useEvent } from '@rewatched/react';

interface VideoEventProperties {
  videoId: string;
  title: string;
  duration?: number;
}

export function VideoPlayer() {
  const trackEvent = useEvent<VideoEventProperties>();

  const handlePlay = () => {
    trackEvent('video_played', {
      videoId: 'abc123',
      title: 'Intro Video',
      // TypeScript will enforce these properties
    });
  };

  return <video onPlay={handlePlay} />;
}

Best Practices

Initialize once at the root

Set up RewatchedProvider in your top-level layout, not in individual pages.

Use environment variables

Store your SDK key in .env.local as NEXT_PUBLIC_REWATCHED_KEY for security.

Track meaningful events

Focus on business-critical actions: signups, purchases, feature usage. Avoid over-tracking.

Don't track PII without consent

Avoid tracking passwords, credit cards, or sensitive data. Use privacy controls.

Next Steps

Track Events API

Learn about all event tracking methods

Read guide →

User Identification

Identify users and enrich visitor data