Tutorial

Overview

This document provides a hands-on guide to help you understand Hackle A/B Tests. You can experience the Hackle platform integration process using the Hackle JavaScript SDK, and through this, understand the basic flow of an A/B Test.

Who this tutorial is for

If one person is doing the tutorial

This is aimed at developers, but anyone who understands what the following code means can follow along.

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

If two or more people are doing the tutorial together

We recommend splitting roles: one person to handle the Dashboard, and one person to handle the code work.

Prerequisites

Text editor
Web browser
Hackle Dashboard (logged in, Production Environment selected)

If you are using the Mac text editor

You need to switch to plain text mode in the Mac text editor to get the correct output. For information on switching edit modes, refer to the help provided by Apple. → Work with HTML documents in TextEdit on Mac

1. Create an A/B Test

Step 1. Create a new test

Go to A/B Test in the Dashboard and click the Create new A/B Test button in the upper right to create a new test.

The test name is required, so enter an appropriate name. The rest can be left blank. Then click the Create test button in the lower right.

Step 2. Set goals

On the created A/B Test screen, you will see a button that says Set goals. Click this button to register a goal.

When you click the Set goals button, a dialog appears. You can either select a goal recommended by Hackle, or create one yourself. In this tutorial, let's select one of the recommended goals. Select Average Purchase Amount from the recommended goals.

The selected goal shows the event name, goal type, and success criteria. Among these, the purchase value under the event name is used as the event key, so please remember it. The event key is mentioned again in Step 5 and Step 8.

For details on each item, refer to the Set Metrics document.

Step 3. Override (optional)

This step is not required and can be skipped. However, we recommend including it in the tutorial to understand the Override feature.

Override is a feature that forces a user with a specific user identifier into a specific group. To do this, enter a user identifier through the Test Device Registration menu in the A/B Test Settings tab.

Type abcde in Group A and press Enter, then type qwerty in Group B and press Enter. The user identifiers are then registered in the respective group lists. Afterward, click the Save button on the right.

Step 4. Start the test

The test preparation in the Dashboard is now complete. Click the Start button in the upper right. A dialog like the one shown below will appear.

Since the purpose of this tutorial is to experience A/B Testing, we want all users to be exposed to the A/B Test. Therefore, set the traffic percentage to 100%. Finally, click the Start button in the lower right of the dialog.

2. Integrate Hackle Platform

Now it is time to integrate the Hackle platform using the SDK. As mentioned, we will integrate the JavaScript SDK.

Step 5. Copy and paste the example code

Open a text editor, create a new file named hackle_sdk_test.html, and copy-paste the following code.

<!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>

Looking at line 7 in the code above, it says You must modify the SDK Key and Experiment Key values directly. We will modify these values in the next step, Step 6. Below that, it says do not modify eventName. The purchase value assigned to this variable is the event key of the goal set in Step 2.

Step 6. Modify the SDK Key and Experiment Key

The SDK Key can be found in the SDK Integration Info menu. Referring to the screenshot below, copy the Browser key for the Production Environment.

The Experiment Key can be found on the detail page of the A/B Test you created earlier.

The number in the Experiment Key {number} part to the left of the test name is the Experiment Key. In the example above, the Experiment Key is 13. However, keep in mind that you must enter the Experiment Key of the A/B Test you created, not 13.

For example, if your SDK Key is abcdefg and the Experiment Key is 13, the code should be modified as follows:

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

Be careful not to delete the quotation marks when replacing the SDK Key. Once you finish modifying the SDK Key and Experiment Key and save the file, the SDK integration is complete.

3. Run the A/B Test

Step 7. Variation distribution practice

Open the hackle_sdk_test.html file you edited earlier in a web browser, and you will see a screen like the one below.

Follow the steps shown on the screen.

First, try entering a USER ID. Enter abcde. Then click the Variation Distribution button.

If you configured Override in Step 3. Override, the user is force-assigned to Group A and you will see the result shown in the screenshot above. If you did not configure Override, you may see the user assigned to Group B.

This time, enter qwerty and click the Variation Distribution button.

Opposite to the abcde example, if you configured Override in Step 3. Override, the user is force-assigned to Group B and you will see the result shown above. If you did not configure Override, you may see the result assigned to Group A.

I configured Override but the result is different from the screenshot. What went wrong?

Check if you clicked Start test in the Dashboard and set the traffic percentage to 100%. (Step 4)
Check if the user ID entered in the Override menu matches the user ID entered on the HTML page. (Step 3)
Check if you entered the SDK Key correctly. (Step 6)
Check if you entered the Experiment Key correctly. (Step 6)

You can also enter any arbitrary user IDs to see the variation distribution results.

You can review the results distributed so far in the Dashboard. Click the A/B Test with the Experiment Key currently being tested in the Dashboard to see a screen like the one below.

Clicking the Real-time Exposure Status tab here shows the exposure results of test distributions performed over the last 30 minutes. These results can be refreshed every 30 seconds by clicking the Update button.

What Step 7 shows

A person assigned to Group A sees red text on the result screen, and a person assigned to Group B sees blue text.

In this way, by distributing users through A/B Testing, you can have users who belong to a specific group experience a different UI/UX or different logic.

To look at the hackle_sdk_test.html file at the code level, review the implementation of function exposure() { ... } together with the [JavaScript - Variation Distribution] document.

Step 8. User event tracking practice

Now that you have a solid understanding of variation distribution, let's practice user event tracking. Sending a user event can be thought of as notifying Hackle that a specific event has occurred.

If you closed the hackle_sdk_test.html file, open it again.

Enter any user ID again, click Variation Distribution to see the distribution result, and then click the last button Track User Event that you haven't clicked yet. Repeat this a few times, then navigate to Events in the Dashboard.

Click purchase in the event list. This is the event key of the goal set in Step 2.

You can see a real-time graph of events collected for that event over the last 30 minutes. Like the Real-time Exposure Status, it refreshes every 30 seconds.

This graph shows the collection results for a specific event, so if you only performed variation distribution for a user ID without clicking the Track User Event button, nothing will appear in the graph.

What Step 8 shows

To collect a specific user action, you need to define an event for that action, and send the event key to Hackle every time that action occurs. To check whether sending and collection are working correctly, go to the detail screen of that event key in the event list on the Dashboard.

To look at the hackle_sdk_test.html file at the code level, review the implementation of function track() { ... } together with the [JavaScript - User Event Tracking] document.

4. Now it's your turn

If you have completed up to this step, you have experienced the overall A/B Test flow with Hackle using the JavaScript SDK. Now move beyond this tutorial and create an A/B Test that suits your needs. For areas where you need more detailed information, refer to the Related Documents provided at each step.

Last updated 3 months ago