React · firstrun

Install the package

Terminal

npm i @firstrun/analytics

Add the component

src/main.tsx

import { Analytics } from "@firstrun/analytics/react";

createRoot(document.getElementById("root")!).render(
  <>
    <App />
    <Analytics sourceKey="fr_xxxxxxxxxxxxxxxx" host="https://app.firstrun.app" />
  </>
);

Once, above your routes. It is sourceKey and not key because React consumes a prop called key before the component ever sees it. Vite, Remix and the Next.js Pages Router are all this import.

Send your own events

Nothing is stored and nothing is sent until consent is granted.

TypeScript

import { consent, event, error, log, identify } from "@firstrun/analytics";

consent(true);
event("download_clicked", { platform: "windows" });
error(err, { "url.path": location.pathname });
log({ name: "checkout_stalled", severity: 13, attributes: { step: 3 } });
identify("u_42");

event writes at INFO and error at ERROR, both filling in the conventional attributes. log takes any event you like. Attribute values are JSON, so a number stays a number. useFirstrun() returns the same functions if you prefer a hook.

With consent granted the component also writes page_view (SPA navigations included), session_start, page_leave, outbound_click, file_download, form_submit and web_vital on its own. The props autoPage, autoOutbound, autoVitals, autoForms and trackLeave each turn one group off.