Gatsby

Gatsby generates the <head> of every page at build time. Add the snippet through the onRenderBody API in gatsby-ssr.js, or with Gatsby's own <Script> component if you want control over load timing.

Get your tracking snippet

In your Rybbit dashboard, open Site Settings → Tracking Script and copy your snippet. It looks like this:

<script src="https://app.rybbit.io/api/script.js?siteId=YOUR_SITE_ID" defer></script>

YOUR_SITE_ID is the numeric ID of your site. If you self-host Rybbit, app.rybbit.io is the domain of your own instance.

Add the snippet to Gatsby

Create gatsby-ssr.js at the root of your project if it does not exist and register the script with setHeadComponents:

gatsby-ssr.js

import React from "react";

export const onRenderBody = ({ setHeadComponents }) => {
  setHeadComponents([
    <script
      key="rybbit-analytics"
      src="https://app.rybbit.io/api/script.js?siteId=YOUR_SITE_ID"
      defer
    />,
  ]);
};

This puts the tag in the <head> of every generated page.

The Gatsby Script API loads third-party scripts with a chosen strategy (post-hydrate, idle or off-main-thread). Render it in a layout component that wraps every page:

src/components/layout.js

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

export default function Layout({ children }) {
  return (
    <>
      {children}
      <Script
        src="https://app.rybbit.io/api/script.js?siteId=YOUR_SITE_ID"
        strategy="post-hydrate"
      />
    </>
  );
}

Rebuild the site (gatsby build) and deploy the public folder. Client-side navigation through Gatsby's <Link> is tracked automatically as pageviews.

Verify installation

Open your live site in a new tab and click through a few pages. Within a few seconds the pageviews appear in the Rybbit dashboard.

If nothing shows up:

View the page source and search for script.js?siteId= to confirm the snippet is on the page.
Open the browser Network tab and check that script.js returns 200 and that POST requests go to /api/track.
Disable ad blockers, or set up a proxy so the script loads from your own domain.
See the script troubleshooting guide for other common causes.

Track custom events

Call window.rybbit.event() from any React component. Guard the call, because Gatsby renders components on the server during the build.

src/components/TrackedButton.js

import React from "react";

export default function TrackedButton({ label, eventName, eventData }) {
  const handleClick = () => {
    if (typeof window !== "undefined" && window.rybbit) {
      window.rybbit.event(eventName, eventData);
    }
  };

  return <button onClick={handleClick}>{label}</button>;
}

Troubleshooting

Pageviews missing after client-side navigation: this is rare. If it happens, export onRouteUpdate from gatsby-browser.js and call window.rybbit.pageview() there when location.pathname changes. Test the default behaviour first.

Next steps

Track custom events such as signups, purchases and button clicks.
Identify users to connect sessions to accounts.
Proxy the script through your own domain to bypass ad blockers.
Script attributes let you skip or mask URLs and tag events.