Install on TanStack Start

Add Open Analytics to a TanStack Start site: where the snippet goes and how to verify it.

The short way

From your project folder, let the CLI detect TanStack Start and place the snippet itself:

Terminal

$ npx getopen init

It asks for your tracking key, writes the tag, and prints which file it changed. It is idempotent, so running it on a project that already has the snippet leaves it alone. Prefer to do it by hand? The steps below are exactly what it does.

Add it to TanStack Start

TanStack Start has no static HTML file; the document shell and its head are declared on the root route. Add the script to the scripts array returned by head() there, next to your meta and links.

src/routes/__root.tsxtsx

import { createRootRoute, HeadContent, Scripts } from "@tanstack/react-router";

export const Route = createRootRoute({
  head: () => ({
    meta: [{ charSet: "utf-8" }],
    scripts: [
      {
        src: "https://c.getopen.so/oa.js",
        async: true,
        "data-key": "YOUR_TRACKING_KEY",
        "data-collector": "https://c.getopen.so",
      },
    ],
  }),
  shellComponent: RootDocument,
});

Make sure <HeadContent /> is rendered inside <head> in your root document; it is what turns the head() entries into tags. Every Start starter already has it.

src/routes/__root.tsxtsx

function RootDocument({ children }) {
  return (
    <html>
      <head>
        <HeadContent />
      </head>
      <body>
        {children}
        <Scripts />
      </body>
    </html>
  );
}

Router navigation is tracked automatically; the root route stays mounted across client-side transitions, so the tag loads once and follows every route change.

Deploy and open the site at the address you gave the dashboard. The realtime view shows the visit within seconds; historical charts fill moments later. Loading it on your dev server first still tells you something: the dashboard's waiting screen names the host it saw the tag load on, and the tracker writes one line in the browser console when that host is not one the site counts. Visits themselves are only counted from the site's own domain, because localhost cannot be listed: deploy to see data, or empty the allowed domains list in Settings while you install. Nothing arriving? The troubleshooting page walks through the usual reasons.

Where to next

Track custom events

Count the clicks, signups and checkouts that matter, by attribute, a no-code rule, or the JavaScript API.

Script options

Test mode, debug logging, strict storage and the privacy attributes the snippet accepts.

Route changes in a single-page app are counted automatically, and the snippet never needs editing to get updates. See troubleshooting if the first visit does not show up.