npm install --save @hackler/javascript-sdk

yarn add @hackler/javascript-sdk

<!-- HTML의 경우 의존성 추가 작업이 필요하지 않습니다 -->

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

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

<!-- 기존 코드 head 안에 추가 -->
<script src="https://cdn2.hackle.io/npm/@hackler/[email protected]/lib/index.browser.umd.min.js"></script>
<script>
  // YOUR_BROWSER_SDK_KEY로 초기화
  window.hackleClient = Hackle.createInstance("YOUR_BROWSER_SDK_KEY");
</script>

const config = {
  debug: true
};

// 설정정보를 포함하여 초기화
const hackleClient = Hackle.createInstance("YOUR_BROWSER_SDK_KEY", config);

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

hackleClient.fetch();

const userId = ... // 로그인한 사용자의 ID (회원번호, 멤버 ID 등)
hackleClient.setUserId(userId);

import { PropertyOperationsBuilder } from "@hackler/javascript-sdk"

const operations = new PropertyOperationsBuilder()
    .set("age", 42)
    .set("grade", "GOLD")
    .build();

hackleClient.updateUserProperties(operations);

<script>
  const operations = new Hackle.PropertyOperationsBuilder()
      .set("age", 42)
      .set("grade", "GOLD")
      .build();

  hackleClient.updateUserProperties(operations);
</script>

hackleClient.resetUser();

// 이벤트 수집
hackleClient.track('purchase')

// 이벤트를 속성과 함께 수집
const event = {
  key: "purchase",
  properties: {
    amount: 4200,
    pay_method: "CARD",
    is_discount: false,
    product_ids: [42, 43]
  }
}
hackleClient.track(event);

// SDK가 준비된 이후에 실행이 되어야합니다. onReady로 감싸는 것을 잊지 마세요.
hackleClient.onReady(function() {
  
  // 실험 키가 42인 A/B 테스트에서 사용자에게 노출할 테스트 그룹을 결정합니다.
  // 결정하지 못하는 상황인 경우 테스트 그룹 A를 반환합니다.
  const variation = hackleClient.variation(42);

  // 할당받은 그룹에 대한 로직
  if (variation === "A") {
    // 그룹 A 로직
  } else if (variation === "B") {
    // 그룹 B 로직
  }
});

// SDK가 준비된 이후에 실행이 되어야합니다. onReady로 감싸는 것을 잊지 마세요.
hackleClient.onReady(function() {
  
  // 기능 키가 42인 기능 플래그에서 사용자의 상태를 결정합니다.
  // 결정하지 못하는 상황인 경우 false(꺼짐 상태)를 반환합니다.
  const isOn = hackleClient.isFeatureOn(42);

  // 상태 별 로직
  if (isOn) {
    // ON 기능
  } else {
    // OFF 기능
  }
});