> For the complete documentation index, see [llms.txt](https://docs.hackle.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.hackle.io/en/ab-test/about/ab-step-by-step.md).

# 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

1. If one person is doing the tutorial

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

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

2. 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)

{% hint style="info" %}
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](https://support.apple.com/ko-kr/guide/textedit/txted0b6cd61/mac)
{% endhint %}

## 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.

![You can leave everything blank except the required test name](/files/rQ7dUxldXoVBT7eWMMQK)

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.

![Goals are used to measure the performance of an A/B Test and at least one must be registered.](/files/4iOoVTqRSI63xXnY4Xt2)

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.

![Select Average Purchase Amount from the goals.](/files/SgY9eC5ibLiK1GBwrHJ5)

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](/en/ab-test/create-and-configure/set-metrics.md) 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.

![Click the Register test device button to configure.](/files/46R21x3jaBiSdrwIfYsl)

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.

![Set the traffic percentage to 100.](/files/9ijVRiBdssAi9Z9ZpxuB)

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.

```javascript
<!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.

![Click the icon to copy.](/files/tTfHaya8cmsPzPIonQFO)

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

![In the screenshot above, the Experiment Key is 13.](/files/bAPM2mW5aQxNiTZLjqKR)

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:

```javascript
/***************************************
 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.

![The hackle\_sdk\_test.html file opened in a browser](/files/icrzokxTzEEfYTRJ06SY)

Follow the steps shown on the screen.

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

![](/files/q1xPZ1pMBy45m91HkA1C)

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.

![](/files/Yb0phmHvBqi7fgeZZS0y)

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.

{% hint style="warning" %}
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)
  {% endhint %}

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.

![Click the Real-time Exposure Status tab](/files/pxcL2BpBJS2VWeqP01e7)

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.

![Real-time Exposure Status](/files/Gx2a6iQ4c8ZuLbbaqA7P)

{% hint style="success" %}
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.
{% endhint %}

### 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.

![3 more steps have been added.](/files/IDuJaROoXDuQIyqzx1q9)

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.](/files/kcDkZhUsLLp4QTYHiTlt)

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

![You can see the event tracking status for the last 30 minutes.](/files/3xmGkCC3F6i0zobryXax)

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.

{% hint style="success" %}
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.
{% endhint %}

## 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.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.hackle.io/en/ab-test/about/ab-step-by-step.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.