Javascript SDK Integration

Last updated 14 days ago

Was this helpful?

Javascript SDK Integration

분석 시스템의 핵심 구성요소인 SDK는 웹사이트 애널리틱스에 필요한 데이터 포인트를 확보하는 역할을 수행합니다. 데이터 측정을 위해 본 문서의 안내에 따라 Javascript SDK를 웹사이트에 연동하여 주시기 바랍니다.

1. 필수 설정

필수 설정이란 SDK가 동작하기 위해서 반드시 웹사이트에 추가되어야 하는 설정을 말합니다. 필수 설정을 적용하게 되면 방문, 페이지뷰, 사용자의 환경 정보 등을 측정할 수 있게 됩니다.

SDK 추가

웹사이트 SDK는 일반적인 웹사이트에 적용하는 "Javascript 타입"과 "JSX 모듈 타입" 2가지로 제공되고 있습니다. 분석하고자 하는 웹사이트의 개발 환경에 적합한 SDK 타입을 다음과 같이 타입에 맞게 추가할 수 있습니다.

Javascript, jQuery 등으로 개발된 웹사이트인 경우

아래의 파일을 다운로드한 후, 압축을 해제하여 개발코드가 저장된 경로에 위치시키면 됩니다.

React.js 등 JSX로 개발된 웹사이트인 경우

아래와 같이 npm 의존성 설치를 통해 SDK 모듈을 개발코드에 import 하면 됩니다.

npm i dop-website-sdk

SDK 초기화

SDK 초기화(Initialization)는 SDK를 사용하기 전 반드시 먼저 실행되어야 하는 과정입니다. 이는 SDK를 웹사이트로 불러오는 코드 동작을 웹페이지의 헤더에 위치 시킴으로써, 웹사이트가 SDK에서 제공하는 API를 미리 인지할 수 있도록 만들어줍니다.

SDK 초기화 스크립트 확인

SDK 초기화 코드는 와이즈트래커 시스템에 로그인 하신 후, 아래의 메뉴에서 확인할 수 있습니다.

SDK 초기화 스크립트 적용

Javascript, jQuery 등으로 개발된 웹사이트일 경우

index.html의 <head> 태그 안에 SDK 초기화 스크립트를 적용합니다.
이를 위해, 먼저 위에서 다운로드 받았던 SDK 파일(dop-website-sdk.js)에 대한 경로를 <script> 태그의 src 속성에 작성합니다.
와이즈트래커 시스템의 [어플리케이션 설정] 메뉴에서 복사한 SDK 초기화 스크립트를 다른 <script> 태그에 추가 작성합니다.

React.js 등 JSX로 개발된 웹사이트일 경우

App.js 컴포넌트에 SDK 초기화 스크립트를 적용합니다. 이를 위해, 먼저 위에서 npm -i 명령을 통해 설치했던 SDK에 WDOTInitialization 속성을 컴포넌트로 import 합니다.
와이즈트래커스의 [어플리케이션 설정] 메뉴에서 복사한 SDK 초기화 스크립트를 useEffect 안에 작성하되, 두번째 인자는 빈배열([])로 두어 자식 컴포넌트들의 렌더링에 공통적으로 적용될 수 있도록 합니다.
만약 클래스형 React.js로 개발된 웹사이트라면, LifeCycle 함수인 componentDidMount 안에 SDK 초기화 스크립트를 작성하면 됩니다.

<!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, 
            firstEventSendMode : false,
            isSPA: true
        });
        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, 
            firstEventSendMode : false,
            isSPA: true
        });
        window.WDOTInitialization.init();
    }, []);
    
    let WDOT = window.WDOT;
    ...

PreviousWebsite Next웹사이트 이벤트 분석하기