Usage Examples

1. URL Test

For how to create and configure a URL Test, refer to here.

If you integrated with Hackle through the store app, skip directly to Step (4).

For store apps, we strongly recommend using the Bridge Code.

1

Check the Integration Code

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

This covers content similar to the document above. For details, refer to the document above.

<!-- Add inside the existing 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

Check the SDK Key

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

Refer to the document above and copy the key corresponding to App/Browser.

3

Complete the Code Block

<!-- Add inside the existing 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("Enter the copied key here");
</script>

Insert the code above at the following location.

4

Check the Anti-Flicker Code

<!-- Add at the top of the SDK integration code in the existing head  -->
<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>

Insert the code above at the same location as described in step 3.

5

Check the URL of the Product Targeted by the URL Test

A single product can have multiple URLs.

For example, the URLs for a product with product_no 14 can vary as follows:

• 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

Configure the URL to match the module or link style your store uses.

URL OR condition

URL matching condition

Combine multiple URLs with OR conditions so that the intended URL can be matched.