A/B testing on modern frontend frameworks

note

Use client-side SDKs corresponding to the preferred framework to run experiments or feature flags. If the Feature Experimentation module is unavailable or if SDK installation is not desired, follow the workaround described in this article to run experiments using the Activation API.

Context

Modern JavaScript client-side frameworks (React, Angular, Vue, etc.) manage the DOM tree and elements (often implementing a virtual DOM). This internal management makes implementing client-side tests difficult outside of the specific framework because DOM manipulations conflict with framework behavior. External modifications to elements or logic are often overwritten.

Workarounds exist for these issues, such as using DOM Mutation Observers, but external code must handle these carefully. Rather than using an intrusive external approach, implement variations directly in the existing React, Angular, or Vue codebase and trigger experiments programmatically. This logic mirrors SDK usage—the Kameleoon frontend engine serves as the equivalent of the JavaScript SDK.

note

Techniques described in this article require redeploying the JS source code to launch experiments or personalizations. While this approach simplifies coding, it lacks the flexibility of standard Kameleoon methodologies that allow launches without IT deployments. A developer with repository access must perform the implementation.

External implementation of JS experiments (via Kameleoon's injected code) or a combination of both approaches remains possible.

To use the Activation API methods presented here, install Kameleoon in the client-side application following this documentation.

info

The installation process matches that of a standard website—add an external JavaScript application file containing the Kameleoon engine and the Activation API.

Verify Kameleoon is fully loaded before running application code that triggers experiments by listening for the Kameleoon::Started event. Alternatively, load the Kameleoon script synchronously in the HTML loader page before the framework code.

Creation and configuration of the experiment

The steps match those of standard A/B experiments (variation creation, goal selection, and analytics integration). Note the following requirements:

• Create an experiment using the code editor.
• Select the Explicit trigger targeting condition to trigger the experiment manually via the API.

Note the experiment and variation IDs for use in the code.

note

Leave the JS code for variations empty in most cases. However, including JSON data in variations is useful for retrieving parameters in application code; these parameters can be updated in the Kameleoon interface without requiring further redeployments.

Sample Code to trigger an experiment

The code sample below demonstrates how to trigger an experiment and obtain the associated variation for the current user. Kameleoon.API.Experiments.getAll() does not include experiments that are not launched via the interface. This setup allows for preparing code deployments and launching experiments independently—typically, IT teams plan deployments while product owners schedule launches.

var variationID;

// Make sure Kameleoon is loaded and active at this point
var experiment = Kameleoon.API.Experiments.getById(75253);

/*
  The experiment is not currently live (not launched yet, or paused).
  The default behavior should take place.
*/
if (!experiment) {
  variationID = 0;
} else {
  Kameleoon.API.Experiments.trigger(experiment.id, false);

  /*
    The experiment is not activated, which usually means the user has not been
    assigned a variation (part of the traffic was not assigned to any variation),
    or capping requirements are not met. Again, the default behavior should happen.
  */
  if (!experiment.associatedVariation) {
    variationID = 0;
  } else {
    variationID = experiment.associatedVariation.id;

    /*
      Illustration of the JSON parameterization technique - the additionalParameters
      variable will now be equal to the JSON content we set in Kameleoon's back-office.
    */
    var additionalParameters = Kameleoon.API.Variations.execute(variationID);
  }
}

// This code implements the changes related to the experiment

if (0 == variationID) {
  // Default / reference number of products to display
  recommendedProductsNumber = 5;
} else if (148382 == variationID) {
  // Variation updating the number of recommended products to 10
  recommendedProductsNumber = 10;
} else if (187791 == variationID) {
  // Variation updating the number of recommended products to 8
  recommendedProductsNumber = 8;
}

Configure JS variation code in the Kameleoon interface as follows to retrieve variation-dependent JSON data in the application:

return {timeout: 500, errorMessage: "Something went wrong", productIDs: [536, 892]};