> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tell.rs/llms.txt
> Use this file to discover all available pages before exploring further.

# TanStack Router

> Page view tracking for TanStack Router (Start, SPA) apps.

```bash theme={null}
npm install @tell-rs/react @tell-rs/browser
```

Use `@tell-rs/react` with a small page tracker component that watches TanStack Router's `useLocation()`.

<Info>
  There is no separate `@tell-rs/tanstack` package. TanStack Router integration uses the [React SDK](/tracking/sdks/javascript/react) directly — you just add a `<TellPageTracker />` component that listens for route changes.
</Info>

## Setup

### 1. Add the provider and page tracker

```tsx theme={null}
// src/routes/__root.tsx
import { createRootRoute, Outlet, useLocation } from "@tanstack/react-router";
import { TellProvider, useTell } from "@tell-rs/react";
import { useEffect, type ReactNode } from "react";

function TellPageTracker() {
  const tell = useTell();
  const location = useLocation();

  useEffect(() => {
    tell.track("Page Viewed", {
      url: window.location.href,
      path: location.pathname,
      referrer: document.referrer,
      title: document.title,
    });
  }, [location.pathname, tell]);

  return null;
}

export const Route = createRootRoute({
  component: RootComponent,
});

function RootComponent() {
  return (
    <TellProvider apiKey="YOUR_API_KEY">
      <Outlet />
      <TellPageTracker />
    </TellProvider>
  );
}
```

`TellPageTracker` fires a `Page Viewed` event on mount and whenever `location.pathname` changes. Place it inside `TellProvider` so `useTell()` resolves.

### 2. Track events

```tsx theme={null}
import { useTrack } from "@tell-rs/react";

function SignUpButton() {
  const track = useTrack();

  return (
    <button onClick={() => track("Sign Up Clicked", { plan: "pro" })}>
      Sign Up
    </button>
  );
}
```

### 3. Identify users

```tsx theme={null}
import { useIdentify } from "@tell-rs/react";

function LoginForm() {
  const identify = useIdentify();

  function onLogin(user: { id: string; email: string }) {
    identify(user.id, { email: user.email });
  }

  // ...
}
```

## With TanStack Start (SSR)

TanStack Start renders on the server first. The browser SDK requires `window` and `document`, so tracking only runs client-side. This works automatically — `TellProvider` calls `configure()` inside a `useEffect`, which only fires in the browser.

For server-side tracking in API routes or server functions, use the [Node.js SDK](/tracking/sdks/javascript/node):

```typescript theme={null}
import { Tell, production } from "@tell-rs/node";

const tell = new Tell(production("YOUR_API_KEY"));

// In a server function
tell.track("user_123", "Order Completed", { total: 99.99 });
```

## With redaction

```tsx theme={null}
import { TellProvider } from "@tell-rs/react";
import { redact, SENSITIVE_PARAMS } from "@tell-rs/browser";

function RootComponent() {
  return (
    <TellProvider
      apiKey="YOUR_API_KEY"
      options={{
        beforeSend: redact({ stripParams: SENSITIVE_PARAMS }),
        captureErrors: true,
      }}
    >
      <Outlet />
      <TellPageTracker />
    </TellProvider>
  );
}
```

## What you get from the browser SDK

All features documented in the [browser SDK guide](/tracking/sdks/javascript/browser) are available — sessions, device context, super properties, structured logging, opt-out, and `beforeSend` hooks. The page tracker component only adds route-change awareness.