Web-To-App SDK 적용

1. 필수 설정

필수 설정이란 WWT SDK가 동작하기 위해서 반드시 웹사이트에 추가되어야 하는 설정을 말합니다. 필수 설정을 통해서, WWTK SDK는 웹사이트로 전달된 CPC 광고 정보를 분석하여 임시 저장하고, 해당 정보를 통해서 앱으로 이동 시킬 수 있도록 데이터 매핑 작업을 수행합니다.

SDK 추가

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

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

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

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

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

npm i dop-website-sdk

SDK 초기화

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

SDK 초기화 스크립트 확인

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

SDK 초기화 스크립트 적용

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

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

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

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

<!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.getWebTrack({});
    </script>
    ...

import { useEffect } from "react";
import { WDOTInitialization } from "dop-website-sdk";

function App() {
    ...
    
    // Wisetracker SDK 초기화 스크립트
    useEffect(() => {
        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.getWebTrack({});
    }, []);
     
    ...

SDK 초기화 확인

Web SDK 초기화는 두가지 형태일 수 있습니다.

아래의 탭에서 적용하시고자하는 유형에 맞춰 초기화 코드가 잘 작성되었는지 다시한번 확인 해 주세요.

//  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.getWebTrack({});
</script>

<!-- 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.getWebTrack({});
 WDOTInitialization.init();
</script>

검증방법

WWTK SDK가 랜딩페이지에 전달된 CPC 광고 정보를 정상적으로 처리하였는지 검증하는 방법은 네이버 광고에서 추적URL 설정 진행여부에 따라 2가지 형태로 나뉩니다.

CPC 광고 설정 시, 자동 추적 URL을 설정한 경우

아래의 그림과 같이 WWTK의 객체 안에 temporaryCpcData 속성에 관련 URL 링크 데이터가 들어오게 됩니다. (wtc, wtm, wts 을 확인 해 주세요.)

네이버 광고 설정 시, 자동 추적 URL 설정 없이 이용하는 경우

자동추적 설정이 없는 경우에는 아래와 같이 WWTK 객체 안의 trackId 속성에 'M'으로 시작하는 값이 포함되어 있는지 Chrome inspect 를 통해 확인 해 주세요 (temporaryCpcData 속성은 비어있게 됩니다.)

PreviousCPC 광고 분석 연동 NextApp 으로 이동시키기

Last updated 1 year ago

Was this helpful?