체험하기(Tutorial)

개요

이 문서에서는 핵클 A/B 테스트에 대한 이해를 돕기 위한 실습 가이드를 제공합니다. 핵클 JavaScript SDK를 이용하여 핵클 플랫폼 연동 과정을 체험할 수 있으며, 이를 통해 A/B 테스트의 기본적인 흐름을 이해할 수 있습니다.

실습 대상

한 명이 실습할 경우

개발자를 대상으로 하지만, 아래 코드가 무엇을 의미하는지 이해한다면 누구나 이 실습을 따라할 수 있습니다.

varString = "I am String";
varNumber = 3000;

두 명 이상이 함께 실습할 경우

대시보드를 담당할 1인, 코드 작업을 담당할 1인의 구성으로 역할을 분담하여 실습을 따라해보시기 바랍니다.

준비사항

텍스트 에디터
웹 브라우저
핵클 대시보드 (로그인 완료 상태, 운영 환경 선택 상태)

Mac용 텍스트 편집기를 이용할 경우

Mac용 텍스트 편집기는 일반 텍스트 편집 모드로 전환 후 따라해야 올바른 결과물을 얻을 수 있습니다. 편집 모드 전환에 대해서는 Apple에서 제공하는 도움말을 참고해주시기 바랍니다. → Mac용 텍스트 편집기에서 HTML 문서로 작업하기

1. A/B 테스트 생성

Step 1. 새 테스트 생성

대시보드의 A/B 테스트로 들어가서 우측 상단에 위치한 새 A/B 테스트 생성하기 버튼을 눌러 신규 테스트를 만듭니다.

테스트 이름은 필수 항목이므로 적당한 이름을 기입합니다. 나머지는 공란으로 두어도 됩니다. 이어서 우측 하단의 테스트 생성하기 버튼을 누릅니다.

Step 2. 목표 설정

생성된 A/B 테스트 화면에서 목표 설정하기라는 버튼을 확인할 수 있습니다. 이 버튼을 눌러 목표를 등록합니다.

목표 설정하기 버튼을 누르면 다이얼로그가 나타납니다. 목표는 핵클에서 추천하는 것을 선택할 수도 있고, 직접 만들 수도 있습니다. 이번 실습에서는 추천하는 것을 선택해보겠습니다. 추천 목표 중 평균 구매 금액을 선택합니다.

선택된 목표를 보면 이벤트 명과 목표 유형, 목표 성공 기준이 나옵니다. 이 중 이벤트 명 아래에 있는 purchase 값은 이벤트 키로 사용되므로 기억해주시기 바랍니다. 이벤트 키는 Step 5와 Step 8에서 다시 언급됩니다.

각 내용에 대해서는 목표 설정하기 문서를 통해 자세히 알 수 있습니다.

Step 3. 수동할당 (optional)

이 단계는 필수가 아니며 건너뛰어도 됩니다. 하지만 수동할당 기능 이해를 위해 실습에 포함하기를 권장합니다.

수동할당은 특정 사용자 식별자를 가진 사용자를 대상으로 특정 그룹에 강제로 할당하는 기능입니다. 이를 위해 A/B 테스트 설정 탭에서 테스트 기기 등록 메뉴를 통해 사용자 식별자를 입력합니다.

그룹 A에는 abcde 라고 입력 후 엔터를 치고, 그룹 B에는 qwerty 라고 입력 후 엔터를 칩니다. 그러면 각 그룹 목록에 해당 사용자 식별자가 등록됩니다. 이후 우측의 저장하기 버튼을 누릅니다.

Step 4. 테스트 시작하기

이제 대시보드에서 진행하는 테스트 준비는 모두 완료되었습니다. 우측 상단의 시작하기 버튼을 누릅니다. 그러면 아래 그림과 같은 다이얼로그가 뜹니다.

본 실습은 A/B 테스트를 경험해보는 데에 목적이 있기 때문에 모든 사용자가 A/B 테스트에 노출될 수 있도록 합니다. 따라서 트래픽 비중을 100%로 적용합니다. 마지막으로 다이얼로그 우측 하단의 시작하기 버튼을 누릅니다.

