Docs

Add RUM to your Gatsby site

2 min read

Installing Cronitor RUM on your Gatsby website is simple - all you have to do is add our analytics snippet.

The analytics snippet is a small piece of code that runs on your website, collecting the metrics necessary to power your dashboard and provide performance insights. It’s cookieless and privacy-oriented.

Installation Steps

To install Cronitor RUM on your Gatsby project all you have to do is to tell Gatsby to inject the analytics snippet into the rendered HTML document.

  1. If you haven’t already, add your site to Cronitor, give it any name you want to help you recognize it later.
  2. Copy the Javascript snippet that is shown to you after creating the website.
  3. In your Gatsby project, create a file called gatsby-ssr.js in the top-level directory.
  4. Paste the following snippet and replace YOUR_CLIENT_KEY with your Site’s client key (you can view in your site settings).

import React from "react";

const CONFIG = {
  clientKey: "YOUR_CLIENT_KEY",
};

export const onRenderBody = ({ setPostBodyComponents }) => {
  setPostBodyComponents([
    <script key="cronitor-rum-src" async src="https://rum.cronitor.io/script.js" />,
    <script
      key="cronitor-rum-code"
      dangerouslySetInnerHTML={{
        __html: `
          window.cronitor = window.cronitor || function() { (window.cronitor.q = window.cronitor.q || []).push(arguments); };
          cronitor('config', ${JSON.stringify(CONFIG)});
        `,
      }}
    />,
  ]);
};

You can optionally set debug: true to see logs on your browser’s console when developing on localhost.

Please note Gatsby will not auto-reload this file during development, you may need to restart the server between changes.

For more information on how this method works, you can check out Gatsby’s documentation on SSR APIs.

Check your installation

After you have added our analytics script to your website, you should be able to see pageviews show up in the dashboard within a minute of the visitors coming into your website.

Need help? Check out common questions or reach out to us!