핵클 라이브러리 : A/B 테스트, 기능 플래그, 실시간 데이터 분석, 모니터링

핵클은 A/B테스트 , 기능 플래그, 실시간 데이터분석 모니터링 툴이다.

핵클 라이브러리: 간편한 A/B테스트

A/B테스트는 신규 기능을 도입할 때 주로 쓰인다.

 

일부 고객들에게는 기존 기능을, 나머지 고객들에게는 새로운 기능을 보여주고 두 기능중 어떤 것이 더 효과적인지를 판단하는 방법이다.

 

핵클 도입전에는 A페이지, B페이지를 만들고 일정확률로 B페이지로 리다이렉트 시키는 방법을 사용했다.

 

핵클 도입 이후, 테스트를 원하는 특정 섹션에만 A/B테스트를 세팅하여 코드양을 줄이고 생산성도 증대되었다.

 

하기 코드는 next.js에서 사용한 A/B테스트 세팅, _app.tsx SDK초기화 코드이다. (공식문서)

 

- A/B테스트 세팅

//동일한 컴포넌트내에서 A/B테스트 세팅, B페이지를 따로 만들지 않아도 된다.
const Component = () => {
	const variation = useVariation(8); //핵클 실험키
    ...
    
    return (
	<>
	{variation === 'A' ? <Hello /> : <Bye />}
	</>

	)

 

//_app.tsx에서 sdk초기화
//sdk 연동은 최초 1회만 진행한다.
import { AppProps } from 'next/app';
...
import React from 'react';
import { createInstance, HackleProvider } from '@hackler/react-sdk';

const App = ({ Component, pageProps }: AppProps) => {
  let hackleClient;
  
  //next는 SSR이기 때문에, 다음과 같이 CSR일때만 핵클이 작동하도록 함
  if (process.browser && process.env.NEXT_PUBLIC_HACKLE_SDK_KEY) {
    hackleClient = createInstance(process.env.NEXT_PUBLIC_HACKLE_SDK_KEY, {
      debug: false,
      auto_track_page_view: true
    });
    console.log(process.env.NEXT_PUBLIC_HACKLE_SDK_KEY, hackleClient);
  }
  store.utmSource.set();
  return (
   <>
        {hackleClient ? (
          <HackleProvider hackleClient={hackleClient}>
            <Component {...pageProps} />
          </HackleProvider>
        ) : (
          <Component {...pageProps} />
        )}
   </>
  );
};

export default App;

 

트래킹 (useTrack)

핵클 라이브러리에는 useTrack 훅을 포함한다.

다음 코드를 참고하여 useTrack 훅을 트래킹 하는데 사용할 수 있다.

 

다음과 같이 작성하면 '수강 신청하기'버튼 클릭시 hackle대시보드에 landing_apply_btn_click이벤트가 전송되어 클릭수 트래킹을 할 수 있게 된다.

import { useTrack } from '@hackler/react-sdk';

const ApplyCard =() => {
	const track = useTrack();
    const hackleHandler = () => {
	    const event = { key: `landing_apply_btn_click`, value: 10000 };
    	track(event);
	};

	..(생략)..
    
    return (
      <>
      	<button onClick={hackleHandler}>수강 신청하기</button>
      </>
	)