Add Privatus Analytics to a React app

Add cookieless analytics to a React single-page app built with Vite or Create React App, with the index.html snippet and custom events from components.

# Add Privatus Analytics to a React app

> Add cookieless analytics to a React single-page app built with Vite or Create React App, with the index.html snippet and custom events from components.

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

```html
<script defer src="https://privatusstats.com/js/pa.js" data-site="pa_YOURSITEID" data-modules="engage,auto,vitals,clicks,ask"></script>
```

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

## Events

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

To call the tracker before `pa.js` has loaded, add the
[queue stub](/docs/tracker/javascript-api#queue-stub). For types on
`window.privatus`, add the declarations from the
[JavaScript API](/docs/tracker/javascript-api#typescript) page.

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

View as Markdown

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

html

<script defer src="https://privatusstats.com/js/pa.js" data-site="pa_YOURSITEID" data-modules="engage,auto,vitals,clicks,ask"></script>

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

Events#

tsx

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

To call the tracker before pa.js has loaded, add the queue stub. For types on window.privatus, add the declarations from the JavaScript API page.

For Next.js, use the Next.js guide. For Remix, use the Remix guide.