테스트 그룹 분배

A/B 테스트를 진행할 때, 테스트 그룹을 대상으로 사용자를 분배하고 각 테스트 그룹에 해당하는 로직을 작성해야 합니다. 이 때 사용자 분배를 핵클 SDK를 통해 진행할 수 있습니다.

useVariation or useLoadableVariation

핵클이 제공하는 컴포넌트를 사용하거나 Hooks API를 사용하여 사용자를 특정 그룹으로 분배하고 분배 결과를 전달받을 수 있습니다. 분배 시에는 실험 키를 전달해야 합니다.

파라미터	타입	필수	제약사항
실험 키 (key)	int	필수	-

예제

아래 예제 코드의 경우 실험 키 42를 전달하고 있으며, 테스트 그룹은 A와 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

useVariationDetail() Hooks API는 useVariation()와 동일하게 동작하고 분배된 사유를 같이 제공합니다. 이 메소드는 분배가 잘 되고 있는지 살펴볼 때 유용하게 사용할 수 있습니다.

파라미터	타입	필수	제약사항
실험 키 (key)	int	필수	-

예제

파라미터로 실험 키를 전달해야 합니다. 아래 예제 코드의 경우 실험 키 42를 전달하고 있습니다.

// 분배 결정 상세
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

분배 사유

분배 결정 사유는 SDK_NOT_READY 와 같은 형태로 받게 됩니다. 자세한 내용은 아래 표를 참고해주세요.

분배 사유	설명	분배 결과
SDK_NOT_READY	SDK 사용 준비가 되지 않았습니다. (예: 잘못된 SDK 키로 초기화 시도)	A (기본 그룹)
EXPERIMENT_NOT_FOUND	전달한 실험 키에 대한 A/B 테스트를 찾을 수 없습니다. 실험 키가 잘못되었거나 해당 실험이 보관 상태일 수 있습니다.	A (기본 그룹)
NOT_IN_MUTUAL_EXCLUSION_EXPERIMENT	실험이 상호 배타적 설정에 포함되어 있지만 해당 상호 배타적 그룹에 할당되지 않은 경우	A (기본 그룹)
EXPERIMENT_DRAFT	A/B 테스트가 준비 상태입니다.	A (기본 그룹)
EXPERIMENT_PAUSED	A/B 테스트가 일시 정지 상태입니다.	A (기본 그룹)
EXPERIMENT_COMPLETED	A/B 테스트가 종료되었습니다.	종료 시 선택한승리 그룹
OVERRIDDEN	사용자가 수동할당에 의해 특정 그룹으로 결정되었습니다.	수동 할당한 그룹
NOT_IN_EXPERIMENT_TARGET	사용자가 A/B 테스트 타겟이 아닙니다.	A (기본 그룹)
TRAFFIC_NOT_ALLOCATED	A/B 테스트가 실행 중이지만 사용자가 테스트에 할당되지 않았습니다.	A (기본 그룹)
TRAFFIC_ALLOCATED	사용자가 A/B 테스트에 할당되었습니다.	할당된 그룹
VARIATION_DROPPED	원래 할당된 그룹이 테스트에서 제외되었습니다.	A (기본 그룹)
INVALID_INPUT	입력값이 유효하지 않습니다.	A (기본 그룹)
EXCEPTION	알 수 없는 오류가 발생했습니다.	A (기본 그룹)

파라미터

React SDK 11.7.3 이상 버전에서 지원하는 기능입니다.

• useVariationDetail() Hooks API를 통해 분배된 그룹의 파라미터 값도 같이 제공받을 수 있습니다.

• config 객체와 get() 메소드를 통해 A/B 테스트 화면에서 설정한 파라미터 설정 값을 받아 활용할 수 있으며 A/B 테스트의 파라미터 설정 화면에서 값을 변경할 경우, 변경된 값이 코드에 적용됩니다.

• get() 메소드의 parameterKey는 A/B 테스트의 파라미터 설정에서 설정한 키 정보이며 defaultValue는 분배 결정 실패 시, 또는 잘못된 파라미터 유형의 값을 넣었을 때 Return되는 값입니다.

• 설정한 정보를 제대로 받기 위해서는 defaultValue에 설정하신 파라미터 유형에 맞는 type의 값을 입력해야 합나다.

구분	value type	설명
get	string, number, boolean	설정된 parameter값을 반환합니다. JSON 타입은 문자열(String)형태로 받을 수 있습니다. JSON 타입의 default 값은 문자열 타입으로 입력해야 합니다.

예제

// 분배 결정 상세
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")