Analytics for Gatsby

Gatsby pre-renders every page at build time, producing static HTML that loads instantly. BetterMeter complements this by adding analytics that are equally fast, ~1.3KB gzipped, no cookies, and no impact on your Lighthouse score. Inject via gatsby-ssr.tsx and every page is tracked from the first visit.

Inject via gatsby-ssr.tsx

Gatsby's SSR API lets you inject elements into the HTML shell during the build. Use onRenderBody to add the BetterMeter script to every pre-rendered page.

import React from "react";
import type { GatsbySSR } from "gatsby";

export const onRenderBody: GatsbySSR["onRenderBody"] = ({
  setPostBodyComponents,
}) => {
  setPostBodyComponents([
    <script
      key="bettermeter"
      defer
      data-site="your-domain.com"
      src="https://bettermeter.com/api/script"
    />,
  ]);
};

Why Gatsby sites need lightweight analytics

Gatsby is optimized for performance — prefetching links, inlining critical CSS, and generating optimized images. Adding a 45KB analytics library defeats the purpose. BetterMeter's tracker is ~1.3KB gzipped and loads with defer, so it never competes with Gatsby's own JavaScript for the main thread.

How tracking works with Gatsby

• 01 Initial page load — Gatsby serves pre-rendered HTML. The tracker fires a page view as soon as the script loads.
• 02 Client-side navigation — After hydration, Gatsby uses React Router for SPA-like transitions. BetterMeter detects these via the History API.
• 03 Prefetched pages — Gatsby prefetches linked pages in the background. BetterMeter only tracks actual navigations, not prefetches.
• 04 AI crawler traffic — See when GPTBot, ClaudeBot, or PerplexityBot crawl your Gatsby site. Track AI-driven referral traffic separately.

Perfect for content-heavy Gatsby sites

Gatsby excels at blogs, documentation, and marketing sites built from Markdown or a CMS. BetterMeter shows you which pages drive the most traffic, where visitors come from, and how AI models are indexing your content — all without cookies, consent banners, or GDPR headaches.