Go to Docs (EN)Sign in to Dashboard

SDK 연동

Suggest Edits

핵클 SDK 기능을 사용하기 위해서는 반드시 SDK 연동 작업이 필요합니다.

1 단계 : 의존성 추가

npm install --save @hackler/js-client-sdk

<!-- HTML의 경우 의존성 추가 작업이 필요하지 않습니다 -->

2 단계 : SDK 초기화

HackleClient는 SDK의 기능을 사용하기 위한 메소드들을 제공하는 클래스입니다.
createInstance() 메소드에 SDK 키를 전달하여 인스턴스화 합니다.

import * as Hackle from "@hackler/js-client-sdk";

// YOUR_BROWSER_SDK_KEY 자리에 SDK 키를 넣습니다.
const hackleClient = Hackle.createInstance("YOUR_BROWSER_SDK_KEY")

<!-- 기존 코드 head 안에 추가 -->
<script src="https://cdn.jsdelivr.net/npm/@hackler/[email protected]/lib/index.umd.min.js"></script>
<script>
  <!-- YOUR_BROWSER_SDK_KEY 자리에 SDK 키를 넣습니다. -->
  HACKLE_SDK_KEY = "YOUR_BROWSER_SDK_KEY";
  window.hackleClient = Hackle.createInstance(HACKLE_SDK_KEY);
</script>

📘

createInstance() 메소드에 설정을 추가할 수 있습니다.

보다 자세한 내용은 아래 2-1단계: 설정 추가를 참고해주세요.

HackleClient가 인스턴스화 되면 핵클 서버로부터 필요한 정보들을 가져와서 SDK에 저장합니다.
이 작업은 비동기로 실행되며 onReady() 메소드를 통해 SDK 사용 준비가 완료된 것을 알 수 있습니다.

hackleClient.onReady(() => {
  // SDK ready to use
});

2-1 단계: 설정 추가

SDK 초기화 시 몇 가지 설정을 추가할 수 있습니다. 다음의 예시를 참고하세요.

import * as Hackle from "@hackler/js-client-sdk";

// YOUR_BROWSER_SDK_KEY 자리에 SDK 키를 넣습니다.
// debug, auto_track_page_view 값을 설정할 수 있습니다.
const hackleClient = Hackle.createInstance("YOUR_BROWSER_SDK_KEY", { debug: false, auto_track_page_view: true })

<html>
  <head>
    <!-- 기존 코드 -->
    <!-- 기존 코드 End -->
    <script src="https://cdn.jsdelivr.net/npm/@hackler/[email protected]/lib/index.umd.min.js"></script>
    <script>
      <!-- YOUR_BROWSER_SDK_KEY 자리에 SDK 키를 넣습니다. -->
      HACKLE_SDK_KEY = "YOUR_BROWSER_SDK_KEY";
      HACKLE_SDK_CONFIG = { debug: false, auto_track_page_view: false };
      window.hackleClient = Hackle.createInstance(HACKLE_SDK_KEY, HACKLE_SDK_CONFIG);
    </script>
  </head>
  <body>
  ...
  </body>
</html>

설정 값의 의미는 다음과 같습니다.

key

기능

기본값

debug

모든 기능에 대한 디버그(debug) 로그를 콘솔(console)에서 볼 수 있습니다.

false

auto_track_page_view

웹 페이지 진입 혹은 이동에 대해 자동으로 수집합니다.

(JavaScript SDK 1.2.0 버전 이상)

true

🚧

auto_track_page_view 설정에 대하여

  1. auto_track_page_view 설정과 무관하게 데이터 세부 분석 시 핵클에서 제공하는 속성은 계속 수집됩니다.
  2. auto_track_page_view를 false로 변경할 경우 사용자 퍼널 분석 시 URL을 사용할 수 없습니다.

Updated 7 days ago

Did this page help you?