Go to Docs (EN)Sign in to Dashboard

SDK 연동

Suggest Edits

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

1 단계 : 의존성 추가

npm install --save @hackler/react-sdk

2 단계 : SDK 초기화

createInstance()에 SDK 키를 전달하여 HackleReactSDKClient를 생성하고 React 어플리케이션을 감싸는 HackleProvider에 전달해야 합니다.

어플리케이션 초기화 단계에 핵클 서버와 데이터 동기화를 위한 통신을 진행합니다. 일반적으로 이 시간은 수 밀리 초에 불과합니다. 동기화가 완료되면 즉시 렌더링이 진행됩니다.

📘

Next.js / Gatsby 연동 방식

Hackle React SDK는 SSR을 지원하지 않습니다.
Next.js / Gatsby 환경 연동 시에는 아래 코드에서 각 환경에 맞는 코드탭을 클릭하시면 편리하게 연동하실 수 있습니다.

import { createInstance, HackleProvider } from "@hackler/react-sdk";

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

ReactDOM.render(
  <HackleProvider hackleClient={hackleClient}>
    <YourApp />
  </HackleProvider>,
  document.getElementById('root')
);

import {createInstance, HackleProvider} from "@hackler/react-sdk";

function MyApp({Component, pageProps}) {
    const [hackleClient, setHackleClient] = useState(null)

    useEffect(() => {
        // YOUR_BROWSER_SDK_KEY 자리에 SDK 키를 넣습니다.
        const _hackleClient = createInstance("YOUR_BROWSER_SDK_KEY")
        setHackleClient(_hackleClient)
    }, [])

    return (
        hackleClient ? <HackleProvider hackleClient={hackleClient}>
            <Component {...pageProps} />
        </HackleProvider> : <Component {...pageProps} />
    )
}

export default MyApp

import {createInstance, HackleProvider} from "@hackler/react-sdk";

function App() {
    const isSSR = typeof window === "undefined"
    let hackleClient
    if (!isSSR) {
        // YOUR_BROWSER_SDK_KEY 자리에 SDK 키를 넣습니다.
        hackleClient = createInstance("YOUR_BROWSER_SDK_KEY")
    }

    return (
        hackleClient ? <HackleProvider hackleClient={hackleClient}>
            <YourApp />
        </HackleProvider> : <YourApp />
    )
}

export default App

📘

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

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

2-1 단계: 설정 추가

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

import { createInstance, HackleProvider } from "@hackler/react-sdk";

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

ReactDOM.render(
  <HackleProvider hackleClient={hackleClient}>
    <YourApp />
  </HackleProvider>,
  document.getElementById('root')
);

import {createInstance, HackleProvider} from "@hackler/react-sdk";

function MyApp({Component, pageProps}) {
    const [hackleClient, setHackleClient] = useState(null)

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

    return (
        hackleClient ? <HackleProvider hackleClient={hackleClient}>
            <Component {...pageProps} />
        </HackleProvider> : <Component {...pageProps} />
    )
}

export default MyApp

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

key

기능

기본값

debug

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

false

auto_track_page_view

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

(React SDK 1.2.0 버전 이상)

true

🚧

auto_track_page_view 설정에 대하여

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

Updated 18 days ago

Did this page help you?