본문으로 건너뛰기

시작하기

이 문서에서는 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를 참고합니다.