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:
<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:
npm install @privatus/tracker
// main.tsx
import { init } from '@privatus/tracker'
init({ site: 'pa_YOURSITEID', modules: ['engage', 'auto'] })
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
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. For Remix, use the Remix guide.