SDK 연동
핵클 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 설정에 대하여
auto_track_page_view
설정과 무관하게 데이터 세부 분석 시 핵클에서 제공하는 속성은 계속 수집됩니다.auto_track_page_view
를 false로 변경할 경우 사용자 퍼널 분석 시 URL을 사용할 수 없습니다.
Updated 18 days ago
Did this page help you?