@twelvebit/web

twelvebit analytics for web apps built with npm: page views (with SPA navigation), goals, identify and payment hints. It sends the same events as the twelvebit script. No dependencies, TypeScript types included, safe to import on the server.

Set up with your coding agent

Paste this prompt into Claude Code, Codex or Cursor in your project:

Add twelvebit analytics with the @twelvebit/web package.
Read https://twelvebit.app/docs/sdks.md first and follow it.
1. Install it: npm i @twelvebit/web
2. Start it once in the browser with my site id (tb_…, from the twelvebit dashboard). In React or Next.js,
   put <TwelvebitProvider> from "@twelvebit/web/react" in the root layout.
3. Track 3 to 8 important actions with track("snake_case_name"), and call identify() after sign-in
   and reset() at logout.
4. Do not also add the twelvebit <script> tag: one of the two, or each page view counts two times.
Then tell me which events you added and where.

Install

npm i @twelvebit/web

Use

import { initTwelvebit, track, identify, reset } from "@twelvebit/web";

initTwelvebit({ siteId: "tb_YOUR_SITE_ID", domain: "example.com" });
track("signup", { plan: "pro" });
identify("user_42", { email: "[email protected]" });
reset(); // at logout

React and Next.js:

import { TwelvebitProvider, useTwelvebit } from "@twelvebit/web/react";

<TwelvebitProvider config={{ siteId: "tb_YOUR_SITE_ID" }}>{children}</TwelvebitProvider>;
const tb = useTwelvebit(); // tb.track("upgrade_click")

Entry points

| Import | What it has | |---|---| | @twelvebit/web | initTwelvebit, track, pageview, identify, payment, reset, flush, getVisitorId, getTrackingParams, buildCrossDomainUrl, createTwelvebit | | @twelvebit/web/react | TwelvebitProvider, useTwelvebit (needs react 17 or later) |

ESM and CommonJS builds, with .d.ts types for both.

Options, API and details: https://twelvebit.app/docs/sdks