Doku
Die Dokumentation durchsuchen

Add Privatus Analytics to Remix

Add cookieless analytics to Remix or React Router 7 framework mode in app/root.tsx, and track conversions from actions with the server-side ingest API.

Als Markdown anzeigen

Add the snippet to the <head> in app/root.tsx:

tsx 
import { Links, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react'

export default function App() {
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
        <script defer src="https://privatusanalytics.com/js/pa.js" data-site="pa_YOURSITEID" />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  )
}

Client navigations use history.pushState, which the tracker follows automatically.

Server-side events#

Track conversions in an action with the server-side API, forwarding the request's User-Agent and IP:

ts 
export async function action({ request }: ActionFunctionArgs) {
  // … handle the form …
  await fetch('https://privatusanalytics.com/api/events', {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${process.env.PRIVATUS_INGEST_KEY}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      events: [{
        type: 'event', name: 'Signup', url: request.url,
        user_agent: request.headers.get('user-agent'),
        ip: request.headers.get('x-forwarded-for')?.split(',')[0],
      }],
    }),
  })
  return redirect('/welcome')
}