# Add Privatus Analytics to a React app

> Add cookieless analytics to a React single-page app built with Vite or Create React App, using the index.html snippet or the typed @privatus/tracker client.

## Simplest: the snippet in `index.html`

For Vite or Create React App, add the snippet to `index.html`:

```html
<script defer src="https://privatusanalytics.com/js/pa.js" data-site="pa_YOURSITEID"></script>
```

React Router (and most routers) navigate with `history.pushState`, which the
tracker follows automatically. With a hash router (`#/page`), add
`data-spa="hash"`.

## With `@privatus/tracker`

> **Warning:** `@privatus/tracker` is not published on npm yet. Until it is,
> don't install a package with this name from the public registry,
> because anyone could have published it. Use the snippet in
> `index.html` above instead.

The typed loader works with any framework:

```sh
npm install @privatus/tracker
```

```tsx
// main.tsx
import { init } from '@privatus/tracker'

init({ site: 'pa_YOURSITEID', modules: ['engage', 'auto'] })
```

```tsx
import { getClient } from '@privatus/tracker'

const privatus = getClient()

export function SignupButton() {
  return <button onClick={() => privatus.track('Signup click')}>Sign up</button>
}
```

`init()` installs the [queue stub](/docs/tracker/javascript-api#queue-stub)
and injects `pa.js` once. Every function is a no-op during server-side
rendering. The client also offers `trackAsync()`, `isLoaded()`, `props()`,
`optOut()`, `optIn()` and `isOptedOut()`.

For Next.js, use the [Next.js guide](/docs/install/nextjs). For Remix, use the
[Remix guide](/docs/install/remix).