dishub-analytics.sdk

The official tracking SDK for Dishub Analytics. Lightweight, TypeScript-first, and optimized for real-time performance.

🚀 Features

• Collector SDK: Lightweight tracking engine.
• Visualization Dashboard: Standalone React component package (dishub-analytics.dashboard).
• Real-time Tracking: Sub-second event reporting.
• Proactive Disconnect: Automatic session cleanup using keepalive beacons.
• Smart Heartbeats: Monitors tab visibility to ensure accuracy.
• Identity Support: Link sessions to authenticated users.
• React Ready: Includes a built-in AnalyticsProvider and useAnalytics hook.

📦 Installation

npm install dishub-analytics.sdk

🛠️ Usage

Vanilla JavaScript

import { AnalyticsClient } from 'dishub-analytics.sdk';

const analytics = new AnalyticsClient({
  apiKey: 'YOUR_API_KEY',
  endpoint: 'https://dishubanalitics-production.up.railway.app/api/v1',
  trackClicks: true,
  trackHeartbeat: true
});

// Initialize session
await analytics.init();

// Track custom events
analytics.trackEvent('purchase_completed', 'ecommerce', { amount: 99.99 });

// Identify user
analytics.identify('user_123', 'John Doe');

React / Next.js

Wrap your application with the AnalyticsProvider:

import { AnalyticsProvider } from 'dishub-analytics.sdk';

function App() {
  return (
    <AnalyticsProvider 
      apiKey="YOUR_API_KEY"
      endpoint="https://analytics-api.example.com"
      config={{ trackClicks: true }}
    >
      <MyRoutes />
    </AnalyticsProvider>
  );
}

Use the hook in your components:

import { useAnalytics } from 'dishub-analytics.sdk';

function CheckoutButton() {
  const { trackEvent, identify } = useAnalytics();

  const handleCheckout = async () => {
    trackEvent('checkout_clicked');
    // ...
  };

  return <button onClick={handleCheckout}>Checkout</button>;
}

📖 Documentation

For a complete walkthrough on integrating the SDK with Next.js (App Router), custom identifying users, and advanced event tracking, see our Complete Integration Guide.

📄 License

MIT © Dishub