Docs

Add RUM to your Sapper site

2 min read

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

Installation Steps

  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. Paste the snippet on your website’s base template.html file, preferably at the bottom of the <head> section.

Here’s a basic example of what it might look like (don’t forget to replace YOUR_CLIENT_KEY with the one from your Cronitor Site):

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta name="theme-color" content="#333333">

    %sapper.base%

    <link rel="stylesheet" href="global.css">
    <link rel="manifest" href="manifest.json" crossorigin="use-credentials">
    <link rel="icon" type="image/png" href="favicon.png">
    <link rel="apple-touch-icon" href="logo-192.png">

    <!-- Sapper creates a <script> tag containing `src/client.js`
         and anything else it needs to hydrate the app and
         initialise the router -->
    %sapper.scripts%

    <!-- Sapper generates a <style> tag containing critical CSS
         for the current page. CSS for the rest of the app is
         lazily loaded when it precaches secondary pages -->
    %sapper.styles%

    <!-- This contains the contents of the <svelte:head> component, if
         the current page has one -->
    %sapper.head%

    <!-- 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>
</head>
<body>
    <!-- The application will be rendered inside this element,
         because `src/client.js` references it -->
    <div id="sapper">%sapper.html%</div>
</body>
</html>

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!