Metronome logo

Documentation

Setting up Metronome in a Netlify project

Install Remix with the Netlify adapter

If you have already installed Remix, you can skip this section.

Terminal
npx create-remix@latest
  1. Name your project (e.g. "my-remix-app")
  2. After you name your project, select Just the basics and press enter.
  3. Select Netlify and press enter.

Install Metronome

Install Metronome React and Netlify packages

Terminal
npm install @metronome-sh/react @metronome-sh/netlify

Configure Metronome in your server.js file

  1. Import combineGetLoadContexts, createMetronomeGetLoadContext, and registerMetronome from the @metronome-sh/netlify module in your server.js file.
server.js
import {
combineGetLoadContexts,
createMetronomeGetLoadContext,
registerMetronome,
} from "@metronome-sh/netlify";
  1. Register Metronome in the build by using the registerMetronome function in your server.js file.
server.js
const buildWithMetronome = registerMetronome(build);
  1. create Metronome's getLoadContext function using createMetronomeGetLoadContext with the buildWithMetronome variable as argument.
server.js
const metronomeGetLoadContext =
createMetronomeGetLoadContext(buildWithMetronome);
  1. In the createRequestHandler function, replace the build prop with buildWithMetronome and combine the existing getLoadContext with the metronomeGetLoadContext using combineGetLoadContexts:
server.js
export const handler = createRequestHandler({
build: buildWithMetronome,
getLoadContext: combineGetLoadContexts(
getLoadContext,
metronomeGetLoadContext
),
mode: process.env.NODE_ENV,
});

Your server.js file should now look like this:

server.js
import {
combineGetLoadContexts,
createMetronomeGetLoadContext,
registerMetronome,
} from "@metronome-sh/netlify";
import * as build from "@remix-run/dev/server-build";
import { createRequestHandler } from "@remix-run/netlify";
const buildWithMetronome = registerMetronome(build);
const metronomeGetLoadContext =
createMetronomeGetLoadContext(buildWithMetronome);
/*
* Returns a context object with at most 3 keys:
* - `netlifyGraphToken`: raw authentication token to use with Netlify Graph
* - `clientNetlifyGraphAccessToken`: For use with JWTs generated by
* `netlify-graph-auth`.
* - `netlifyGraphSignature`: a signature for subscription events. Will be
* present if a secret is set.
*/
function getLoadContext(event, context) {
let rawAuthorizationString;
let netlifyGraphToken;
if (event.authlifyToken != null) {
netlifyGraphToken = event.authlifyToken;
}
let authHeader = event.headers["authorization"];
let graphSignatureHeader = event.headers["x-netlify-graph-signature"];
if (authHeader != null && /Bearer /gi.test(authHeader)) {
rawAuthorizationString = authHeader.split(" ")[1];
}
let loadContext = {
clientNetlifyGraphAccessToken: rawAuthorizationString,
netlifyGraphToken: netlifyGraphToken,
netlifyGraphSignature: graphSignatureHeader,
};
// Remove keys with undefined values
Object.keys(loadContext).forEach((key) => {
if (loadContext[key] == null) {
delete loadContext[key];
}
});
return loadContext;
}
export const handler = createRequestHandler({
build: buildWithMetronome,
getLoadContext: combineGetLoadContexts(
getLoadContext,
metronomeGetLoadContext
),
mode: process.env.NODE_ENV,
});

Configure Metronome in your root.tsx file

After you have configured the server side of Metronome in your app, you need to set up the client side with @metronome-sh/react to be able to track your app's Web Vitals.

Simply import MetronomeLinks from @metronome-sh/react:

root.tsx
import { MetronomeLinks } from "@metronome-sh/react";

You should render the <MetronomeLinks /> component between your <head> tags.

root.tsx
export default function App() {
return (
<html lang="en">
<head>
<Meta />
<Links />
<MetronomeLinks />
</head>
<body>
<Outlet />
<ScrollRestoration />
<Scripts />
<LiveReload />
</body>
</html>
);
}

Create a new project in Metronome

To create a new project, please follow the instructions in the Creating a new project section.

Set your API key in your production environment

In Site settings → Build & Deployment → Environment, set the METRONOME_API_KEY environment variable:

Deploy your project

Once you have your METRONOME_API_KEY set up, deploy your project to production, after your first couple of visits, you should be able to see metrics.