SDK 연동
몇 가지 단계를 거쳐 빠르게 SDK 연동을 시작해보세요.
- 단계1. SDK 의존성 추가
- 단계2. SDK 초기화
- 단계3. 사용자 이벤트 전송
- 단계4. A/B 테스트, 기능플래그
- 단계5. 종료
단계 1. SDK 의존성 추가
npm install --save @hackler/javascript-sdk
yarn add @hackler/javascript-sdk
SDK 변경 안내
현재 @hackler/hackle-sdk를 사용하고 계시다면, 기존 @hackler/hackle-sdk 에서 @hackler/javascript-sdk로 마이그레이션 해야합니다.
단계 2. SDK 초기화
hackle_client
는 SDK 기능을 사용하기 위한 메소드들을 제공하는 클래스입니다.
인스턴스화
const Hackle = require("@hackler/javascript-sdk");
// YOUR_SERVER_SDK_KEY 자리에 SDK 키를 넣습니다.
const hackleClient = Hackle.createInstance("YOUR_SERVER_SDK_KEY");
SDK 키를 전달하여 HackleClient
를 인스턴스화 합니다.
HackleClient
는 필요한 정보들을 얻기 위해 백그라운드 작업으로 핵클 서버와 주기적으로 동기화합니다.
동기화 대기
hackleClient.onReady(() => {
// SDK ready to use
http.createServer((req, res) => {
}).listen(3000)
});
SDK가 준비되기 전 사용자 요청이 들어오면 데이터가 누락될 수 있습니다.
SDK 키는 핵클 대시보드 안에서 확인할 수 있습니다.
SDK 연동 정보 에서 SDK 종류/환경 별 SDK 키를 확인 후 Server
SDK 키를 복사하여 사용하세요.
단계 3. 사용자 이벤트 전송
핵클 SDK는 사용자 이벤트를 핵클로 전송하는 기능을 제공합니다.
사용자 행동의 변화가 일어나는 지점마다 이 기능을 활용하면 사용자 행동에 대한 유의미한 데이터를 얻을 수 있으며, 그렇게 모인 데이터를 통해 사용자 행동 분석을 할 수 있습니다.
track
track()
메소드에 이벤트 키와 사용자 식별자를 전달하여 사용자 이벤트를 전송할 수 있습니다. 필요한 경우 사용자 이벤트 전송 시 숫자 값을 value
에 넣어 함께 전송할 수 있습니다.
value
는 number 타입만 넣을 수 있습니다.
예시
사용자가 구매하기 버튼을 눌렀을 때 이벤트를 수집하기 위해 purchase 라는 이벤트 키를 정의했다고 가정합니다.
이 때 구매 속성정보를 같이 수집하고 싶을 수 있습니다. 이런 경우 property에 구매 속성정보를 함께 받을 수 있습니다.
// "ae2182e0"라는 식별자를 가진 사용자가 발생시킨 "purchase"라는 이벤트를 전송
/* 예시 1: 이벤트 키만 전송 */
if (req.method === 'POST' && req.url === '/purchase') {
const user = { id: "ae2182e0" };
hackleClient.onReady(function() {
hackleClient.track({ key: "purchase" }, user)
});
// 기존 코드
}
/* 예시 2: 이벤트 키와 구매 속성정보를 함께 전송 */
if (req.method === 'POST' && req.url === '/purchase') {
const event = {
key: "purchase",
properties: {
pay_method: "CARD",
discount_amount: 800,
is_discount: true
}
}
const user = { id: "ae2182e0" };
hackleClient.onReady(function() {
hackleClient.track(event, user)
});
// 기존 코드
}
예시 1에서는 이벤트 키만 전송하고 있으며, 예시 2에서는 구매 속성정보를 함께 수집하기 위해 properties
에 구매 속성정보를 넣은 사례를 보여주고 있습니다.
사용자 이벤트 전송 확인하기
SDK 에서 전송한 사용자 이벤트가 정상적으로 수집되고 있는지 확인해보세요.
핵클 대시보드 안의 [왼쪽 메뉴바] - [이벤트 관리] 메뉴에서 SDK로 전송한 이벤트를 찾아 실시간 이벤트 수집현황을 확인해볼 수 있습니다.
단계 4. A/B 테스트, 기능플래그
A/B 테스트
A/B 테스트를 진행할 때, 테스트 그룹을 대상으로 사용자를 분배하고 각 테스트 그룹에 해당하는 로직을 작성해야 합니다. 이 때 사용자 분배를 핵클 SDK를 통해 진행할 수 있습니다.
테스트 그룹
테스트 그룹은 테스트 대상이 되는 기존안(대조군)과 개선안(실험군)을 의미하며, 개선안은 1개 이상일 수 있습니다. 대시보드에서 설정 가능하며, 테스트 그룹을 관리하는 방법에 대해서는 A/B 테스트 설정 문서를 참고하시기 바랍니다.
variation
variation()
메소드에 실험 키와 사용자 식별자를 전달하면 사용자를 분배하고 결과를 전달받을 수 있습니다. 이후 테스트 그룹 별 로직을 구현합니다.
실험 키는 각 A/B 테스트별로 갖게 되는 고유 번호이며, 핵클 서비스 내의 대시보드에서 확인할 수 있습니다.
아래 예제 코드에서는 실험 키 42를 전달하고 있으며, 테스트 그룹은 A와 B 두 개가 존재합니다.
// 실험 키가 42인 A/B 테스트에서
// "ae2182e0"라는 식별자를 가진 사용자에게 노출할 테스트 그룹을 결정합니다.
// 결정하지 못하는 상황인 경우 테스트 그룹 A를 반환합니다.
hackleClient.onReady(function() {
const user = { id: "ae2182e0" };
const variation = hackleClient.variation(42, user);
if (variation === "A") {
// 그룹 A 로직
} else if (variation === "B") {
// 그룹 B 로직
}
});
기능플래그
기능 플래그는 SDK 버전 2.0.0 이상인 경우 사용 가능합니다.
기능 플래그를 사용하시는 경우 의존성 추가 시 SDK 버전을 2.0.0 이상으로 적용하시기 바랍니다.
기능 플래그는 켜짐(on) 상태와 꺼짐(off) 상태가 있습니다. 각 상태에 따라 다른 기능을 설정하게 됩니다.
기능 플래그를 적용한 기능에 어떤 사용자가 접근할 경우 켜짐 혹은 꺼짐 상태를 받을 수 있어야 합니다. 이 상태 결정을 핵클 SDK를 통해 진행할 수 있습니다.
isFeatureOn
isFeatureOn()
메소드에 기능 키를 전달하면 사용자에 대한 상태 결과를 전달받을 수 있습니다. 이후 상태에 따른 로직을 구현합니다.
기능 키는 각 기능 플래그별로 갖게 되는 고유 번호이며 핵클 서비스 내의 대시보드에서 확인하실 수 있습니다.
아래 예제 코드에서는 기능 키 42를 전달하고 있으며, 상태를 받을 사용자의 사용자 식별자는 "ae03e1adf" 입니다.
// SDK가 준비된 이후에 실행이 되어야합니다. onReady로 감싸는 것을 잊지 마세요.
hackleClient.onReady(function() {
// 기능 키가 42인 기능 플래그에서 사용자의 상태를 결정합니다.
// 결정하지 못하는 상황인 경우 false(꺼짐 상태)를 반환합니다.
const featureOn = hackleClient.isFeatureOn(42, "ae03e1adf");
// 상태 별 로직
if (featureOn) {
// ON 기능
} else {
// OFF 기능
}
});
분배결과 확인하기
핵클 대시보드 안의 [왼쪽 메뉴바] - [A/B 테스트 또는 기능플래그] 화면에서 노출되는 A/B테스트 또는 기능플래그 리스트 중 연동한 대상을 찾아 상세 페이지로 이동 한 후 화면 중간에 [실시간 노출 현황] 탭을 클릭하면 SDK로 연동 된 분배 결과를 볼 수 있습니다.
단계 5. 종료
process.on('SIGINT', function() {
// kill signal
hackleClient.close();
});
어플리케이션이 종료될 때 close()
메소드를 호출해야 합니다. 이 과정을 통해 사용 중인 리소스를 반납하고 남아있는 이벤트를 전송합니다. 이 과정 없이 어플리케이션이 종료되면 이벤트가 누락될 수 있습니다.
Updated 11 months ago