Updated 20 October 2026

React (Vite) analytics

Privacy-first, cookieless analytics for React and Vite: one component that draws nothing, bundled into your own code.

In short

  • npm i trckable, then render <Analytics /> once. It is bundled into your app, so there is no separate file to request.
  • Starts exactly one tracker, even under StrictMode, and counts route changes by itself.
  • No cookie banner needed in cookieless mode, no IP address stored, and nothing loaded from another company.

Install on React (Vite)#

Use your own site id and server address in the code below. On trckable Cloud the address is https://cloud.trckable.com.

Install the package. It is MIT licensed and has no dependencies:

npm i trckable

Render the component once, near the top of your app:

import { Analytics } from 'trckable/react'

export default function App() {
  return (
    <>
      <Analytics site="tkb_a1b2c3d4" host="https://stats.example.com" />
      {/* your app */}
    </>
  )
}

On trckable Cloud, the host is https://cloud.trckable.com. To count a goal from code:

import { track } from 'trckable'

track('signup', { plan: 'pro' })

Open your site once, then run npx trckable doctor --host https://stats.example.com --site tkb_a1b2c3d4 --url https://example.com. It only reads, and tells you whether the tag is on the page and the server answers.

What to know about React (Vite)#

  • StrictMode is handled. The double effect in development starts one tracker, not two.
  • React Router, TanStack Router and the rest are counted because they use the history API.
  • Hash routers need the hash option. Pass hash to the component and turn on Settings → General → Reports → Pages after the #.
  • Options are read once at startup, like the attributes of the script tag. Change them in code and reload.
  • A bundled tracker updates when you deploy. Turning a module on in the dashboard reaches an app with the package on its next build; the script tag picks it up within the hour.

Goals and revenue#

A goal needs no code: put an attribute on the element and each click is counted.

<button data-trckable-goal="signup" data-trckable-goal-plan="pro">Start trial</button>

Connect Stripe, Paddle, Lemon Squeezy, Polar or Dodo Payments with one key, and each payment is credited to the visit that earned it, so revenue shows next to traffic. See revenue attribution.

Questions#

How much does it add to my bundle?
About 2 KB gzipped. The npm docs state CI's figure and the budget it fails above, so the number on the docs page is the one to trust.
Do I need a cookie banner on my React (Vite) site?
Not for the counting itself. In cookieless mode (add data-cookieless to the tag) nothing is stored on the visitor's device and no IP address is kept. Whether your site needs a banner for other reasons is a question for your own situation; the cookie banner guide explains the rules in plain words.
Can ad blockers stop it?
A blocker can block any script, and trckable does not claim otherwise. Sending events through your own domain removes the separate analytics file a blocklist would match by name, which is the accurate setup. The same-origin proxy guide shows how.
Is it free for a React (Vite) site?
The server is open source and free to self-host, and the tracker is MIT licensed. If you would rather not run a server, trckable Cloud runs it for you; the plans are on the pricing page.

Keep reading#

Other stacks#

Start free