# \[JavaScript SDK] CDN 주소 변경 안내

HTML 스크립트 방식으로 JavaScript SDK 연동시 사용되는 CDN 주소가 외부 주소에서 핵클 내부적으로 관리되는 주소로 변경되었습니다.

안정적인 서비스 제공을 위해 새로운 CDN 주소로 변경해 주시기 바랍니다. (기존 CDN 주소도 유지됩니다)

#### 변경 전 CDN 주소

* <https://cdn.jsdelivr.net>
* <https://fastly.jsdelivr.net>

#### 변경 후 CDN 주소

* [https://cdn2.hackle.io](https://www.hackle.io)

## 변경 방법

![](/files/UqrtTBuAqp0mL0Ikgl3h)

URL 앞의 Host 부분만 새로운 CDN 주소로 변경합니다.

#### SDK 초기화

```html
<!-- 기존 코드 head 안에 추가 -->
<script src="https://cdn2.hackle.io/npm/@hackler/javascript-sdk@11.35.0/lib/index.browser.umd.min.js"></script>
<script>
  // YOUR_BROWSER_SDK_KEY로 초기화
  window.hackleClient = Hackle.createInstance("YOUR_BROWSER_SDK_KEY");
</script>
```

#### 사용자 탐색(DevTools) 기능을 사용중인 경우

```html
<script src="https://cdn2.hackle.io/npm/@hackler/javascript-devtools@1.0.3/lib/index.browser.umd.min.js"></script>
<script>
  const config = {
    devTool: HackleDevTools.default,
  };

  // YOUR_BROWSER_SDK_KEY로 초기화
  const hackleClient = Hackle.createInstance(YOUR_BROWSER_SDK_KEY, config);

  // 사용자 탐색을 나타내고 싶은 시점에 Trigger 되도록 해주세요.
  hackleClient.showUserExplorer()

  // 사용자 탐색 창을 닫고 싶을 경우에 Trigger 되도록 해주세요.
  hackleClient.hideUserExplorer()

</script>
```

#### GTM 사용중인 경우

1. <https://tagmanager.google.com/> 의 해당 컨테이너에 접속합니다.
2. Templates > Hackle Browser SDK를 선택합니다.

   ![](/files/qak2t8ampEpkqxgdWpmd)
3. Code 탭에서 CDN 주소를 확인합니다.

   `https://cdn2.hackle.io` 로 시작하는 주소인 경우, 최신 버전 템플릿을 사용 중이므로 아래 단계를 진행할 필요가 없습니다.

   `https://cdn.jsdelivr.net` 등 다른 주소로 시작하는 경우 아래 가이드를 참고하여 변경합니다.

   ![변경전](/files/qrHgNLl1ogKIBM0rH1NM)

   ![변경후](/files/i6ffBbcfY4xAbjfQkRWJ)

   변경 전: `https://cdn.jsdelivr.net`\
   변경 후: `https://cdn2.hackle.io`
4. Permissions 탭 > Injects scripts 에 `https://cdn2.hackle.io/*` 를 추가합니다.\
   \&#xNAN;**(주의: 기존 주소는 지우지 말고 신규 주소만 추가 해야 합니다)**

   ![](/files/HiPZOA1yZfTbm7F24UUl)
5. 우측 상단 `Save` 를 클릭하여 저장합니다.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.hackle.io/development-guide/troubleshooting/javascript-sdk-cdn-domain.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.