Installation/npm, React and Next.js

npm, React and Next.js

Install the SDK as a package when you want typed imports and programmatic control. Works in any bundled frontend, with examples for React and Next.js.

Install the package

shell

npm install @analyse.net/sdk

The package is dependency free and ships TypeScript types.

Plain JavaScript or any framework

Call init once at startup. Automatic pageview and page leave tracking start from that call, including SPA route changes.

import { init } from "@analyse.net/sdk";

init({ publicKey: "pk_live_your_key" });

React (Vite, CRA)

Initialize before the app renders, in your entry file:

tsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { init } from "@analyse.net/sdk";
import App from "./App";

init({ publicKey: "pk_live_your_key" });

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

Next.js (App Router)

The SDK runs in the browser, so wrap the init call in a client component:

tsx

"use client";

import { useEffect } from "react";
import { init } from "@analyse.net/sdk";

export function AnalyseProvider({
  children,
}: {
  children: React.ReactNode;
}) {
  useEffect(() => {
    init({ publicKey: "pk_live_your_key" });
  }, []);

  return children;
}

Then wrap your root layout with it:

tsx

import { AnalyseProvider } from "./analyse-provider";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <AnalyseProvider>{children}</AnalyseProvider>
      </body>
    </html>
  );
}

The browser API

Function	What it does
`init(config)`	Initialize the client. Safe to call once.
`track(name, properties?)`	Record a custom event.
`identify(userId, traits?)`	Link this device to a known user.
`page()`	Send a pageview manually.
`reset()`	Clear identity and session, for example on logout.

Events are batched and flushed every few seconds, and on page unload via sendBeacon, so tracking does not block navigation.