시작하기
이 문서에서는 JavaScript SDK(이하 "SDK")의 초기 설정에 대해 설명합니다.
일반적인 케이스
웹 서비스가 여러 개의 페이지로 구성되어 있고, 각 페이지를 요청할 때마다 새로운 정적 리소스를 로드한다면 아래의 가이드를 참고합니다.
정보
위 와 같은 방식으로 동작하는 웹 서비스를 MPA (Multi Page Application) 라고 부릅니다.
1단계: SDK 삽입하기
HTML 파일의 <body>
태그 내에 아래 스크립트를 삽입합니다.
<script>
!function(e,t,n,c,s,a,i){e[s]=e[s]||["init","event"].reduce(((t,n)=>({...t,[n]:function(){e[s]?.q.push([n,arguments])}})),{q:[]}),a=t.createElement(n),i=t.getElementsByTagName(n)[0],a.async=1,a.src="https://cdn.omnicommerce.ai/sdk/broswer/latest/main.js?v="+(new Date).getDate(),i.parentNode.insertBefore(a,i)}(window,document,"script",0,"OpmIO");
</script>
2단계: SDK 실행시키기
SDK를 사용하기 위해서는 발급받은 api key를 삽입하고 SDK를 실행 시킵니다.
OpmIO.init("YOUR_PLUGIN_KEY"); // fill your plugin key
SDK에서 제공하는 상세한 이벤트에 대한 설명은 SDK Event를 참고합니다.
Single Page Application
웹 서비스가 Single Page Application(SPA)로 구성되어있거나 Javascript의 Class로 SDK를 사용하는 경우, 아래의 예제 코드를 참고 바랍니다.
주의
클라이언트 사이드(client-side)에서만 SDK를 사용해야 합니다. SDK는 서버 사이드(server-side)에서 미리 실행 될 수 없습니다.
1단계: 서비스 추가하기
JavaScript를 위한 Service
class OpmIOService {
constructor() {
this.loadScript();
}
loadScript() {
!function(e,t,n,c,s,a,i){e[s]=e[s]||["init","event"].reduce(((t,n)=>({...t,[n]:function(){e[s]?.q.push([n,arguments])}})),{q:[]}),a=t.createElement(n),i=t.getElementsByTagName(n)[0],a.async=1,a.src="https://cdn.omnicommerce.ai/sdk/broswer/latest/main.js?v="+(new Date).getDate(),i.parentNode.insertBefore(a,i)}(window,document,"script",0,"OpmIO");
}
init(name) {
window.OpmIO.init(name);
}
event(name, option) {
window.OpmIO.event(name, option);
}
}
export default new OpmIOService();
2단계: 설치하기
1단계에서 추가한 Service를 통해 SDK를 설치 할 수 있습니다.
OpmIOService.loadScript();
3단계: SDK 실행시키기
SDK를 사용하기 위해서는 발급받은 api key를 삽입하고 SDK를 실행 시킵니다.
OpmIOService.init("YOUR_PLUGIN_KEY"); // fill your plugin key
SDK에서 제공하는 상세한 이벤트에 대한 설명은 SDK Event를 참고합니다.