Headless Experiments

Run A/B tests in React, Vue, Next.js, or your own application. Ours Privacy assigns visitors to variants and tracks impressions; your code renders the experience.

Setup

Create your experiment and variants, give the experiment a key such as homepage-hero, and leave variant DOM modifications empty. Start and publish the experiment when your application is ready to render it.

Add your experimentation token to your existing Web SDK initialization:

ours('init', 'YOUR_CDP_TOKEN', {
  experimentation: {
    token: 'YOUR_EXPERIMENT_TOKEN',
  },
});

The Web SDK initializes experimentation with the same visitor ID automatically. For other installation options, see Installation.

Render the Assigned Variant

Once experimentation has initialized, read the assignment using your experiment key:

const experiments = window.ours_experiments;

function renderHero() {
  const experiment = experiments.getExperimentByKey('homepage-hero');

  if (experiment?.variantId === 'YOUR_TREATMENT_VARIANT_ID') {
    renderEnterpriseHero();
  } else {
    renderDefaultHero();
  }
}

renderHero();

Replace the key and variant ID with your experiment's values, and use your own components or rendering functions. Keep the default experience when the visitor has no assignment.

React to Assignments

For single-page apps, subscribe to assignments to update your UI when experimentation evaluates a new route:

const unsubscribe = experiments.on('assigned', ({ experimentId }) => {
  if (experimentId === experiments.getExperimentByKey('homepage-hero')?.id) {
    renderHero();
  }
});

Read the current assignment when mounting your component, and call unsubscribe() when unmounting it. You do not need to initialize experimentation again on each route change.

Track Conversions

Track the event selected as your experiment's metric through the Web SDK:

function onSignupComplete() {
  ours('track', 'signup_completed');
}

Ours Privacy records experiment impressions automatically.

Next Steps

• JavaScript SDK: Assignment methods and event subscriptions
• Headless Personalization: Render content based on visitor signals
• Experiment Settings: Targeting and traffic allocation