Experimentation

Mtrix's experimentation feature allows you to run A/B tests and feature experiments with minimal development effort. This section covers how to implement, manage, and analyze experiments in your application.

Basic Concepts

Before diving into implementation, it's important to understand a few key concepts:

• Experiment: A test comparing multiple variants of a page or component

• Arm: Component that holds the variants (used in multi-variate testing)

• Variant: A specific version of a component (original/control or modified)

• Audience: Users targeted for inclusion in the experiment

• Conversion: A user action that indicates success for the experiment (fires with Purchase event)

Implementing Experiments

Fetch Experiment Data

To apply experiments on a page, first retrieve the experiment data:

// After mtrix initialization...
// ...Get experiment details for current page and user
async function loadExperiments() {
  const userId = getUserId(); // Your function to get user ID
  const location = window.location.pathname;
  
  const experimentResults = await mtrix.getPageDetails({
    location,
    userId
  });
  
  return experimentResults;
}

Sample Response Format

When calling mtrix.getPageDetails(), you'll receive a response like this:

{
  "success": true,
  "data": {
    "experiments": [
      {
        "experimentId": 303494641168,
        "variantId": 2,
        "variants": [
          {
            "name": "Headline Copy",
            "component": "c-3467",
            "variant": "v-34673"
          },
          {
            "name": "Hero Image Change",
            "component": "c-3568",
            "variant": "v-35681"
          }
        ]
      },
      {
        "experimentId": 382010213694,
        "variantId": 1,
        "variants": [
          {
            "name": "Banner Coupon",
            "component": "c-3871",
            "variant": "v-38712"
          }
        ]
      }
    ]
  }
}

Advanced Experimentation

Using Audiences

If you're using Mtrix as your primary infrastructure or client-side version of the Mtrix library, audience details will be fetched automatically. However, if you're using npm package, you need to provide the audience details and the value for each condition while making the getPageDetails call:

// Client requests experiment details
const experimentData = await mtrix.getPageDetails({
  location: '/product-page',
  userId: 'user-123',
  audience: [
    {
      audienceKey: 'country',
      value: ['CA']
    },
    {
      audienceKey: 'browser_language',
      value: ['en', 'en-US']
    }
  ]
});