Updated 20 October 2026

Remix analytics

Privacy-first, cookieless analytics for Remix: one component in the root route, safe with server rendering, with route changes counted.

In short

  • npm i trckable, then render <Analytics /> once in app/root.tsx.
  • Safe under server rendering and StrictMode: it starts one tracker, in the browser.
  • No cookie banner needed in cookieless mode, no IP address stored, and nothing loaded from another company.

Install on Remix#

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:

npm i trckable

Render the component once in the root route. It draws nothing:

// app/root.tsx
import { Analytics } from 'trckable/react'

export default function App() {
  return (
    <html lang="en">
      <head>{/* Meta, Links */}</head>
      <body>
        <Analytics site="tkb_a1b2c3d4" host="https://stats.example.com" />
        {/* Outlet, ScrollRestoration, Scripts */}
      </body>
    </html>
  )
}

To send events through your own domain, drop host and add a resource route that forwards them:

// app/routes/api.e.ts
import { proxy } from 'trckable/server'

const trckable = proxy({
  host: process.env.TRCKABLE_HOST,
  proxyKey: process.env.TRCKABLE_PROXY_KEY,
})

export const action = ({ request }) => trckable(request)

Then set the variables on the server:

# .env (on your server, never in the browser)
TRCKABLE_HOST=https://stats.example.com
TRCKABLE_PROXY_KEY=your-proxy-key

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 Remix#

  • Render it once, in the root. Putting it in a nested route works too, but then only the pages under that route are counted.
  • It only starts in the browser. The component draws nothing and calls init in an effect, so server rendering and hydration are not affected.
  • Client navigations are counted. Remix uses the history API, and trckable counts the route change.
  • React Router v7 in framework mode is the same code. The component comes from trckable/react, whichever router renders it.

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#

Can I use the script tag in Remix instead?
Yes. Add the tag to the <head> of app/root.tsx as a normal <script defer> element with the same data-site and src attributes. The package is the better fit when you want events to go through your own domain.
Do I need a cookie banner on my Remix 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 Remix 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