React

Initialize the SDK from a component that mounts once near the root of your application.

import { useEffect } from "react";
import { initUcoderInsight } from "ucoder-insight";

export default function Analytics() {
  useEffect(() => {
    void initUcoderInsight("YOUR_PUBLIC_TRACKING_ID");
  }, []);

  return null;
}

Where to render it

Render <Analytics /> once, near the root of your component tree — for example in App.tsx:

function App() {
  return (
    <>
      <Analytics />
      <YourAppRoutes />
    </>
  );
}

Do not initialize the SDK separately in every route component.

Tracking route changes in a single-page app

React Router (and most other client-side routers) navigate by calling the browser's history.pushState / history.replaceState APIs, or by triggering popstate (back/forward button), instead of a full page reload. A normal analytics script that only listens for the load event would miss every one of these navigations.

Ucoder Insight handles this automatically once initialized:

• It patches history.pushState and history.replaceState so that every programmatic navigation (e.g. navigate("/pricing"), <Link to="/about" />) is detected the moment it happens.
• It listens for the native popstate event to catch browser back/forward navigation.
• On each detected change, it records a new page view for the updated URL — automatically, with no extra code in your routes or components.

You do not need to call any trackPageView()-style function manually — as long as <Analytics /> is mounted once at the root, every route change is picked up automatically for the lifetime of the page.

See Configuration for supported options.