Guides
Github RepositoryGo to Docs (KR)Sign in to Dashboard

Integration Code

Suggest Edits

📘

About SDK version

This feature is supported by over JavaScript SDK 11.25.1 version. Please check the SDK version you integrated.

SDK Integration code for URL Testing

To use URL Testing, you need to integrate with Hackle JavaScript SDK once.

Add below code to HTML of the page that you want to test with. If you integrated already, you don't need to modify or add more.

When integrating, the option auto_track_page_view must be set to true to identify the current page.

<!-- Add the in <Head> -->
<script src="https://cdn2.hackle.io/npm/@hackler/[email protected]/lib/index.browser.umd.min.js"></script>
<script>
window.hackleClient = Hackle.createInstance("YOUR_BROWSER_SDK_KEY");
</script>
  • Caution :The Single Page Application (SPA) framework (React, Vue.js, Angular) may not work properly when moving pages.
  • If you use javascrpit SDK version below 11.26.0, you must set auto_track_page_view option as true to recognize the current page.
<!-- Example for sdk version below 11.26.0 -->
<script src="https://cdn2.hackle.io/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 Test Flicker Prevention Code

📘

Supported SDK Version

This functionality is supported in JavaScript SDK versions 11.26.0 and higher.
Please verify the SDK version integrated into your workspace.

Due to the nature of URL testing, there might be instances where, upon initial entry to the target URL (A), the page displays A before transitioning to pages such as B or C.

To prevent interference with the test caused by the initial display of page A, you can add code that covers the screen until the distribution of the URL test and all page transitions, ensuring the prevention of this occurrence.

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

If you insert this script, the screen will remain covered either for the maximum timeout period (4 seconds) or until the SDK integration is complete. Once the integration is done, only the required test pages such as A, B, or C will display without exposing page A before navigating to them.

If you want to reduce the timeout period, you can modify the value currently set at 4000 (milliseconds) to any desired value. Below is an example of reducing the maximum timeout to 1 second:

<!-- Add to the top of the existing SDK integration code in the head section -->
<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 5 months ago