2. 핵클 플랫폼 연동

이제 SDK를 이용해서 핵클 플랫폼을 연동할 차례입니다. 이미 언급한 대로 JavaScript SDK를 연동합니다.

Step 5. 예제 코드 복사-붙여넣기

텍스트 편집기를 열어 hackle_sdk_test.html 이라는 이름을 가진 새 파일을 만들고 아래의 코드를 복사-붙여넣기 합니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script>
        /***************************************
          SDK 키, 실험 키 값은 직접 수정해야 합니다
        */
        // SDK 키: 오른쪽 따옴표 안의 값을 여러분의 SDK 키 값으로 바꾸십시오
        HACKLE_SDK_KEY = "your-sdk-key";
        // 실험 키: 오른쪽의 5 값을 여러분의 실험 키 값으로 바꾸십시오
        const experimentKey = 5;
        // 이벤트 키는 수정하지 마십시오
        const eventName = "purchase";
    
        /***************************************
          아래 내용은 수정하지 마십시오
        */
        !function(e,t){var n,a=3e3,c=!1,l=[];function r(){}r.prototype.onReady=function(e,t){var n={block:e,timeout:t};l.push(n)},r.prototype.setUserId=function(e){n=e},e.Hackle=e.Hackle||new r,e.hackleClient=e.hackleClient||new r;var o=setInterval(function(){if(c){clearInterval(o);for(var t=0;t<l.length;t++)
e.hackleClient.onReady(l[t].block,l[t].timeout);l.length=0}(a-=50)<0&&clearInterval(o)},50),i=t.createElement("script");i.type="text/javascript",i.crossOrigin="anonymous",i.src="https://cdn.jsdelivr.net/npm/@hackler/js-client-sdk@2.0.0/lib/umd/hackle-js-client-sdk.min.js",
i.async=!0;var s=t.getElementsByTagName("script")[0];s.parentNode.insertBefore(i,s),i.onload=function(){c=!0,e.Hackle=Hackle,n&&Hackle.setUserId(n),e.hackleClient=Hackle.createInstance(HACKLE_SDK_KEY)},i.onerror=function(){clearInterval(o)}}(window,document);
        
        function exposure() {
            // 입력된 User ID 가져오기
            var userId = document.getElementById("uname").value;
            // SDK 전송을 위한 포맷으로 변경
            var user = { id: userId };
            // 그룹 분배
            const variation = hackleClient.variation(experimentKey, user);
            // 결과 Text 업데이트
            if (variation.toString() == "A")
                document.getElementById("result").innerHTML = userId + "의 테스트 그룹 분배 결과는 <font color=\"red\">대조군(테스트 그룹A)</font>입니다.";
            else if (variation.toString() == "B")
                document.getElementById("result").innerHTML = userId + "의 테스트 그룹 분배 결과는 <font color=\"blue\">실험군(테스트 그룹B)</font>입니다.";
            else
                document.getElementById("result").innerHTML = "테스트 그룹 분배 중 오류가 발생했습니다.";
        }

        function track() {
            // 입력된 User ID 가져오기
            var userId = document.getElementById("uname").value;
            //유저 ID가 입력되지 않은 경우 경고창 전시
            if (userId == "") {
                alert("USER ID를 입력해주세요.")
                return
            }
            // SDK 전송을 위한 포맷으로 변경
            var user = { id: userId };
            //Track 이벤트 전송
            hackleClient.track(eventName, user);
            alert("사용자 이벤트를 전송하였습니다.")
        }
    </script>
</head>
<body>
<h1>Hackle JavaScript SDK 연동 예제</h1>
<h2>테스트 그룹 분배 예제</h2>
<div>
    <label for="uname">USER ID를 입력하세요: 입력한 USER ID로 테스트 그룹을 분배하고 결과를 표시합니다.</label>
    <input type="text" id="uname" name="uname">
    <input type="button" value="테스트 그룹 분배" onClick="exposure()">
    <p id="result">분배 수행 후 여기에 분배 결과가 나타납니다.</p>
