Updated 20 October 2026

Gatsby analytics

Privacy-first, cookieless analytics for Gatsby: one entry in gatsby-ssr.js puts the tag in every built page.

In short

  • One onRenderBody export in gatsby-ssr.js adds the tag to the head of every built page.
  • Gatsby's client-side routing is counted by itself, once per page.
  • No cookie banner needed in cookieless mode, no IP address stored, and nothing loaded from another company.

Install on Gatsby#

Use your own site id and server address in the code below. On trckable Cloud the address is https://cloud.trckable.com.

Add the tag from gatsby-ssr.js, which runs when Gatsby builds each page:

// gatsby-ssr.js
import React from 'react'

export const onRenderBody = ({ setHeadComponents }) => {
  setHeadComponents([
    <script
      key="trckable"
      defer
      data-site="tkb_a1b2c3d4"
      data-domain="example.com"
      src="https://stats.example.com/js/tkb_a1b2c3d4.js"
    />,
  ])
}

Open your site once, then run npx trckable doctor --host https://stats.example.com --site tkb_a1b2c3d4 --url https://example.com. It only reads, and tells you whether the tag is on the page and the server answers.

What to know about Gatsby#

  • It appears in built pages. The tag comes from the server-rendering step, so look for it after gatsby build, in the HTML of public/, not in a browser-only file.
  • Do not also put it in gatsby-browser.js. One tag per page is enough; a second copy does nothing but is clutter.
  • Client-side routing is counted. Gatsby moves between pages with the history API, which trckable listens for.
  • gatsby develop is ignored because trckable does not count localhost unless the tag has data-dev.

Goals and revenue#

A goal needs no code: put an attribute on the element and each click is counted.

<button data-trckable-goal="signup" data-trckable-goal-plan="pro">Start trial</button>

Connect Stripe, Paddle, Lemon Squeezy, Polar or Dodo Payments with one key, and each payment is credited to the visit that earned it, so revenue shows next to traffic. See revenue attribution.

Questions#

Is there a Gatsby plugin?
No, and you do not need one. setHeadComponents is Gatsby's own API for adding to the head, and the tag is the documented install for any site that lets you add HTML to the head.
Do I need a cookie banner on my Gatsby site?
Not for the counting itself. In cookieless mode (add data-cookieless to the tag) nothing is stored on the visitor's device and no IP address is kept. Whether your site needs a banner for other reasons is a question for your own situation; the cookie banner guide explains the rules in plain words.
Can ad blockers stop it?
A blocker can block any script, and trckable does not claim otherwise. Sending events through your own domain removes the separate analytics file a blocklist would match by name, which is the accurate setup. The same-origin proxy guide shows how.
Is it free for a Gatsby site?
The server is open source and free to self-host, and the tracker is MIT licensed. If you would rather not run a server, trckable Cloud runs it for you; the plans are on the pricing page.

Keep reading#

Other stacks#

Start free