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:

<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.

<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:

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

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:

.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:

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