# Web-To-App SDK 적용
1\. 필수 설정
필수 설정이란 WWT SDK가 동작하기 위해서 반드시 웹사이트에 추가되어야 하는 설정을 말합니다. \
필수 설정을 통해서, **WWTK SDK는 웹사이트로 전달된 CPC 광고 정보를 분석하여 임시 저장하고, 해당 정보를 통해서 앱으로 이동 시킬 수 있도록 데이터 매핑 작업을 수행**합니다.
### SDK 추가
WWT SDK는 일반적인 웹사이트에 적용하는`"Javascript 타입"`과 `"JSX 모듈 타입"` 2가지로 제공되고 있습니다. 분석하고자 하는 웹사이트의 개발 환경에 적합한 SDK 타입을 다음과 같이 타입에 맞게 추가할 수 있습니다.
#### Javascript, jQuery 등으로 개발된 웹사이트인 경우
아래의 파일을 다운로드한 후, 압축을 해제하여 개발코드가 저장된 경로에 위치시키면 됩니다.
{% file src="" %}
2023.08.01 Updated.
{% endfile %}
#### React.js 등 JSX로 개발된 웹사이트인 경우
아래와 같이 npm 의존성 설치를 통해 SDK 모듈을 개발코드에 import 하면 됩니다.
{% tabs %}
{% tab title="JSX" %}
```jsx
npm i dop-website-sdk
```
{% endtab %}
{% endtabs %}
### SDK 초기화
WWT SDK 초기화(Initialization)는 SDK를 사용하기 전 반드시 먼저 실행되어야 하는 과정입니다. 이는 SDK를 웹사이트로 불러오는 코드 동작을 웹페이지의 **헤더**에 위치 시킴으로써, 웹사이트가 SDK에서 제공하는 API를 미리 인지할 수 있도록 만들어줍니다.
#### SDK 초기화 스크립트 확인
SDK 초기화 코드는 와이즈트래커 시스템에 로그인 하신 후, 아래의 메뉴에서 확인할 수 있습니다.
[서비스 설정] > [어플리케이션 설정] > "스크립트 받기" 클릭
#### SDK 초기화 스크립트 적용
1️⃣ Javascript, jQuery 등으로 개발된 웹사이트일 경우
1. **index.html**의 `` 태그 안에 SDK 초기화 스크립트를 적용합니다.
이를 위해, 먼저 위에서 다운로드 받았던 SDK 파일(dop-website-sdk.js)에 대한 경로를 `
...
```
{% endtab %}
{% tab title="JSX" %}
```jsx
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({});
}, []);
...
```
{% endtab %}
{% endtabs %}
### SDK 초기화 확인
Web SDK 초기화는 두가지 형태일 수 있습니다.
아래의 탭에서 적용하시고자하는 유형에 맞춰 초기화 코드가 잘 작성되었는지 다시한번 확인 해 주세요.
{% tabs %}
{% tab title="CPC 광고 분석만 적용" %}
```javascript
// Wisetracker SDK 초기화 스크립트
```
{% endtab %}
{% tab title="Website 분석 및 CPC 분석 모두 적용" %}
```javascript
```
{% endtab %}
{% endtabs %}
### 검증방법
WWTK SDK가 랜딩페이지에 전달된 CPC 광고 정보를 정상적으로 처리하였는지 검증하는 방법은 **`네이버 광고에서 추적URL 설정 진행여부`**에 따라 2가지 형태로 나뉩니다.
1. **CPC 광고 설정 시, 자동 추적 URL을 설정한 경우**
아래의 그림과 같이 WWTK의 객체 안에 `temporaryCpcData` 속성에 관련 URL 링크 데이터가 들어오게 됩니다. (wtc, wtm, wts 을 확인 해 주세요.)
2. **네이버 광고 설정 시, 자동 추적 URL 설정 없이 이용하는 경우**
자동추적 설정이 없는 경우에는 아래와 같이 WWTK 객체 안의 `trackId 속성에 'M'으로 시작하는 값`이 포함되어 있는지 Chrome inspect 를 통해 확인 해 주세요 (temporaryCpcData 속성은 비어있게 됩니다.)
