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

# VitePress Analytics Integration

> Add tinyanalytics to the VitePress head configuration so every documentation page and client-side route change is tracked.

To add tinyanalytics to a **VitePress** site, add the tracking script to the `head` array in your VitePress config. It loads on every page, and client-side navigation is tracked automatically.

## Before you start

* A tinyanalytics site. If you don't have one yet, follow the [Quickstart](/docs/tinyanalytics-quickstart).
* Your site's numeric **site ID**, from **Settings → Tracking** in your dashboard.

## Add the script in `.vitepress/config`

Add an entry to the `head` array in `.vitepress/config.js` (or `config.ts`):

```js .vitepress/config.js theme={null}
export default {
  title: "My Site",
  head: [
    [
      "script",
      {
        src: "https://dash.tinyanalytics.io/script.js",
        defer: "",
        "data-site-id": "YOUR_SITE_ID",
      },
    ],
  ],
};
```

<Tip>
  Replace `YOUR_SITE_ID` with your real site ID. Each `head` entry is `[tag, attributes]`; add any other `data-*` options as more keys in the attributes object.
</Tip>

## Client-side navigation is tracked automatically

VitePress is a single-page app that renders navigation on the client, and tinyanalytics records each page change as a new pageview by default (`data-track-spa`). See [Track single-page apps](/docs/configure-tinyanalytics-tracking-script#track-single-page-apps) to change this.

## Verify

Build or deploy your site, open it in a browser, then check **Realtime** in your dashboard for your visit. See [Verify your setup](/docs/verify-tinyanalytics-installation) for the full check.

<Check>
  Your install is working when your own visit appears in **Realtime** in your dashboard.
</Check>

## Related

<Columns cols={2}>
  <Card title="Install on Docusaurus" icon="book" href="/docs/integrations/docusaurus-analytics">
    Another docs framework.
  </Card>

  <Card title="Configure the tracking script" icon="sliders" href="/docs/configure-tinyanalytics-tracking-script">
    Every `data-*` option you can set.
  </Card>

  <Card title="Track custom events" icon="hand-pointer" href="/docs/custom-event-tracking">
    Measure clicks and downloads.
  </Card>

  <Card title="Verify your setup" icon="circle-check" href="/docs/verify-tinyanalytics-installation">
    Confirm tracking works.
  </Card>
</Columns>


## Related topics

- [WordPress Analytics Integration](/docs/integrations/wordpress-analytics.md)
- [Docusaurus Analytics Integration](/docs/integrations/docusaurus-analytics.md)
- [React Analytics Integration](/docs/integrations/react-analytics.md)