Skip to main content
Version: v1

Statsig A/B Tests

Statsig is the preferred experimentation platform for Beam Impact and is frequently used for A/B testing a Beam integration to show the impact that the Beam experience has in driving positive sales metrics for our partners.

This guide will walk through an implementation of Statsig to enable an A/B test of the Beam experience vs. a Control case (the existing, non-Beam experience).

Beam provides a plugin to use Statsig for A/B testing. To use it, add the plugin to the init() command that was already configured.

Plugin​

import { init } from "https://sdk.beamimpact.com/web-sdk/{{ settings.beam_sdk_version }}/dist/integrations/beam.js"
import { StatsigPlugin } from "https://sdk.beamimpact.com/web-sdk/{{ settings.beam_sdk_version }}/dist/integrations/statsig.js"

const beam = await init({
  apiKey: "abc123", // Beam SDK API Key
  /* ... See Beam Configuration Options ... */
  plugins: [
    new StatsigPlugin({ statsigApiKey: "statsig_client_key_here" }) 
  ],
};

Setup​

Setup for A/B tests is async (it takes a few milliseconds to load).

Waiting for Beam A/B test setup to be ready in other scripts:

import { getConfig } from "https://sdk.beamimpact.com/web-sdk/{{ settings.beam_sdk_version }}/dist/integrations/beam.js"
const beam = getConfig();
await beam.readyPromise; // Resolves when plugins are all ready

// OR use event listeners
if (beam.status !== "ready") {
  beam.addEventListener("beamstatuschange", (event) => {
    const status = event.detail.status;
    if (status === "ready") doSomething(beam);
    else if (status === "error") handleError(event.detail.error);
  });
}

Events​

Initializing the Statsig plugin will automatically log statsig_init, cart_created, and order_created events.

To manually log additional events:

beam.plugins.statsig.logEvent(eventName, eventValue, metadataObject);

Visibility​

Once initialized, all Beam widgets have display: none unless user is assigned to A/B test group that shows Beam.

To hide additional elements, add the CSS className beam-sync-visibility to them. Elements with this class will automatically have display: none if the user can't see Beam.

Experiment Values​

To access the experiment state in JavaScript:

import { getConfig } from "https://sdk.beamimpact.com/web-sdk/{{ settings.beam_sdk_version }}/dist/integrations/beam.js";

getConfig().plugins.statsig.experiments.shouldShowBeam; // boolean