Install on TanStack Start

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

Before you start

You need your site's tracking key from the dashboard. It looks like oa_pk_… and is safe to paste into your pages; it can only write events, never read anything.

Where the key is

Open your site, then Settings → Installation. The key is shown there any time, alongside the ready-made snippet.

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 (or run your dev server) and open the site once. The realtime view in your dashboard shows the visit within seconds; historical charts fill moments later.

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.