# Hit counter

A hit counter is the oldest thing on the web and still one of the nicest. This one shows your site's lifetime hit count, and it is available on every plan.

Add `?hits` to the embed, then put an element wherever the number belongs:

```html
<script defer src="https://tinylytics.app/embed/YOUR_EMBED_CODE.js?hits"></script>
<span class="tinylytics_hits"></span>
```

The tag itself does not matter — a `span`, a `strong`, a `div` all work. The class is what the script looks for. Put several on one page and they all show the same lifetime total, since it is a site figure rather than a page one.

## Unique hits instead

On a paid plan, `?hits=unique` fills the element with unique hits rather than total hits, which is the more modest and arguably more interesting number. Legacy free accounts fall back to the total.

```html
<script defer src="https://tinylytics.app/embed/YOUR_EMBED_CODE.js?hits=unique"></script>
```

## Styles

A plain number suits most footers. For something with more character, add `hits_style` and the counter draws itself as an airport board, a mileage odometer, a GeoCities-era counter, or a calculator display:

```html
<script defer src="https://tinylytics.app/embed/YOUR_EMBED_CODE.js?hits&hits_style=flap"></script>
```

| Style | Looks like |
| --- | --- |
| `flap` | Split-flap tiles that clatter into place, like a departures board |
| `odometer` | Digit wheels that roll up to the count |
| `web` | Green LED digits in a grey bevel, zero-padded to six places |
| `lcd` | Seven-segment calculator digits, zero-padded to six places |

Each style scrambles in once when the page loads and then sits still. On a single-page app it only scrambles again when the count changes. Visitors who have asked their system for reduced motion see the finished counter straight away. Screen readers hear the number once, not a row of tiles.

The styles are a separate file that the script loads only when `hits_style` is set, so plain counters download nothing extra. An unknown style name is ignored and you get the plain number.

## Styling

The plain number inherits whatever type surrounds it. Tabular figures stop it jittering as the count grows, which is worth two lines of CSS:

```css
.tinylytics_hits {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}
```

The drawn styles are sized in `em`, so `font-size` on the element scales them. Three custom properties recolour them: `--tinylytics-hits-bg` for tiles and screens, `--tinylytics-hits-fg` for the digits, and `--tinylytics-hits-accent` for the flap hinge, the odometer wheels, the `web` frame, or the unlit `lcd` segments. With `hits_style=web`, this gives a red LED counter in a dark frame:

```css
.tinylytics_hits {
  font-size: 1.5rem;
  --tinylytics-hits-fg: #ff3b30;
  --tinylytics-hits-accent: #3f3f46;
}
```