Traack.it SDK for React Applications

A lightweight SDK for adding analytics with revenue tracking to your React applications using the Traack.it service.

Installation

npm install @traackit/react

Basic usage

1. Wrap your application with the TraackitProvider

import { TraackitProvider } from '@traackit/react';

function App() {
  return (
    <TraackitProvider appKey="YOUR_APP_KEY">
      <YourApp />
    </TraackitProvider>
  );
}

2. Track events in your components

import { useTraackit } from '@traackit/react';

function ProductPage() {
  const { trackEvent, trackRevenue } = useTraackit();

  // Track a regular event
  const handleViewDetails = () => {
    trackEvent('product_viewed', {
      product_id: '123',
      category: 'electronics'
    });
  };

  // Track a purchase with revenue
  const handlePurchase = () => {
    trackRevenue('purchase_completed', {
      amount: 99.99,
      currency: 'USD',
      productId: 'prod_123',
      transactionId: 'tx_456'
    }, {
      payment_method: 'credit_card',
      is_gift: false
    });
  };

  return (
    <div>
      <button onClick={handleViewDetails}>View Details</button>
      <button onClick={handlePurchase}>Buy Now - $99.99</button>
    </div>
  );
}

API reference

TraackitProvider

Props:

• appKey (required): Your Traack.it app key
• options: Configuration options
  • apiUrl: Custom API URL (optional)
  • isDebug: Enable debug logging (optional)
  • appVersion: Your app version (optional)

useTraackit()

Returns:

• trackEvent(eventName, properties): Function to track a standard event
• trackRevenue(eventName, revenueData, properties): Function to track a revenue event

RevenueData

• amount: The monetary amount (required)
• currency: Currency code like 'USD' (required)
• productId: Product identifier (optional)
• transactionId: Transaction identifier (optional)

Credits

Traackit is highly inspired by Aptabase/Plausible. If you're looking for privacy-friendly website analytics, go check them out. They're both awesome! ❤️