Docs

Add RUM to your React site

1 min read

Installing Cronitor RUM on your React app 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.

Add the script via npm or yarn

Simply install the library in your project:

npm install @cronitorio/cronitor-rum

# Or with yarn:
yarn add @cronitorio/cronitor-rum

You can now import, and use the Cronitor client on your project.

import * as Cronitor from "@cronitorio/cronitor-rum";

// Load the Cronitor tracker once in your app
Cronitor.load("YOUR_SITE_ID");

// This is how you record page views
// You should trigger this on router/page changes
Cronitor.track("Pageview");

// You can also trigger custom events
Cronitor.track("NewsletterSignup");

Alternative method: Add the script to your HTML document header

Just add the script shown in your Site Dashboard to your website’s HTML <head> section.

For example (don’t forget to set your client key):

<!-- Cronitor RUM -->
<script async src="https://rum.cronitor.io/script.js"></script>
<script>
    window.cronitor = window.cronitor || function() { (window.cronitor.q = window.cronitor.q || []).push(arguments); };
    cronitor('config', {
        clientKey: 'YOUR_CLIENT_KEY',
        debug: false,
    });
</script>

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!