Variation Distribution

When running an A/B Test, you need to distribute users across Variations and implement logic for each Variation. You can use the Hackle SDK to handle user distribution.

useVariation or useLoadableVariation

You can distribute users to a specific Variation and receive the result using Hackle's provided components or Hooks API. You must pass the Experiment Key when distributing.

Parameter	Type	Required	Constraints
Experiment Key (key)	int	Required	-

Example

In the example code below, Experiment Key 42 is passed, and there are two Variations: A and B.

Component 사용

import {HackleExperiment, HackleVariation} from "@hackler/react-sdk";

function App() {
  return (
    // 실험 키가 42인 A/B 테스트에서 사용자에게 노출할 테스트 그룹을 결정합니다.
    // 결정하지 못하는 상황인 경우 테스트 그룹 A를 반환합니다.
    <HackleExperiment experimentKey={42}>
      <HackleVariation variation={"A"}>
        <AwesomeFeature />
      </HackleVariation>
      <HackleVariation variation={"B"}>
        <SuperAwesomeFeature />
      </HackleVariation>
    </HackleExperiment>
  )
}

Hooks API 사용

// 일반적인 경우
function App() {
  // 실험 키가 42인 A/B 테스트에서 사용자에게 노출할 테스트 그룹을 결정합니다.
  // 결정하지 못하는 상황인 경우 테스트 그룹 A를 반환합니다.
  const variation = useVariation(42)

  // 할당받은 그룹에 대한 로직
  if (variation === "A") return <AwesomeFeature />
  if (variation === "B") return <SuperAwesomeFeature />
  return <AwesomeFeature />
}

// SSR 사용 시
function App() {
  // 실험 키가 42인 A/B 테스트에서 사용자에게 노출할 테스트 그룹을 결정합니다.
  // 결정하지 못하는 상황인 경우 테스트 그룹 A를 반환합니다.
  const { isLoading, variation } = useLoadableVariation(42)

  // SDK Loading 전 컴포넌트 비노출
  if (isLoading) return null

  // 할당받은 그룹에 대한 로직
  if (variation === "A") return <AwesomeFeature />
  if (variation === "B") return <SuperAwesomeFeature />
  return <AwesomeFeature />
}

useVariationDetail or useLoadableVariationDetail

The useVariationDetail() Hooks API works the same as useVariation() but also provides the reason for the distribution decision. This method is useful for verifying that distribution is working correctly.

Parameter	Type	Required	Constraints
Experiment Key (key)	int	Required	-

Example

You must pass the Experiment Key as a parameter. In the example code below, Experiment Key 42 is passed.

// 분배 결정 상세
const decision = useVariationDetail(42)

// 분배 그룹
const variation = decision.variation

// 분배 결정 사유
const reason = decision.reason

// SSR 사용 시
// 분배 결정 상세
const { isLoading, decision } = useLoadableVariationDetail(42)

// 분배 그룹
const variation = decision.variation

// 분배 결정 사유
const reason = decision.reason

Distribution Reason

The distribution decision reason is returned in the format SDK_NOT_READY. See the table below for details.

Distribution Reason	Description	Distribution Result
SDK_NOT_READY	The SDK is not ready to use. (e.g., initialization attempted with an invalid SDK Key)	A (Control Group)
EXPERIMENT_NOT_FOUND	No A/B Test was found for the provided Experiment Key. The Experiment Key may be incorrect, or the experiment may be archived.	A (Control Group)
NOT_IN_MUTUAL_EXCLUSION_EXPERIMENT	The experiment is included in Mutually Exclusive Settings, but the user was not assigned to that Mutually Exclusive Group.	A (Control Group)
EXPERIMENT_DRAFT	The A/B Test is in draft state.	A (Control Group)
EXPERIMENT_PAUSED	The A/B Test is paused.	A (Control Group)
EXPERIMENT_COMPLETED	The A/B Test has ended.	Winning Variation selected at completion
OVERRIDDEN	The user was assigned to a specific group by Override.	Override-assigned group
NOT_IN_EXPERIMENT_TARGET	The user is not an A/B Test target.	A (Control Group)
TRAFFIC_NOT_ALLOCATED	The A/B Test is running, but the user was not allocated to the test.	A (Control Group)
TRAFFIC_ALLOCATED	The user has been allocated to the A/B Test.	Allocated group
VARIATION_DROPPED	The originally allocated group has been removed from the test.	A (Control Group)
INVALID_INPUT	The input value is invalid.	A (Control Group)
EXCEPTION	An unknown error occurred.	A (Control Group)

Parameters

This feature is supported in React SDK version 11.7.3 and above.

• You can also receive the parameter values for the assigned Variation via the useVariationDetail() Hooks API.

• You can use the config object and get() method to retrieve the Parameter Settings configured on the A/B Test screen. If you change the value on the A/B Test parameter settings screen, the updated value is applied to your code.

• The parameterKey in the get() method is the key configured in the A/B Test parameter settings, and defaultValue is the value returned when distribution fails or an incorrect parameter type value is provided.

• To correctly retrieve the configured value, you must enter a value of the type matching the parameter type you configured in defaultValue.

Type	Value Type	Description
get	string, number, boolean	Returns the configured parameter value. JSON type can be received as a string (String). The default value for JSON type must be entered as a string type.

Example

// 분배 결정 상세
const decision = useVariationDetail(42)

//분배 결정 상세에서 get() 메소드를 통해 parameter 값 가져오기
const parameterValue = decision.get("parameterKey", "defaultValue")

// string 유형의 parameter값 예제
const strValue = decision.get("parmeterKey", "defaultValue")


// SSR 사용 시
// 분배 결정 상세
const { isLoading, decision } = useLoadableVariationDetail(42)

//분배 결정 상세에서 get() 메소드를 통해 parameter 값 가져오기
const parameterValue = decision.get("parameterKey", "defaultValue")

// string 유형의 parameter값 예제
const strValue = decision.get("parmeterKey", "defaultValue")