> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tinytrack.io/llms.txt
> Use this file to discover all available pages before exploring further.
# Install the TinyTrack Tracking Script on Your Site
> Add the 1 KB TinyTrack script to your website's HTML head to start tracking pageviews and events. Works with any framework or static site.
The TinyTrack tracking script is a single async tag that weighs under 1 KB — small enough that it will never affect your page speed or Lighthouse score. Drop it once into your site's `` and TinyTrack immediately begins recording pageviews, unique visitors, and any custom events you choose to instrument.
## Basic Installation
Paste the following snippet inside the `` element of every page you want to track:
```html theme={null}
```
**Attribute breakdown:**
| Attribute | Purpose |
| ----------- | ----------------------------------------------------------------------------------------------------------------------------- |
| `data-site` | Your site's domain (e.g. `blog.acme.dev`). TinyTrack uses this to attribute events to the correct property in your dashboard. |
| `defer` | Tells the browser to load the script after HTML parsing completes — non-blocking, zero render-delay impact. |
| `src` | Points to the TinyTrack CDN. The script is served from the edge and cached aggressively. |
Find your exact snippet — with the correct `data-site` value pre-filled — in the TinyTrack dashboard under your site's **Settings**.
## Framework-Specific Examples
```tsx Next.js (App Router) theme={null}
// app/layout.tsx
import Script from 'next/script'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
{children}
)
}
```
```jsx React / SPA theme={null}
// Option 1 — add directly to public/index.html
//
//
//
// Option 2 — load from your root component with useEffect
import { useEffect } from 'react'
export default function App() {
useEffect(() => {
const script = document.createElement('script')
script.defer = true
script.dataset.site = 'YOUR_DOMAIN'
script.src = 'https://cdn.tinytrack.io/t.js'
document.head.appendChild(script)
}, [])
return <>{/* your app */}
}
```
```php WordPress theme={null}
tag.
// Alternatively, use a header/footer plugin such as "Insert Headers and Footers".
?>
```
```html HTML / Static Sites theme={null}
```
## Verifying Installation
After adding the snippet, confirm it is firing correctly in three steps:
Log in at [tinytrack.io](https://tinytrack.io) and navigate to the property that matches your `data-site` value.
Open your website in a browser tab. Load at least one page — TinyTrack fires a pageview event on every full page load.
Return to the dashboard. The **Live** counter in the top bar updates in real time — you should see your visit appear within a few seconds. If the real-time counter increments, your script is installed correctly.
You can also open your browser's **Network** tab and filter for `t.js` to confirm the script loads with a `200` status code, and watch for a request to `cdn.tinytrack.io` when the pageview fires.
Do not add the script to localhost without setting `data-site` to your actual domain, or events will be attributed incorrectly. Use your production domain as the `data-site` value at all times, even during local development.