Open AnalyticsdocsDashboard
Documentation menu

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 (dashboard, your site, Settings, Installation), writes the tag, and prints which file it changed. Prefer to do it by hand? The steps below are what it does.

Manual steps

1. 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. On Solid Start the shape is the same; the import comes from @tanstack/solid-router.

src/routes/__root.tsx
import { createRootRoute, HeadContent, Scripts } from "@tanstack/react-router";

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

2. 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.tsx
function RootDocument({ children }) {
  return (
    <html>
      <head>
        <HeadContent />
      </head>
      <body>
        {children}
        <Scripts />
      </body>
    </html>
  );
}

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

4. 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.

Next

Route changes in a single-page app are tracked automatically, and the snippet never needs editing for updates. From here: custom events for the actions you care about, or script options for test mode and the privacy attributes.