gatsby-ssr.js · open source (MIT) · ask in plain English

Add analytics to Gatsby.

Gatsby prerenders every page to static HTML then hydrates into a React app, so you want your tags in the SSR head, not bolted on per page. smolanalytics registers two head components in gatsby-ssr.js and autocaptures pageviews, clicks, scroll and JS errors with zero code. You ask your numbers in plain English instead of maintaining a plugin.

gatsby-ssr.js
// gatsby-ssr.js at the project root
const React = require("react")

exports.onRenderBody = ({ setHeadComponents }) => {
  setHeadComponents([
    React.createElement("script", {
      key: "sa-sdk",
      src: "https://YOUR-INSTANCE/sdk.js",
    }),
    React.createElement("script", {
      key: "sa-init",
      dangerouslySetInnerHTML: {
        __html: `smolanalytics.init("WRITE_KEY", { host: "https://YOUR-INSTANCE" })`,
      },
    }),
  ])
}

onRenderBody with setHeadComponents injects the tags into the head of every statically rendered page, so one file covers the whole site with no plugin.

how do I add analytics to gatsby?

Gatsby prerenders every page to static HTML then hydrates into a React app, so you want your tags in the SSR head, not bolted on per page. smolanalytics registers two head components in gatsby-ssr.js and autocaptures pageviews, clicks, scroll and JS errors with zero code. You ask your numbers in plain English instead of maintaining a plugin.

Gatsby sites are static and content-heavy, so the useful metrics are which pages get read, how far people scroll, and which outbound or CTA clicks fire on the hydrated React layer. Autocapture handles pageviews across Gatsby's clientside route transitions, scroll depth, the full click element chain, and JS errors. For conversions, call smolanalytics.track("signup", { plan: "pro" }) from a component and identify(userId) after login.

It fits Gatsby because gatsby-ssr.js is the framework's own hook for head content, so the tags render into the static HTML and run the moment a page loads. No plugin to install or keep updated. It is one open-source Go binary, self-host free or hosted from 29 dollars a month, cookieless with no consent banner, and every answer is a deterministic report a CI test proves can't be made up.

Honest pricing: 14-day full trial, no credit card. Then Solo $29/mo, never metered on seats or sites. Overage is $5/million with an emailed receipt, the dashboard never locks, and self-hosting the single Go binary is free forever (MIT).

Add analytics to Gatsby tonight.

One snippet, or one endpoint. Tomorrow morning the verdict tells you which part of the funnel to fix.

questions

How do I add analytics to Gatsby?
Gatsby prerenders every page to static HTML then hydrates into a React app, so you want your tags in the SSR head, not bolted on per page. smolanalytics registers two head components in gatsby-ssr.js and autocaptures pageviews, clicks, scroll and JS errors with zero code. You ask your numbers in plain English instead of maintaining a plugin.
Do I need a cookie banner?
Not in cookieless mode. smolanalytics can run without storing anything on the device, so there is no consent banner to add. You still get visitors, referrers, funnels, retention, and paths, and AI-assistant referrals (chatgpt.com, claude.ai, perplexity.ai) show up as their own channel.
Is it enough for a real product, or just page counts?
It does funnels, retention, paths, cohorts, and a daily verdict on what to fix, from the same events, and you ask it in plain English. It deliberately skips session replay, feature flags, and experiments. If you want a straight answer on what to fix, that you own and can self-host free, it fits.

keep reading