📘

@hackler/hackle-sdk를 사용하고 계시다면, @hackler/javascript-sdk로 마이그레이션 해야합니다.

1. SDK 의존성 추가

npm install --save @hackler/javascript-sdk

yarn add @hackler/javascript-sdk

2. SDK 초기화

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

SDK 를 사용하기 위해서는 hackleClient 초기화가 필요합니다.

인스턴스화

SDK 키를 전달하여 hackleClient를 인스턴스화 합니다.
hackleClient는 필요한 정보들을 얻기 위해 백그라운드 작업으로 핵클 서버와 주기적으로 동기화합니다.

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

const Hackle = require("@hackler/javascript-sdk");

// YOUR_SERVER_SDK_KEY 자리에 SDK 키를 넣습니다.
const hackleClient = Hackle.createInstance("YOUR_SERVER_SDK_KEY");

동기화 대기

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테스트 또는 기능플래그 리스트 중 연동한 대상을 찾아 상세 페이지로 이동 한 후 화면 중간에 [실시간 노출 현황] 탭을 클릭하면 SDK로 연동 된 분배 결과를 볼 수 있습니다.

5. 종료

🚧

아래 과정없이 어플리케이션이 종료되면 이벤트가 누락될 수 있습니다

process.on('SIGINT', function() {
  // kill signal
  hackleClient.close();
});

어플리케이션이 종료될 때 close() 메소드를 호출해야 합니다. 이 과정을 통해 사용 중인 리소스를 반납하고 남아있는 이벤트를 전송합니다. 이 과정 없이 어플리케이션이 종료되면 이벤트가 누락될 수 있습니다.