@subhamxmani/observex-sdk
v1.0.2
Published
Lightweight analytics SDK for React and Next.js
Readme
Observex SDK
A lightweight sdk for React/Next.js to monitor your websites easily with Observex.
Get started by simply following these steps:
Step 1: ⚙️ Install SDK
npm i @subhamxmani/observex-sdkStep 2: 📖 Add Provider
React:
import { ReactAnalytics } from "@subhamxmani/observex-sdk";
<ReactAnalytics
pathname={location.pathname}
respectSessionConsent={true} // // Set to true after user gives legal consent
websiteId="YOUR_PROJECT_ID"
>
{/* Your app routes */}
</ReactAnalytics>;Next.js:
// in the root page
import { NextAnalytics } from "@subhamxmani/observex-sdk";
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html
>
<body>
<NextAnalytics
respectSessionConsent={true} // Set to true after user gives legal consent
websiteId="your-wesbite-id"
>
{children}
</NextAnalytics>
</body>
</html>
);
}Step 3: Track events & impressions
useTracker
Send custom events programmatically — button clicks, form submissions, purchases, etc.
track("event_name", metadata)
import { useTracker } from "@subhamxmani/analytics-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.
import { useImpressionTracker } from "@subhamxmani/analytics-sdk";
function PromoBanner() {
const bannerRef =
useImpressionTracker <
HTMLDivElement >
("banner_view",
{
campaign: "summer_sale",
});
return (
<div ref={bannerRef} className="promo-banner">
Summer Sale — 50% off!
</div>
);
}