Docs · Install

Add UserJourney to a React app

For a React single-page app, built with Vite or anything else. For Next.js, see Next.js.

1. The snippet

In index.html, in the <head>. Your key is on the Setup page of the dashboard.

<script src="https://userjourney.dev/uj.js" data-key="pk_…" defer></script>

Route changes count as page views by themselves.

2. A small helper

So you can call it from your components, even before the script has loaded:

// src/uj.ts
type Method = "identify" | "reset" | "step" | "activated" | "track" | "search";

/** Calls UserJourney's snippet; before it has loaded, the call waits in its queue. */
export function uj(method: Method, ...args: unknown[]) {
  if (typeof window === "undefined") return;
  const w = window as unknown as { uj?: Record<string, unknown> & { q?: unknown[][] } };
  const fn = w.uj?.[method];
  if (typeof fn === "function") fn(...args);
  else ((w.uj ??= { q: [] }).q ??= []).push([method, ...args]);
}

3. Identify

Where your app learns who is signed in, for example in your auth provider. The first call for someone is their sign-up.

import { useEffect } from "react";
import { uj } from "./uj";

useEffect(() => {
  if (user) uj("identify", String(user.id), { email: user.email, name: user.name });
}, [user?.id]);

// on sign-out
uj("reset");

Onboarding steps

Pages under /onboarding/<step>, /setup/<step>, /welcome/<step> or /get-started/<step> count as steps by themselves. Otherwise, one call when each step is done, and optionally the moment they first get value:

uj("step", "connect_repo")
uj("activated")

Payments

Connect Stripe or Paddle in the dashboard, and each payment, trial and cancellation lands on the person who made it.

Check it works

Open your site in a private window: you show up on Traffic within a few seconds. Sign up with a test account and it appears on People, with the visit that brought it. Your own team is left out once you sign in; for your visits before that, open any page once with ?uj=off (more).

If your app sends a Content Security Policy, add https://userjourney.dev to script-src and connect-src.

Everything else is in the docs →