핵클(Hackle) - 시작하기(개발환경세팅)

React기준(Next.js 환경)으로 사용법이 작성되었습니다.

1. 핵클이 뭐에요?

• https://hackle.io/ko/service/
• 웹 사이트, 모바일 앱, API 등 클라이언트와 서버에서 동작하는 모든 기능을 테스트 및 분석할 수 있는 플랫폼

2. 핵클 회원가입을 진행하여 키를 확인 하세요.

• 운영 SDK(소프트웨어 개발 키트)키와 개발 SDK키를 확인하세요
• SDK키 종류에는 '클라이언트 측'과 '서버 측'이 존재합니다.
  

3. SDK키로 뭐해요?

1. 테스트 그룹 분배
  - 어떤 테스트 그룹(A,B,C)에서 테스트가 진행되었는지 핵클에 집계가 됩니다
2. 기능 플래그
  - 사용자에 대해 특정 기능의 출시여부를 핵클에 집계가 된다
3. 사용자 이벤트 전송
  - 사용자가 어떤 행동을 했는지 핵클에 집계가 된다
4. 데이터 세부 분석
  - 사용자에 대해 분석 기준값을 수집하여 심도 있는 분석이 가능하다
5. 타겟팅
  - 특정 유저에게만 A/B 테스트에 참여할 수 있게 한다

4. 개발 세팅하자

1) 설치 진행

yarn add @hackler/react-sdk

2) SDK 초기화(설정)

- `HackleReactSDKClient`를 SDK키로 초기화하세요. (디버그 모드 ON)

GTM을 사용하여 연동을 진행할 경우, Hackle SDK 초기화를 하고, SDK를 GTM 에서 접근할 수 있도록 window에 추가 선언이 필요합니다.

import {createInstance, HackleProvider} from "@hackler/react-sdk";

// 설정정보를 포함하여 초기화
const config = {
  debug: true
};

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

function MyApp({Component, pageProps}) {
  return (
    <HackleProvider hackleClient={hackleClient} supportSSR>
      <Component {...pageProps} />
    </HackleProvider>
  )
}

export default MyApp

• 명시적으로 대시보드를 업데이트 하는 방법(60초에 1번만 호출가능) : hackleClient.fetch();

3) 핵클에 사용자 정보를 넘겨보자!

• userId를 넘길 수도 있고, 유저에 대한 속성 데이터를 넘길수도 있다
  *속성 데이터 예시 : 나이 : 20대이다, 성별: '여' 이다.

  1) userId 설정 방법
  	- hackleClient.setUserId(userId);
      - 로그인 시 한번만 설정하면 됩니다.
      - 이미 로그인이 되어있는 사용자의 경우에는 로그인한 정보를 가지고 오는 시점에 호출하면 됩니다
      
  2) 사용자 속성 설정 방법
     import { PropertyOperationsBuilder } from "@hackler/react-sdk"
  
     const operations = new PropertyOperationsBuilder()
          .set("age", 42)
          .set("grade", "GOLD")
          .build();
  
     hackleClient.updateUserProperties(operations);

로그아웃시, 아래의 로직을 실행하여 데이터 수집을 막을 것

• 사용자 ID
• 사용자 속성

hackleClient.resetUser();

4) 사용자가 어떻게 행동하는지 살펴보자!

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

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