활용 예제

URL 테스트

URL 테스트를 생성하고 설정하는 방법은 여기 를 참고해주세요.

스토어앱을 통해서 핵클과 연동한 경우 (4) 번 Step으로 바로 이동하세요.

스토어앱인 경우 브릿지 코드 사용을 강력 권장합니다.

1

연동 코드 확인

URL 테스트 연동 코드 | Hackledocs.hackle.io

<!-- 기존 코드 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>

2

SDK 키 확인

SDK에서 사용되는 키 | Hackledocs.hackle.io

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

3

코드 블럭 완성

<!-- 기존 코드 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>

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

4

깜빡임 방지 코드 확인

<!-- 기존 코드 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에서 알려드린 위치와 동일한 곳에 삽입합니다.

5

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을 설정해주세요.

URL OR 조건

URL 매칭 조건

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