Javascript SDK Integration
분석 시스템의 핵심 구성요소인 SDK는 웹사이트 애널리틱스에 필요한 데이터 포인트를 확보하는 역할을 수행합니다. 데이터 측정을 위해 본 문서의 안내에 따라 Javascript SDK를 웹사이트에 연동하여 주시기 바랍니다.
필수 설정이란 SDK가 동작하기 위해서 반드시 웹사이트에 추가되어야 하는 설정을 말합니다. 필수 설정을 적용하게 되면 방문, 페이지뷰, 사용자의 환경 정보 등을 측정할 수 있게 됩니다.
웹사이트 SDK는 일반적인 웹사이트에 적용하는 "Javascript 타입"과 "JSX 모듈 타입" 2가지로 제공되고 있습니다. 분석하고자 하는 웹사이트의 개발 환경에 적합한 SDK 타입을 다음과 같이 타입에 맞게 추가할 수 있습니다.
아래의 파일을 다운로드한 후, 압축을 해제하여 개발코드가 저장된 경로에 위치시키면 됩니다.
dop-website-sdk.js.zip
21KB
Binary
2023.08.01 Updated.
아래와 같이 npm 의존성 설치를 통해 SDK 모듈을 개발코드에 import 하면 됩니다.
JSX
npm i dop-website-sdk
SDK 초기화(Initialization)는 SDK를 사용하기 전 반드시 먼저 실행되어야 하는 과정입니다. 이는 SDK를 웹사이트로 불러오는 코드 동작을 웹페이지의 헤더에 위치 시킴으로써, 웹사이트가 SDK에서 제공하는 API를 미리 인지할 수 있도록 만들어줍니다.
SDK 초기화 코드는 와이즈트래커 시스템에 로그인 하신 후, 아래의 메뉴에서 확인할 수 있습니다.
서비스 선택 > [서비스 설정] > [어플리케이션 설정] > "스크립트 받기" 클릭
"클립보드로 복사" 클릭
Javascript, jQuery 등으로 개발된 웹사이트일 경우
- 1.index.html의
<head>태그 안에 SDK 초기화 스크립트를 적용합니다.이를 위해, 먼저 위에서 다운로드 받았던 SDK 파일(dop-website-sdk.js)에 대한 경로를<script>태그의src속성에 작성합니다. - 2.와이즈트래커 시스템의 [어플리케이션 설정] 메뉴에서 복사한 SDK 초기화 스크립트를 다른
<script>태그에 추가 작성합니다.
React.js 등 JSX로 개발된 웹사이트일 경우
- 1.App.js 컴포넌트에 SDK 초기화 스크립트를 적용합니다. 이를 위해, 먼저 위에서
npm -i명령을 통해 설치했던 SDK에WDOTInitialization속성을 컴포넌트로 import 합니다. - 2.와이즈트래커스의 [어플리케이션 설정] 메뉴에서 복사한 SDK 초기화 스크립트를
useEffect안에 작성하되, 두번째 인자는 빈배열([])로 두어 자식 컴포넌트들의 렌더링에 공통적으로 적용될 수 있도록 합니다. - 3.만약 클래스형 React.js로 개발된 웹사이트라면, LifeCycle 함수인
componentDidMount안에 SDK 초기화 스크립트를 작성하면 됩니다.
JavaScript
JSX
<!DOCTYPE html>
<html>
<head>
...
<!-- Wisetracker SDK 초기화 스크립트 -->
<script src="./dop-website-sdk.js"></script>
<script type="text/javascript">
WDOTInitialization.setConfig({
serviceNumber: {service number},
dotAccessToken:"Wisetracker access token string",
combackUserLimitDays:14,
dotEndPoint:"The endpoint of data receiving",
adClkEndPoint:"The endpoint of data receiving",
includeUrl:"Regular expression of analysis websites",
excludeUrl:"",
referrerExpire:7
});
WDOTInitialization.init();
</script>
...
import { useEffect } from "react";
import WDOTInitialization from "dop-website-sdk";
function App() {
...
// Wisetracker SDK 초기화 스크립트
useEffect(() => {
window.WDOTInitialization.setConfig({
serviceNumber: {service number},
dotAccessToken:"Wisetracker access token string",
combackUserLimitDays:14,
dotEndPoint:"The endpoint of data receiving",
adClkEndPoint:"The endpoint of data receiving",
includeUrl:"Regular expression of analysis websites",
excludeUrl:"",
referrerExpire:7
});
window.WDOTInitialization.init();
}, []);
let WDOT = window.WDOT;
...
Last modified 1mo ago