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 — under 1KB, 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 under 1KB 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.