JavaScript

JavaScript SDK는 IE11+ 및 모든 주요 브라우저를 지원합니다.

JavaScript SDK를 사용하기 위해서는 Promise, Map API가 필수로 지원되어야 합니다. 폴리필이 필요하다면 core-js를 이용하는 것을 추천합니다.

프레임워크 지원

• Angular, Vue 또는 기타 프레임워크에서 JavaScript SDK를 사용할 수 있습니다.

• React를 사용중이라면 React 가이드를 참고해주세요.

• Next.JS를 사용중이라면 Next.js 가이드를 참고해주세요.

• Google Tag Manager를 통한 연동 방법은 GTM 문서를 확인해주세요.

특정 환경 및 프레임워크에 대한 지원이 필요하시면 핵클 슬랙 커뮤니티 또는 [email protected]로 문의해주세요.

의존성 추가

NPM

npm install --save @hackler/javascript-sdk

YARN

HTML

SDK 초기화

SDK를 사용하기 위해서 반드시 HackleClient 를 초기화 해야 합니다.

• HackleClient는 SDK의 기능을 사용하기 위한 메소드들을 제공하는 클래스입니다.

• SDK 키는 핵클 서비스의 대시보드 안에 위치한 SDK 연동 정보에서 확인하실 수 있습니다.

JavaScript

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

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

HTML

초기화 완료

초기화는 비동기로 실행되며, 핵클 서버로부터 필요한 정보들을 가져와서 SDK에 저장합니다. await으로 초기화 완료 전까지 대기할 수 있습니다.

초기화가 완료 되기 전에 A/B 테스트, 기능 플래그를 호출하면 기본 그룹(A), 꺼짐(false)을 리턴합니다.

async function initHackle(){
  await hackleClient.onInitialized();
  // SDK ready to use
}

// deprecated
hackleClient.onReady(() => {
  // SDK ready to use
});

초기화 설정정보

설정정보를 포함하여 SDK를 초기화 할 수 있습니다.

const config = {
  debug: true
};

const hackleClient = Hackle.createInstance("YOUR_BROWSER_SDK_KEY", config);

설정 옵션

설정	기능	기본값	지원 버전
debug	모든 기능에 대한 로그를 콘솔에 출력합니다.	false	1.0.0+
pollingIntervalMillis	대시보드에서 설정한 정보를 주기적으로 업데이트 할 수 있습니다. 최솟값 : 60000 (60초)	-1 (주기적으로 업데이트하지 않음)	11.1.0+
exposureEventDedupIntervalMillis	동일한 사용자가 연속으로 발생시킨 동일한 A/B 테스트, 기능플래그 분배결과에 대한 노출 이벤트를 제거합니다. 최솟값: 1000 (1초) 최댓값: 3600000 (1시간)	60000 (1분 / 11.23.0 이상) -1 (중복제거 하지 않음 / 11.23.0 미만)	11.1.0+
devTool	사용자 탐색을 사용할 수 있도록 합니다.	undefined	11.13.0+
autoOpenDevTool	사용자 탐색 버튼이 자동으로 나타나도록 하는 옵션입니다.	false	11.13.0+
sameSiteCookie	핵클 쿠키에 sameSite 플래그를 설정하고 쿠키 개인정보 보호 정책을 결정합니다.	Lax	11.20.0+
secureCookie	true로 설정하시면 핵클 쿠키에 Secure 플래그를 설정합니다.	false	11.20.0+
user	초기화 시점에 사용자를 주입합니다.	undefined	11.22.3+
sessionPolicy	세션 유지 조건과 만료 조건을 설정합니다.	ALWAYS_NEW_SESSION , 1800000	11.54.0+
optOutTracking	옵트아웃 활성화 여부.	false	11.54.0+
sessionTimeoutMillis (deprecated)	세션만료 시간을 설정합니다. sessionPolicy를 사용해 주세요.	1800000 (30분)	11.8.0+

세션 정책 설정

세션 정책을 설정하여 세션의 유지 조건과 만료 조건을 제어할 수 있습니다.

const config = {
    sessionPolicy: {
        timeoutMillis: 3600000,
        persistCondition: HackleSessionPersistConditions.NULL_TO_USER_ID
    }
};

const hackleClient = Hackle.createInstance("YOUR_BROWSER_SDK_KEY", config);

초기화 시 사용자 주입

config에 user를 설정한 경우 유저 정보를 포함하여 SDK를 초기화 할 수 있습니다.

• 유저 정보를 포함하지 않으면 쿠키에 저장된 유저 정보를 사용합니다.

• 유저 정보를 포함하는 경우 쿠키에 저장된 유저 정보는 사용하지 않습니다.

• 쿠키에 저장된 유저 정보가 없는 경우 Hackle Device ID를 device id로 가지고 유저를 사용합니다.

유저 정보는 SDK 초기화 이후에도 유저 정보 설정 함수를 통해 자유롭게 수정 할 수 있습니다.

초기화 시 주입한 유저 정보와 쿠키에 저장된 유저 정보는 병합하지 않습니다.

ex) 쿠키에 userId: A 가 저장된 상태에서 초기화 시 deviceId: B 를 주입하는 경우, userId: null, deviceId: B인 유저로 설정됩니다.

const user = {
  userId: "LOGIN_ID",
  deviceId: "CUSTOM_DEVICE_ID"
};

const config = {
  user: user
};

const hackleClient = Hackle.createInstance("YOUR_BROWSER_SDK_KEY", config);

대시보드 설정 정보 갱신

대시보드 설정 정보를 명시적으로 갱신 할 수 있습니다.

해당 함수는 60초에 한번 제한적으로 호출할 수 있습니다.

hackleClient.fetch();