Install the tracking snippet with an NPM package

Overview

This method adds Reo.dev's tracking script as a code package inside your project, using npm or yarn (the tools JavaScript developers use to install and manage packages).

Use this if your website, documentation site, or product is built with a JavaScript framework, like React, Next.js, or Vue, and you or your engineering team manages that code directly.

Reo.dev tracks three types of assets:

• Website

• Documentation

• Cloud Product (your logged-in product)

Each is configured separately in Reo.dev under Settings → Integrations. The install code below is the same for all three, with one small difference for Cloud Product noted in Step 2.

Is this the right method for you?

• This method means editing your project's source code and redeploying it.

• If that's not something you do yourself, share this page with whoever manages your site's or product's codebase.

• Or, use one of the other install methods instead, pasting the script directly, or Google Tag Manager, neither of which touches your codebase.

---

Step 1: Install the package

In your project's terminal, run:

npm i reodotdev
# or
yarn add reodotdev

This adds Reo's tracking package to your project.

---

Step 2: Add the initialization code

1. Integrate the package into your project: Identify the file or module in your project where you want to add tracking, typically the root file that loads your entire application, for example _app.js, layout.tsx, or a similar entry point.

2. Import and load the tracking script: Import the required function from the package you installed, then use it to load Reo.dev's tracking script.

3. Add the code below to that file:

  // Use with NPM
import { loadReoScript } from 'reodotdev'

// Declare clientID from environment variable or directly as string
const clientID = process.env.CLIENT_ID || "XXXXXXXXXX";

// Resolve promise to get access to methods on Reo
const reoPromise = loadReoScript({ clientID });
reoPromise
  .then(Reo => {
     Reo.init({ clientID });
  })
  .catch(error => {
    console.error('Error loading Reo', error);
  })

1. This code looks for a CLIENT_ID environment variable first, and falls back to the literal string "XXXXXXXXXX" if none is set.

   1. Replace "XXXXXXXXXX" directly with your Client ID.

   2. Set CLIENT_ID as an environment variable in your project, using that same Client ID as its value.

   3. On a side note - adjust environment variables if needed: If you're using environment variables, make sure to set them up in your environment configuration or .env files.

Note: This same code works for tracking your Website or Documentation, just use the Client ID from your Reo.dev workspace.

If you are setting up Cloud Product tracking instead, read this:

• The code above includes a .catch() block - the part starting with .catch(error => {...}).

• It only runs if the script fails to load, and its job is to print a message so you'd notice.

• We'd recommend keeping it in your code: without it, a failed load happens silently, with no error and no message telling you it didn't work.

---

Step 3: Save, build, and deploy

• Save the file containing the updated code.

• Compile or bundle your project according to your build process, then deploy the changes to your server or hosting service.

• The tracking script activates once your updated site or product is live.

---

Verify it worked

The fastest way: on the relevant configuration page (Documentation, Website or Cloud Product) in Reo.dev (Settings → Integrations), click Check status in the top-right corner. It tells you whether Reo.dev is receiving data.

To check manually instead:

1. Open your site

   1. For Cloud Product tracking, log in first, since that's where the tracked screens live

2. Right-click anywhere on the page and select Inspect

3. In the Network tab, search for reo and check if the network calls are being registered (status code: 200)

---

Advanced: identify logged-in users

If your product has a login, calling identify is an essential step.

• Sign-in flows vary, some are built in-house, some use a third-party provider, some use an IDP (identity provider), so Reo.dev has no way to automatically detect a successful sign-in.

• That's why it exposes identify as a method you call yourself, right after a successful sign-in, with the person's details as its payload.

• This tells Reo.dev who the user is and that they've logged in, attaching their activity to a real identity instead of leaving it anonymous.

• identify only works after Reo.dev has finished loading, so call it after Reo.init (from Step 2), not before. The Reo && check below confirms Reo.dev has finished loading before identify runs, so this doesn't error out if your sign-in callback fires too early.

  const identity = {
      "username": "[e-mail]",
      "type": "email", // primary identifier to be email
      "other_identities": [
        {
          "username": "johndoe83",
          "type": "github" // other identifiers can be github, linkedin
        }
      ],
      "firstname": "John",
      "lastname": "Doe",
      "company": "microsoft.com" // company domain
    }
    Reo && Reo.identify(identity);

The Reo && check simply confirms Reo.dev has finished loading before calling identify, so this doesn't error out if it runs too early.

• username and type are required: the person's identifier, and what kind of identifier it is (email, github, or linkedin). type describes the format of the username itself, not how the person signed in. For example, someone can sign in with GitHub but still be identified by their email address, in which case username would be their email and type would be "email".

• other_identities is optional: any other identifiers for the same person, for example their email if they signed in with GitHub

• firstname, lastname, and company are optional, and enrich their profile with extra detail

---

Advanced: copy tracking, and how to turn it off

By default, Reo.dev also tracks when someone copies a command or code snippet from your page.

This is a useful signal: someone copying your install command is likely about to try your product.

For logged-in users on your Cloud Product, like free or trial users, this also flags high-intent activity: copying a code block or running a CLI command is a strong proxy for how far along they are in evaluating your product.

If you'd rather turn copy tracking off entirely, add the dnt (do not track) flag when you initialize Reo.dev:

reoPromise
  .then(Reo => {
    Reo.init({ clientID, dnt: ["copy"] });
  });

---

Error scenarios

1. The script doesn't load

The tracking snippet only runs after it downloads successfully from Reo.dev's Content Delivery Network (CDN), the servers that host the script file. A failed download doesn't break your page. It just means that visit isn't tracked.

This also won't throw visible errors in your browser's console. That's intentional: the script has built-in error handling so a tracking hiccup never clutters your production logs. If your site enforces a Content Security Policy, an unlisted domain can also cause this same silent failure, see CSP requirements below.

2. A tracking event occasionally fails to send

In rare cases, Reo.dev resets its internal authentication behind the scenes. If that happens while an event is sending, that one event may not go through, but this resolves on its own and later events send normally. No action is needed.

3. Avoid duplicate installs

Don't initialize Reo.dev more than once in the same project. Multiple copies can conflict with each other.

Still stuck? Contact your Customer Success Manager on Slack, or email [e-mail].

---

CSP requirements

If your site enforces a Content Security Policy (CSP), allow these domains. This is usually set in your site's HTTP response headers or a CSP meta tag, ask whoever manages your hosting if you're not sure where.

• script-src <https://static.reo.dev>

• connect-src <https://api.reo.dev>

For cookies and data handling, see the cookie management guide.

---

FAQs

For questions about the tracking script itself, safety, performance, PII, browser support, and compliance, check out the FAQ on the Website integration guide or Documentation integration guide. Those apply for installation with NPM package as well.

• Do I need to set the CLIENT_ID environment variable, or can I hardcode it? Either works. The environment variable in Step 2 is just a convention, so you're not hardcoding config values into your source code, but the Client ID itself isn't sensitive, so pasting it directly as a string works fine too.

• Should I add a .catch() block for Cloud Product tracking? Yes, we recommend it. It only runs if the script fails to load, and its job is to print a message so you'd notice. See Step 2 for the full code and explanation.

• What happens if I don't call identify()? Nothing breaks. Tracking still works, the session just stays anonymous instead of being linked to a known person.