Go to Docs (EN)Sign in to Dashboard

URL 테스트 연동 코드

이 문서에서는 URL 테스트에 필요한 연동 코드에 대해 알려드립니다.

Suggest Edits

URL 테스트 SDK 연동

📘

지원 SDK 버전

JavaScript SDK 11.25.1 이상 버전에서 지원하는 기능입니다.
이용하시려는 워크스페이스에 연동된 SDK 버전을 확인해주세요.

URL 테스트를 위해서는 최초 1번 Hackle JavaScript SDK 연동이 필요합니다.
SDK 초기화를 위해 연동하고자 하는 페이지의 HTML 코드에 아래 연동 코드를 삽입해야 합니다.

이미 페이지에 SDK 연동이 되어있다면 코드 추가 작업이 필요하지 않습니다.

<!-- 기존 코드 head 안에 추가 -->
<script src="https://cdn.jsdelivr.net/npm/@hackler/[email protected]/lib/index.browser.umd.min.js"></script>
<script>
window.hackleClient = Hackle.createInstance("YOUR_BROWSER_SDK_KEY");
</script>
  • SPA(Single Page Application) 프레임워크(React, Vue.js, Angular) 환경에서는 페이지 진입 외에 페이지 이동 시에는 정상적으로 동작하지 않을 수 있어 권장하지 않습니다.
  • 11.26.0 버전 미만에서는 연동 시 현재 페이지를 식별하기 위해 auto_track_page_view 옵션을 반드시 true로 설정해야 합니다.
<!-- 11.26.0 버전 미만 예시 -->
<script src="https://cdn.jsdelivr.net/npm/@hackler/[email protected]/lib/index.browser.umd.min.js"></script>
<script>
window.hackleClient = Hackle.createInstance("YOUR_BROWSER_SDK_KEY", {
  auto_track_page_view: true,
});
</script>

URL 테스트 깜빡임 방지 코드

📘

지원 SDK 버전

JavaScript SDK 11.26.0 이상 버전에서 지원하는 기능입니다.
이용하시려는 워크스페이스에 연동된 SDK 버전을 확인해주세요.

URL 테스트 특성상 타겟 URL(A 안) 페이지로 처음 진입 시 A안의 페이지가 노출된 후 B, C안 등으로 페이지 이동이 되는 현상이 나타날 수 있습니다.

A안 페이지가 노출되면 테스트에 영향을 끼칠 수 있으므로 이를 방지하기 위해서 URL 테스트의 분배 및 페이지 이동이 전부 끝나기 전까지 화면을 가리는 코드를 추가할 수 있습니다.

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

해당 스크립트를 삽입하면 최대 타임아웃 시간(4초) 혹은 SDK 연동이 완료될 때까지 화면을 가리게 되며, 연동이 완료되면 A안 페이지만 노출되거나 B, C안 등으로 페이지 이동 시에는 A안 페이지 노출없이 온전히 테스트가 필요한 페이지만 노출되게 됩니다.

타임아웃 시간을 줄이고 싶다면 4000(ms)로 되어있는 값을 임의의 값으로 수정하면 됩니다. 아래는 최대 타임아웃 시간을 1초로 줄인 예시입니다.

<!-- 기존 코드 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)})(1000);
</script>

Updated about 1 month ago