Front-end Javascript / Typescript integration

The Hyppot SDK available for Javascript and Typescript allows you to integrate A/B testing into front end of your web applications. Here are the required steps to get it running:

Installation

Install the Hyppot SDK using npm or yarn:

# Using npm
npm install hyppot

# Using yarn
yarn add hyppot

Basic Setup

To start using Hyppot in your application, you need to configure it and initialize the experimentation resolver:

import { configureHyppot } from 'hyppot';

// Configure Hyppot
const { resolver, tracker } = configureHyppot((config) => {
  // Set the API endpoint prefix (default is '/hyppot')
  config.prefix = '/hyppot';
  
  // Optionally customize the storage key for experiment data
  // config.experimentStatusKey = "Hyppot_Ex";
});

Initialization

After calling configureHyppot, you need to call the initialize method of the returned experiment resolver, providing the user identifier: There are two ways to know when the Hyppot SDK has finished initializing:

await resolver.initialize(userId);

The initialize method asynchronously fetches experiment data from the server and caches it in the browser's session storage for the duration of the user session. If session storage is available, the data will persist across page refreshes, eliminating the need for additional server requests during the session. If session storage is not available (for example due to the privacy settings in the user's browser), the SDK will download the experimentation data on each page load.

After the initialize method finishes, you can start using the resolver to check if current user has the experiment assigned. There are two ways of checking if the initialization finished - awaiting the initialize method, or observing the isReady property of the resolver (this may be handy for example in React applications):

resolver.initialize(userId);
if (resolver.isReady) {
  // Hyppot is ready
} else {
  // SDK is still initializing
}

Resolving Experiments

Once initialized, you can resolve experiments to determine which variant a user should see:

// Resolve an experiment by ID
const experiment = resolver.resolve('experiment-id');

if (experiment) {
  // Get a variable value from the experiment
  const featureEnabled = experiment.getVariableValue('feature-enabled');
  const buttonColor = experiment.getVariableValue('button-color');
  
  // Use these values to customize your UI
  if (featureEnabled === true) {
    // Show the feature
  }
  
  // Apply styling based on experiment
  document.querySelector('.button').style.backgroundColor = buttonColor;
}

Impression Tracking

The SDK automatically tracks impressions when you resolve an experiment. This happens in the resolve method of the ExperimentationResolver class. Each time you call resolver.resolve('experiment-id'), an impression is recorded for that experiment. By default, the impression is considered to last for 24 hours (you can customize this in the configuration). If you resolve the experiment again within this time span (for example if the user reloads the page), Hyppot will treat this as the single impression.

This automatic tracking ensures that you have accurate data on how many users were exposed to each variant of your experiments.

Tracking Conversions

Track user conversions to measure the success of your experiments, including the additional data points as metrics:

// Track a conversion event
tracker.trackConversion({
  conversionType: {
    type: 'purchase'
  },
  user: userId,
  eventDate: new Date(),
  metrics: [
    {
      name: 'value',
      value: 99.99
    },
    {
      name: 'product-id',
      value: 'product-123'
    }
  ]
});