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

# Web analytics

> Track pageviews, sessions, geography, devices, and referrers for a deployed project.

Track pageviews, sessions, geography, devices, and referrers for a deployed project. Brimble's built-in analytics work without a third-party tracker, you enable them in the dashboard, drop a snippet on your site, and traffic shows up.

## Prerequisites

* A web-service or static-site project.
* A plan that includes web analytics. The free plan has limited or no access; paid plans surface the full dashboard.

## Enable analytics

1. Open the project.
2. Click the **Web analytics** tab.
3. Click **Enable analytics**. Brimble generates a website ID for the project.
4. Brimble shows a tracking snippet. Copy it.

There are two snippet flavors:

* **Client-side**, a small `<script>` you drop into your site's HTML head. Works for any frontend, including static sites.
* **Server-side**, a server-rendered include for frameworks that mount the page on the server (Next.js server components, Remix loaders, Rails views, etc.).

Pick whichever fits your stack. Both report to the same dashboard.

<Frame caption="Enable web analytics and copy a tracking snippet.">
  <img src="https://mintcdn.com/brimble-86/VDnKCHWcGHKvY1rj/images/analytics/tracking-snippet.jpg?fit=max&auto=format&n=VDnKCHWcGHKvY1rj&q=85&s=5dab1be0462c0d968965250b3f267c4d" alt="Web analytics enable screen showing the tracking snippet panel with client-side and server-side tabs" width="5088" height="3366" data-path="images/analytics/tracking-snippet.jpg" />
</Frame>

## Drop in the snippet

For most stacks, the simplest path is the client-side snippet. Paste it into your site's `<head>`:

```html theme={null}
<script defer data-website-id="<your-website-id>" src="https://analytics.brimble.io/script.js"></script>
```

Deploy. The next page load reports back to Brimble.

For frameworks with their own analytics conventions:

* **Next.js**, add the snippet to `_app.tsx` (Pages router) or `app/layout.tsx` (App router).
* **Vite / React / Vue**, add to `index.html`.
* **Astro / Hugo / static**, add to your layout template.
* **Rails / Django / Phoenix**, add to your application layout.

## What's tracked

| Metric              | Description                                                                                             |
| ------------------- | ------------------------------------------------------------------------------------------------------- |
| **Pageviews**       | Each page load counts as one pageview. SPA navigations are tracked via the History API.                 |
| **Sessions**        | A burst of activity from one visitor. A session ends after 30 minutes of inactivity.                    |
| **Visitors**        | Unique pseudonymous IDs. Brimble doesn't fingerprint or set persistent cookies, visitors are estimated. |
| **Top pages**       | URLs sorted by pageview count.                                                                          |
| **Top referrers**   | Where visitors came from (other domains, social platforms, search engines).                             |
| **Geography**       | Country and (where available) city, derived from IP.                                                    |
| **Devices**         | Desktop, tablet, mobile, TV.                                                                            |
| **Browsers**        | Chrome, Safari, Firefox, etc.                                                                           |
| **Traffic heatmap** | Visit volume by day-of-week and time-of-day.                                                            |
| **Visitor map**     | World map heatmap of visitor origin.                                                                    |

Personal data (full IP, exact location, individual identity) is not stored. Aggregations are designed to give you traffic intelligence without surveilling individuals.

<Frame caption="Top of the analytics view: visitors, countries, and bounce rate over the selected window.">
  <img src="https://mintcdn.com/brimble-86/3qGOJm9m5-UVyrwq/images/analytics/analytics-data-1.jpeg?fit=max&auto=format&n=3qGOJm9m5-UVyrwq&q=85&s=48a8223994471ffca1d86c3f0eb243c7" alt="Web analytics overview showing visitor count, country breakdown, and bounce-rate trend" width="5088" height="3366" data-path="images/analytics/analytics-data-1.jpeg" />
</Frame>

<Frame caption="Deeper breakdowns: page performance, regions, referrers, browsers, custom events, and top cities.">
  <img src="https://mintcdn.com/brimble-86/3qGOJm9m5-UVyrwq/images/analytics/analytics-data-2.jpeg?fit=max&auto=format&n=3qGOJm9m5-UVyrwq&q=85&s=87b17af22d190c6678d05a567cc53828" alt="Web analytics detail panels covering page performance, country and region tables, referrers, browser breakdown, custom events, and city-level visitor data" width="5088" height="3366" data-path="images/analytics/analytics-data-2.jpeg" />
</Frame>

## Time range

The dashboard's range picker covers:

* Last 7 days (default)
* Last 30 days
* Custom range

Each chart updates to the selected range.

## Disable or remove the website

To stop tracking a project:

1. Go to **Web analytics**.
2. Click **⋯ → Disable**.

Existing data stays in the dashboard until you click **Delete website data**, which is permanent.

## Multiple sites in one project

Each Brimble project gets one website ID. If you serve multiple sites from one project (sub-paths or subdomains routed to different parts of the same service), pageviews are attributed to the host the request came in on, the dashboard groups them under "Top pages" with the full path.

## Verification

After deploying with the snippet in place:

1. Open your site in a browser.
2. Reload a couple of times, click around.
3. Wait 30–60 seconds.
4. In the Brimble **Web analytics** tab, **Pageviews** should reflect your activity.

If it doesn't, open your browser's Network tab and check that requests to `analytics.brimble.io` are going through (no 404, no CORS error, no ad-blocker rule).

## Custom events

The default snippet tracks pageviews. For event tracking (button clicks, form submits, conversions), call the SDK's `track()` method:

```javascript theme={null}
window.brimble?.track("signup", { plan: "pro" });
```

## Troubleshooting

**Snippet loaded but no data.** Open your browser's Network tab and confirm requests to `analytics.brimble.io` are going through (no 404, no CORS error, no extension blocking the request). If those requests are firing and the dashboard is still empty, contact support with the website ID.

**SPA route changes don't count.** The snippet listens for History API events (`pushState`, `replaceState`). If your router uses fragment-only navigation (`#/route`) or replaces the page DOM without pushing state, it won't tick. Switch your router to History API mode, or call the SDK's manual track method.

**Numbers don't match server-side request logs.** Expected. Server logs include bots, prefetches, and direct API hits the analytics dashboard filters out. The two views answer different questions.

## Next steps

* [Logs](../projects/deployments), runtime logs and request logs are separate from web analytics.
* [Custom domains](../domains/custom-domains), analytics work the same on default and custom domains.
