사용자 탐색

디버깅 용도로만 사용하는 것을 권장합니다.

원격 평가 방식에서는 사용자 탐색 기능을 사용할 수 없습니다.

사용자 식별자를 확인하고 A/B 테스트, 기능플래그에 강제할당 하는 방법을 설명합니다.

아래의 의존성을 추가합니다.

npm

// javascript-sdk@12.0.0 이상일 경우
npm install @hackler/javascript-devtools@2.0.0

// javascript-sdk@11.21.0 이상 12.0.0 미만일 경우
npm install @hackler/javascript-devtools@1.0.2

// javascript-sdk@11.21.0 미만일 경우
npm install @hackler/javascript-devtools@1.0.1

yarn

// javascript-sdk@12.0.0 이상일 경우
yarn add @hackler/javascript-devtools@2.0.0

// javascript-sdk@11.21.0 이상 12.0.0 미만일 경우
yarn add @hackler/javascript-devtools@1.0.2

// javascript-sdk@11.21.0 미만일 경우
yarn add @hackler/javascript-devtools@1.0.1

javascript-sdk 버전	javascript-devtools 버전
11.13.0 <= version < 11.21.0	1.0.1
11.21.0 <= version < 12.0.0	1.0.2
12.0.0 <= version	2.0.0

사용자 탐색 설정

키	기능	기본값	지원
devTool	사용자 탐색을 사용할 수 있도록 합니다.	undefined	11.13.0+
autoOpenDevTool	사용자 탐색 버튼이 자동으로 나타나도록 하는 옵션입니다.	false	11.13.0+

• devTool 에 "@hackler/javascript-devtools" 에서 import한 HackleDevTools를 넣어주세요.

• autoOpenDevTool을 true로 설정할 경우 showUserExplorer을 호출하지 않아도 자동으로 사용자 탐색 창이 나타납니다.

기존 Hackle Client를 초기화하는 코드에 아래와 같이 옵션을 추가합니다.

JavaScript

import * as Hackle from "@hackler/javascript-sdk";
import HackleDevTools from "@hackler/javascript-devtools"

const config = {
  devTool: HackleDevTools,
  autoOpenDevTool: false,
};

// YOUR_BROWSER_SDK_KEY로 초기화
const hackleClient = Hackle.createInstance(YOUR_BROWSER_SDK_KEY, config);

// 사용자 탐색을 나타내고 싶은 시점에 Trigger 되도록 해주세요.
hackleClient.showUserExplorer()

// 사용자 탐색 창을 닫고 싶을 경우에 Trigger 되도록 해주세요.
hackleClient.hideUserExplorer()

HTML

<script src="https://cdn2.hackle.io/npm/@hackler/javascript-devtools@[호환되는 버전]/lib/index.browser.umd.min.js"></script>
<script>
  const config = {
    devTool: HackleDevTools.default,
  };

  // YOUR_BROWSER_SDK_KEY로 초기화
  const hackleClient = Hackle.createInstance(YOUR_BROWSER_SDK_KEY, config);

  // 사용자 탐색을 나타내고 싶은 시점에 Trigger 되도록 해주세요.
  hackleClient.showUserExplorer()

  // 사용자 탐색 창을 닫고 싶을 경우에 Trigger 되도록 해주세요.
  hackleClient.hideUserExplorer()

</script>

Production에서는 autoOpenDevTool 옵션을 false 로 설정하세요.

autoOpenDevTool을 true로 설정할 경우 자동으로 사용자 탐색 창이 나타납니다.

사용자 탐색 창을 나타내고 싶은 시점에 hackleClient.showUserExplorer을 호출하는 식으로 사용하시는 것을 권장합니다.

사용자 탐색 창

화면 하단에 핵클 로고 버튼이 표시됩니다. 버튼 클릭시 설정 화면으로 진입 할 수 있습니다.

사용자 식별자 확인하기

화면 상단에서 사용자 식별자를 확인 및 복사 할 수 있습니다.

사용자 강제할당

• 화면하단에서 A/B 테스트, 기능플래그의 분배 결과를 확인할 수 있습니다.

• SelectBox 클릭 시 특정 그룹으로 강제할당 할 수 있습니다.

• Reset 버튼 클릭 시 강제할당이 해제됩니다.

• Reset all 버튼 클릭시 모든 강제할당이 해제됩니다.

• 브라우저에서 강제할당한 경우 해당 브라우저에서 분배하는 경우에만 적용됩니다. (대시보드 테스트기기에 등록되지 않습니다)

• 강제할당이 적용되지 않는경우 브라우저를 새로고침 해주세요.