</div>

<h2>사용자 이벤트 전송 예제</h2>
<div>
    <label for="fname">버튼 클릭 시 위에서 입력한 USER ID로 사용자 event를 전송하는 track()을 호출합니다.</label>
    <input type="button" value="사용자 이벤트 전송" onClick="track()">
</div>
</body>
</html>

위 코드에서 7번째 줄을 보면 SDK 키, 실험 키 값은 직접 수정해야 합니다 라고 적혀있습니다. 이 값을 수정하는 것은 다음 단계인 Step 6에서 진행하겠습니다. 그 밑에 eventName은 수정하지 말라고 적혀있습니다. 이 변수에 할당된 purchase가 바로 Step 2에서 설정한 목표의 이벤트 키입니다.

Step 6. SDK 키, 실험 키 수정하기

SDK 키는 SDK 연동 정보 메뉴에서 찾을 수 있습니다. 다음의 스크린샷을 참고하여, 운영환경의 Browser 키를 복사합니다.

실험 키는 앞서 생성한 A/B 테스트 상세 페이지에서 찾을 수 있습니다.

테스트 이름 왼쪽에 있는 실험 키 {숫자} 부분에 있는 숫자가 실험 키입니다. 위 사례의 경우 실험 키는 13입니다. 하지만 코드에는 13이 아닌 여러분이 생성한 A/B 테스트의 실험 키를 넣어야 하는 점을 명심하시기 바랍니다.

예를 들어 여러분의 SDK 키가 abcdefg 이고, 실험 키가 13이라면 코드는 다음과 같이 수정해야 합니다.

/***************************************
 SDK 키, 실험 키 값은 직접 수정해야 합니다
*/
// SDK 키: 오른쪽 따옴표 안의 값을 여러분의 SDK 키 값으로 바꾸십시오
HACKLE_SDK_KEY = "abcdefg";
// 실험 키: 오른쪽의 5 값을 여러분의 실험 키 값으로 바꾸십시오
const experimentKey = 13;

SDK 키 교체 시 따옴표를 삭제하지 않도록 유의하시기 바랍니다. SDK 키와 실험 키의 수정을 완료하고 파일을 저장하면 SDK 연동이 완료됩니다.

3. A/B 테스트 수행

Step 7. 테스트 그룹 분배 실습

앞서 편집한 hackle_sdk_test.html 파일을 웹 브라우저로 열면, 아래와 같은 화면을 볼 수 있습니다.

화면에 나오는 순서대로 따라해봅니다.

우선 USER ID를 입력해봅니다. abcde를 입력합니다. 그리고 테스트 그룹 분배 버튼을 누릅니다.

앞서 Step 3. 수동할당 단계에서 설정을 했었다면 테스트 그룹 A로 강제 할당되고 위 스크린샷과 같은 결과가 나옵니다. 수동할당 설정을 하지 않았다면 테스트 그룹 B로 할당된 결과를 볼 수도 있습니다.

이번에는 qwerty를 입력하고 테스트 그룹 분배 버튼을 눌러보겠습니다.

abcde의 예시와는 반대로, 앞서 Step 3. 수동할당 단계에서 설정을 했었다면 테스트 그룹 B로 강제 할당되고 위 스크린샷과 같은 결과가 나옵니다. 수동할당 설정을 하지 않았다면 테스트 그룹 A로 할당된 결과를 볼 수도 있습니다.

수동할당을 했지만 결과가 스크린샷과 달라요. 뭘 잘못한 걸까요?

대시보드에서 테스트 시작을 눌렀는지, 트래픽 비중을 100%로 했는지 확인해보세요. (Step 4)
수동할당 메뉴에서 입력한 user ID와 html 페이지에 입력한 user ID가 동일한지 확인해보세요. (Step 3)
SDK 키를 올바로 입력했는지 확인해보세요. (Step 6)
실험 키를 올바로 입력했는지 확인해보세요. (Step 6)

