Gatsby Analytics Integration

To add tinyanalytics to a Gatsby site, load the tracking script with Gatsby’s built-in <Script> component from a shared layout so it runs on every page. Client-side navigation between pages is tracked automatically.

Before you start

A tinyanalytics site. If you don’t have one yet, follow the Quickstart.
Your site’s numeric site ID, from Settings → Tracking in your dashboard.

Add the `<Script>` to a shared layout

Import Script from gatsby and render it in the layout your pages share, for example src/components/layout.js:

src/components/layout.js

import * as React from "react";
import { Script } from "gatsby";

export default function Layout({ children }) {
  return (
    <>
      {children}
      <Script
        src="https://dash.tinyanalytics.io/script.js"
        data-site-id="YOUR_SITE_ID"
      />
    </>
  );
}

Replace YOUR_SITE_ID with your real site ID. If you’ve toggled options in Settings → Tracking, pass each one as another data-* prop on <Script>.

Gatsby renders route changes on the client, and tinyanalytics records each one as a new pageview by default (data-track-spa). You don’t need to hook into Gatsby’s router. See Track single-page apps to change this.

Verify

Build or deploy your site, open it in a browser, then check Realtime in your dashboard for your visit. See Verify your setup for the full check.

Your install is working when your own visit appears in Realtime in your dashboard.

Install on React

A plain React or Vite app instead.

Configure the tracking script

Every data-* option you can set.

Track custom events

Send events from your components.

Verify your setup

Confirm tracking works.

Choose an install method

Frameworks

Other platforms

Gatsby Analytics Integration

Before you start

Add the `<Script>` to a shared layout

Client-side navigation is tracked automatically

Verify

Install on React

Configure the tracking script

Track custom events

Verify your setup

​Before you start

​Add the <Script> to a shared layout

​Client-side navigation is tracked automatically

​Verify

​Related

Install on React

Configure the tracking script

Track custom events

Verify your setup

Before you start

Add the `<Script>` to a shared layout

Client-side navigation is tracked automatically

Verify

Related