Quickstart

By the end of this page your app will be assigning users to a variant and sending conversions back to Trevo. You need a workspace and its SDK key. The key is in Settings → API keys and looks like tsk_live_…. It is publishable — it ships in your JavaScript bundle by design, and it cannot read or change anything in your workspace.

1. Install

npm install @trevosdk/browser

No bundler? Load the CDN build instead — it exposes a global called Trevo. Pin the exact version in production:

<script src="https://cdn.trevosdk.com/browser/v0.2.4/trevo.min.js"></script>

2. Initialise

Once, as early as your app boots:

import trevo from '@trevosdk/browser';

trevo.init({ apiKey: 'tsk_live_…' });

Call identify() when you know who the user is — usually right after login:

trevo.identify(currentUser.id);

Identity decides which variant a user gets, so calling identify() later can move someone from one variant to another. Call it as early as you can, and before rendering anything you are testing.

3. Read a variant

const variant = trevo.getVariant('checkout-cta');

if (variant === 'treatment') {
  // your alternate experience
} else {
  // your current experience
}

getVariant() is synchronous and does no network call — assignment is a local hash of the user’s identity and the experiment key. The same user always gets the same variant. It returns 'control' for an experiment key it does not recognise, so shipping this code before the experiment exists in Trevo is safe. Calling getVariant() also records an exposure — “this user saw this variant”. That is the denominator for your results, so only call it where the user genuinely sees the thing. To read an assignment without recording an exposure:

const variant = trevo.getVariant('checkout-cta', { trackExposure: false });

4. Record a conversion

Nothing is tracked automatically. A conversion exists only where you write one:

trevo.track('purchase_completed', { value: 49.99, plan: 'pro' });

Events are batched and sent in the background, including on page unload. You do not need to flush manually, though trevo.flush() exists if you want to force it.

5. Check it arrived

Open Data → Events in your workspace. Your event should appear within a few seconds. If nothing shows up, see No events arriving.

What to do next

Using React? install/react has a provider and a hook that handle initialisation for you.
On Next.js? install/nextjs resolves variants on the server so the first paint is already correct — no flash of the control version.
Tracking conversions on a backend? install/node. Server-side events are immune to ad blockers and closed tabs, which improves the numbers for your browser experiments too.
Multiple variants? defineExperiment() gives you a typed union and makes an unhandled variant a compile error. See Browser API.

The whole thing

import trevo from '@trevosdk/browser';

trevo.init({ apiKey: 'tsk_live_…' });
trevo.identify(currentUser.id);

const variant = trevo.getVariant('checkout-cta');
if (variant === 'treatment') {
  showNewCheckout();
} else {
  showCurrentCheckout();
}

// later, when the user converts
trevo.track('purchase_completed', { value: 49.99, plan: 'pro' });

Getting started

Install

Concepts

Reference

Troubleshooting

1. Install

2. Initialise

3. Read a variant

4. Record a conversion

5. Check it arrived

What to do next

The whole thing

​1. Install

​2. Initialise

​3. Read a variant

​4. Record a conversion

​5. Check it arrived

​What to do next

​The whole thing

1. Install

2. Initialise

3. Read a variant

4. Record a conversion

5. Check it arrived

What to do next

The whole thing