그 외에도 임의의 user ID를 입력하며 테스트 그룹이 할당된 결과를 살펴볼 수 있습니다.

지금까지 분배한 결과를 대시보드에서 살펴볼 수 있습니다. 대시보드에서 현재 테스트 중인 실험 키에 해당하는 A/B 테스트를 클릭하면 아래와 같은 화면을 볼 수 있습니다.

여기서 실시간 노출 현황 탭을 클릭하면 최근 30분 동안 수행된 테스트 분배의 노출 결과를 알 수 있습니다. 이 결과는 30초 마다 업데이트 버튼을 눌러 갱신할 수 있습니다.

Step 7이 시사하는 점

테스트 그룹 A에 배정된 사람은 결과 화면에서 빨간색 글씨를 보고, 테스트 그룹 B에 배정된 사람은 결과 화면에서 파란색 글씨를 봅니다.

이처럼 A/B 테스트를 통해 사용자를 분배하면, 특정 유저가 어느 그룹에 속했는지에 따라 다른 UI/UX를 경험하게 하거나, 다른 로직을 경험하게 할 수 있습니다.

hackle_sdk_test.html 파일의 코드 레벨에서 살펴보려면 function exposure() { ... }의 구현 내용을 [JavaScript-테스트 그룹 분배](../개발자 문서/javascript/js-variation.md) 문서와 함께 검토하시기 바랍니다.

Step 8. 사용자 이벤트 전송 실습

테스트 그룹 분배에 대해 충분한 이해가 되었다면 이제 사용자 이벤트 전송을 실습해보도록 하겠습니다. 사용자 이벤트 전송은 특정 이벤트가 발생했음을 핵클로 보내는 것으로 볼 수 있습니다.

hackle_sdk_test.html 파일을 닫았다면 다시 열어봅니다.

다시 임의의 user ID를 입력하고 테스트 그룹 분배를 클릭하여 분배 결과를 확인한 후, 아직 눌러보지 않았던 마지막 버튼인 사용자 이벤트 전송을 클릭합니다. 이를 몇 차례 반복해준 후 대시보드의 이벤트에 진입합니다.

이벤트 목록에서 purchase를 눌러줍니다. Step 2에서 설정한 목표의 이벤트 키입니다.

최근 30분 동안 해당 이벤트를 수집한 내역에 대해 실시간 그래프를 볼 수 있습니다. 실시간 노출 현황과 마찬가지로 30초 마다 갱신됩니다.

본 그래프는 특정 이벤트에 대한 수집 결과를 보여주는 것이기 때문에 만약 어떤 user ID에 대해 테스트 그룹 분배만 하고 사용자 이벤트 전송을 누르지 않은 경우에는 해당 그래프에 아무 것도 나타나지 않습니다.

Step 8이 시사하는 점

어떤 사용자 행동에 대해 수집하기 위해서는 그 행동에 대한 이벤트를 정의하고, 그 행동이 발생했을 때마다 이벤트 키를 핵클로 보내야 합니다. 전송 및 수집이 잘 되고 있는지 알아보려면 대시보드의 이벤트 목록에서 해당 이벤트 키의 상세 화면을 들어가서 통해 확인할 수 있습니다.

hackle_sdk_test.html 파일의 코드 레벨에서 살펴보려면 function track() { ... }의 구현 내용을 [JavaScript-사용자 이벤트 전송](../개발자 문서/javascript/js-track/index.md) 문서와 함께 검토하시기 바랍니다.

4. 이제 당신의 차례입니다

이 단계까지 완료했다면 JavaScript SDK를 이용한 핵클의 A/B 테스트 전반을 경험했다고 볼 수 있습니다. 이제 체험에서 벗어나 여러분에게 맞는 A/B 테스트를 만들어보시기 바랍니다. 보다 상세한 내용이 필요한 부분에 대해서는 각 단계에 제시된 관련 문서 항목을 참고할 수 있습니다.

마지막 업데이트 3개월 전