Install
Add the SDK, list your events once, and send the first one.
npm install @spoar/sdk@next2.0 prereleases are on the next tag. Until 2.0.0, latest is a 0.0.1 placeholder, and 1.x is the separate @remcostoeten/analytics package.
events.ts lists every custom event once, for the browser and the server:
import type { NoProps } from "@spoar/sdk";
export type Events = {
signup: { plan: "free" | "pro" };
newsletter_subscribed: NoProps;
};analytics.ts creates the client:
import { createAnalytics } from "@spoar/sdk";
import { errors, speedInsights } from "@spoar/sdk/plugins";
import type { Events } from "./events";
export const analytics = createAnalytics<Events>({
project: "remcostoeten.nl",
key: "pk_...",
endpoint: "/_ra",
plugins: [speedInsights(), errors()],
});
analytics.track("signup", { plan: "pro" });
analytics.track("newsletter_subscribed");Pageviews are sent on load and on client-side navigation unless pageviews: false.
Options left out are read from the JSON in NEXT_PUBLIC_RA_CONFIG, PUBLIC_RA_CONFIG or VITE_RA_CONFIG, so the key and endpoint can live in the environment:
NEXT_PUBLIC_RA_CONFIG='{"project":"remcostoeten.nl","key":"pk_...","endpoint":"/_ra"}'Entries
| Import | Contains |
|---|---|
@spoar/sdk | createAnalytics, definePlugin and the types |
@spoar/sdk/plugins | Every plugin, each in its own file |
@spoar/sdk/react | AnalyticsProvider, useAnalytics, TrackClick, ErrorBoundary, useRoutePageviews, computeRoute |
@spoar/sdk/next | <Analytics />, the App Router route adapter |
@spoar/sdk/server | createServerAnalytics for route handlers and server actions |
@spoar/sdk/proxy | createProxy and createPageCounter |
Size budgets, gzipped: core 5 KB, react 1.5 KB, next 1 KB, each plugin 0.6 KB (errors 0.7 KB, speedInsights 2.5 KB).