When conducting an A/B test, not only do you need to distribute your users to different test groups, you also need to write a logic for each test group. After the integration stages, the distribution of users into different test groups can be done through the Hackle SDK.

📘

Test Groups

The test groups are basically the different groups that are exposed to the versions (features, screens, algorithms, etc) of a page of an experiment. Test Groups include both the control test group A and treatment test groups B, C, D, etc., that are exposed to the "improved" versions of the pages.
The test groups can be set on the dashboard and further information on the test groups can be found on the What is a Test Group? document.

useVariation

You can use components provided by Hackle or use Hooks API to distribute users to specific groups and receive distribution results. When distributing, you must pass the experiment key.

In the example code below, we are passing the experimental key 42, and there are two test groups, A and B.

function App() {
  return (
    // Determines the test group to assign the user in an A/B tests with an experiment key of 42.
    // For undetermined cases, the user is returned to test group A. 
    <HackleExperiment experimentKey={42}> 
      <HackleVariation variation={"A"}>
        <AwesomeFeature />
      </HackleVariation>
      <HackleVariation variation={"B"}>
        <SuperAwesomeFeature />
      </HackleVariation>
    </HackleExperiment>
  )
}

function App() {
  // Determines the test group to assign the user in an A/B tests with an experiment key of 42.
  // For undetermined cases, the user is returned to test group A. 
  const variation = useVariation(42)
  
  // Logic for the assigned test group.
  if (variation === "A") return <AwesomeFeature />
  if (variation === "B") return <SuperAwesomeFeature />
  return <AwesomeFeature />
}

useVariationDetail

The useVariationDetail() Hooks API works the same as useVariation() but provides the reason for a user being distributed to a specific group. This method can be a useful tool to see if the distribution is working properly.
You must pass the experiment key as a parameter. For the example code below, we are passing experimental key 42.

// Traffic distribution details 
const decision = useVariationDetail(42)

// Test group determined from distribution
const variation = decision.variation

// Reason for distribution to a test group
const reason = decision.reason

You will receive the reason for the distribution or the allocation of a specific user to a specific test group in the form of SDK_NOT_READY. Please refer to the table below for the full list of different distribution reasons.

Parameter

• Parameter values of the distributed group can also be provided through the variationDetail() method.
• Through the config object and the get() method, you can receive and use the parameter setting value set in the dashboard, and if you change the value in the A/B test parameter setting tab, the changed value is applied to the code.

📘

Parameter setting is only available for SDK version 11.3.0 or higher.

// Traffic distribution details
const decision = useVariationDetail(42)
// or const { isLoading, decision } = useLoadableVariationDetail(42)

// Get parameter value through get() method in traffic distribution details
const parameterValue = decision.get("parameterKey", "defaultValue")

// Get config information with full parameter setting values in traffic distribution decision details
const config = decision.config

// Same result value as decision.get() above
const configParameterValue = config.get("parameterKey", "defaultValue")

// Example of string type parameter value
const strValue = decision.get("parmeterKey", "defaultValue")
const strValueInConfig = config.get("parmeterKey", "defaultValue")

• The parameterKey of the get() method is the key information set in A/B Test Parameter Settings and the defaultValue is the value returned when the distribution decision fails or when the wrong parameter type is entered.
• In order to properly receive the information you set in the dashboard, you must enter a value corresponding to the parameter type of defaultValue you set in the dashboard.
• JSON type is received in the form of a string, so in the case of JSON type, the defaultValue must be entered as a string type.
• The parameter types supported by SDK are string, number, and boolean. JSON types set in the dashboard can be received in the form of String. The default value of the JSON type must be entered as a string type.