# 활용 예제

## 1. URL 테스트

> URL 테스트를 생성하고 설정하는 방법은 [여기](https://docs.hackle.io/ab-test/url-test/steps-of-an-url-test) 를 참고해주세요.

{% hint style="info" %}
스토어앱을 통해서 핵클과 연동한 경우 (4) 번 Step으로 바로 이동하세요.

> 스토어앱인 경우 [**브릿지 코드**](https://docs.hackle.io/cafe-24/integration/cafe24-bridge-integration) **사용을 강력 권장**합니다.
> {% endhint %}

{% stepper %}
{% step %}

#### 연동 코드 확인

{% embed url="<https://docs.hackle.io/ab-test/url-test/url-test-integration>" %}

> 상기 문서와 유사한 내용을 다루고 있습니다. 상세한 내용은 위 문서를 참고하세요.

```html
<!-- 기존 코드 head 안에 추가 -->
<script src="https://cdn2.hackle.io/npm/@hackler/javascript-sdk@11.55.2/lib/index.browser.umd.min.js"></script>
<script>
window.hackleClient = Hackle.createInstance("YOUR_BROWSER_SDK_KEY");
</script>
```

{% endstep %}

{% step %}

#### SDK 키 확인

{% embed url="<https://docs.hackle.io/development-guide/sdk/get-your-key>" %}

상기 문서를 확인하시어, App/Browser 에 해당하는 키를 복사하세요.
{% endstep %}

{% step %}

#### 코드 블럭 완성

```html
<!-- 기존 코드 head 안에 추가 -->
<script src="https://cdn2.hackle.io/npm/@hackler/javascript-sdk@11.55.2/lib/index.browser.umd.min.js"></script>
<script>
window.hackleClient = Hackle.createInstance("복사한 키를 넣어주세요");
</script>
```

위 코드를 다음의 위치에 삽입합니다.

<div><figure><img src="/files/OLOkXcD68cX89ANXhEOY" alt=""><figcaption></figcaption></figure> <figure><img src="/files/xicVrAUa76dFRLRtWM4r" alt=""><figcaption></figcaption></figure> <figure><img src="/files/n4jcgzWqUAPaJ8qM5wBJ" alt=""><figcaption></figcaption></figure></div>
{% endstep %}

{% step %}

#### 깜빡임 방지 코드 확인

```html
<!-- 기존 코드 head의 SDK 연동 코드 상단에 추가  -->
<style>
.hackle_init_hide {
  opacity: 0 !important;
}
</style>
<script>
(function(e){var n="hackle_init_hide";document.documentElement.className+=n;var t=function(){document.documentElement.className=document.documentElement.className.replace(RegExp(" ?"+n),"");window.removeEventListener("hackle-initialize-done",t)};setTimeout(t,e);window.addEventListener("hackle-initialize-done",t)})(4000);
</script>
```

위 코드를 3에서 알려드린 위치와 동일한 곳에 삽입합니다.
{% endstep %}

{% step %}

#### URL 실험 대상 상품의 URL을 확인

하나의 상품에도 여러가지 URL이 존재할 수 있습니다.

예를 들어, `product_no` 가 14인 상품의 URL은 아래와 같이 다양합니다.

* `https://hackle.com/product/%ED%94%84%EB%A0%88%EC%8B%9C/14/category/1/display/4`
* `https://hackle.com/sURL/O/14`
* `https://hackle.com/product/detail.html?product_no=14`

본인 쇼핑몰이 사용하는 모듈이나 링크 스타일에 맞게 URL을 설정해주세요.

<div><figure><img src="/files/FO4lvRh0voVjPnH6lNHI" alt=""><figcaption><p>URL OR 조건</p></figcaption></figure> <figure><img src="/files/3gwgV1ZyxdVciX8SfDCB" alt=""><figcaption><p>URL 매칭 조건</p></figcaption></figure></div>

여러 URL을 OR 조건과 함께 구성하시어 의도한 URL이 매칭될 수 있도록 해주세요.
{% endstep %}
{% endstepper %}


---

# Agent Instructions: 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:

```
GET https://docs.hackle.io/cafe-24/example.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.