Integration Guide

Add ObserveX to your app in minutes.

Install the SDK

Add the official ObserveX analytics SDK to your project.

bash

 npm install @subhamxmani/observex-sdk

Wrap your app

Choose your framework and wrap your application with the provider component.

tsx

 import { ReactAnalytics } from "@subhamxmani/observex-sdk";
import { Routes, Route } from "react-router-dom";

function App() {
  return (
    <ReactAnalytics
      pathname={location.pathname}
      respectSessionConsent={true} // Set to true after user gives legal consent
      websiteId="your-wesbite-id"
    >
      {/* Your App Routes Go Here */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/dashboard" element={<Dashboard />} />
      </Routes>
    </ReactAnalytics>
  );
}

Important: Session Tracking & Privacy Compliance

The respectSessionConsent parameter controls how ObserveX segregates multi-page journeys into isolated visitor sessions using temporary client-side tab identifiers.

When set to true:

The SDK provisions a transient token inside sessionStorage. This unlocks highly accurate calculations for Unique Visitors, bounce rates, and user session durations. Data self-destructs instantly when the browser tab closes.

When set to false (or omitted):

The script executes in an entirely stateless environment. Because page events cannot be linked together chronologically, Unique Visitors will not be safely isolated and metric groupings will default to degraded counts.

Regulatory Compliance Warning & Legal Disclaimer

To satisfy global mandates (such as GDPR, ePrivacy, and CCPA/CPRA), you MUST obtain affirmative, explicit consent from the end-user before configuring this flag to true. By using this SDK, you explicitly agree that ObserveX accepts zero liability, legal responsibility, or accountability for unconsented tracking deployments or configuration errors within your host application environment.

Track events & impressions

Use our hooks to send custom events and track element impressions.

useTracker

Send custom events programmatically — button clicks, form submissions, purchases, etc.

tsx

 import { useTracker } from "@subhamxmani/observex-sdk";

function BuyButton() {
  const { track } = useTracker();

  return (
    <button
      onClick={() =>
        track("purchase_click", { product_id: "p_881", price: 29.99 })
      }
    >
      Buy Now
    </button>
  );
}

useImpressionTracker

Track when elements enter the viewport — banners, modals, hero sections.

tsx

 import { useImpressionTracker } from "@subhamxmani/observex-sdk";

function PromoBanner() {
  const bannerRef = useImpressionTracker<HTMLDivElement>("banner_view", {
    campaign: "summer_sale",
  });

  return (
    <div ref={bannerRef} className="promo-banner">
      Summer Sale — 50% off!
    </div>
  );
}