URL Test Integration Code

In SPA (Single Page Application) framework environments (React, Vue.js, Angular), the feature may not work correctly during page navigation other than initial page entry, so it is not recommended.

A URL Test requires a one-time Hackle JavaScript SDK integration. You need to insert the integration code below into the HTML of the page you want to integrate in order to initialize the SDK.

If the SDK is already integrated on the page, no additional code work is required.

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

For versions below 11.26.0, you must set the track option to true when integrating to identify the current page.

<!-- Example for versions 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>

Anti-flicker Code for URL Tests

Due to the nature of URL Tests, when a user first enters the target URL (Option A) page, the Option A page may be briefly displayed before redirecting to Option B, C, etc.

Since exposing the Option A page can affect the test results, you can add code that hides the screen until the URL Test distribution and page navigation are fully completed.

<!-- Add above the SDK integration code inside the head of the existing code  -->
<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>

When this script is inserted, the screen is hidden for up to the maximum timeout (4 seconds) or until the SDK integration is complete. Once integration is complete, either the Option A page is shown exclusively, or when navigating to Option B, C, etc., only the target page is shown without exposing the Option A page.

If you want to reduce the timeout, change the value of 4000(ms) to your desired value. Below is an example with the maximum timeout reduced to 1 second.

<!-- Add above the SDK integration code inside the head of the existing code  -->
<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>