React SDK

import { Aside } from ‘@astrojs/starlight/components’;

The React SDK provides hooks and components for easy integration.

Installation

npm install @analyze.rocks/react

Setup

import { AnalyzeProvider } from '@analyze.rocks/react';

function App() {
  return (
    <AnalyzeProvider
      apiKey="YOUR_API_KEY"
      host="https://ingest.analyze.rocks"
    >
      <YourApp />
    </AnalyzeProvider>
  );
}

Provider Options

Option	Type	Default	Description
apiKey	string	required	Your public API key
host	string	https://ingest.analyze.rocks	Ingest endpoint
autoCapture	boolean	true	Auto-track pageviews and clicks
debug	boolean	false	Enable debug logging
cookiePolicy	string	keep	keep, anonymize, none
ipPolicy	string	keep	keep, anonymize, none

Hooks

useAnalyze

import { useAnalyze } from '@analyze.rocks/react';

function SignupButton() {
  const { track, identify, set, reset } = useAnalyze();

  const handleClick = () => {
    track('signup_clicked', {
      button_location: 'header',
      plan: 'pro'
    });
  };

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

useIdentify

import { useIdentify } from '@analyze.rocks/react';
import { useEffect } from 'react';

function UserProfile({ user }) {
  const identify = useIdentify();

  useEffect(() => {
    if (user) {
      identify(user.id, {
        email: user.email,
        name: user.name,
        plan: user.plan,
        company: user.company
      });
    }
  }, [user, identify]);

  return <Profile user={user} />;
}

Call `identify()` after user login to link their anonymous session to their user profile.

usePageView

import { usePageView } from '@analyze.rocks/react';

function ProductPage({ product }) {
  // Track pageview with custom properties
  usePageView({
    product_id: product.id,
    product_category: product.category
  });

  return <ProductDetails product={product} />;
}

E-commerce Tracking

import { useAnalyze } from '@analyze.rocks/react';

function AddToCartButton({ product }) {
  const { track } = useAnalyze();

  const handleAddToCart = () => {
    track('$cart_add', {
      product_id: product.id,
      product_name: product.name,
      price: product.price,
      quantity: 1,
      currency: 'EUR'
    });

    // Add to cart logic
  };

  return <button onClick={handleAddToCart}>Add to Cart</button>;
}

TypeScript Support

Full TypeScript definitions are included:

import { useAnalyze, TrackProperties } from '@analyze.rocks/react';

interface SignupEventProps extends TrackProperties {
  plan: 'free' | 'pro' | 'enterprise';
  source: string;
}

function SignupForm() {
  const { track } = useAnalyze();

  const handleSubmit = (plan: string) => {
    track<SignupEventProps>('signup_completed', {
      plan: plan as 'free' | 'pro' | 'enterprise',
      source: 'landing_page'
    });
  };

  return <form onSubmit={() => handleSubmit('pro')}>...</form>;
}

Next Steps

• Next.js SDK – Next.js-specific features
• JavaScript SDK – Core SDK reference
• Custom Events – Event naming best practices