# Web-To-App SDK 적용
1\. 필수 설정
필수 설정이란 WWT SDK가 동작하기 위해서 반드시 웹사이트에 추가되어야 하는 설정을 말합니다. \
필수 설정을 통해서, **WWTK SDK는 웹사이트로 전달된 CPC 광고 정보를 분석하여 임시 저장하고, 해당 정보를 통해서 앱으로 이동 시킬 수 있도록 데이터 매핑 작업을 수행**합니다.
### SDK 추가
WWT SDK는 일반적인 웹사이트에 적용하는`"Javascript 타입"`과 `"JSX 모듈 타입"` 2가지로 제공되고 있습니다. 분석하고자 하는 웹사이트의 개발 환경에 적합한 SDK 타입을 다음과 같이 타입에 맞게 추가할 수 있습니다.
#### Javascript, jQuery 등으로 개발된 웹사이트인 경우
아래의 파일을 다운로드한 후, 압축을 해제하여 개발코드가 저장된 경로에 위치시키면 됩니다.
{% file src="/files/3Xw4BqeKvMmThhp8n8gX" %}
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 속성은 비어있게 됩니다.)
자동 추적 URL 설정 없이 이용하는 경우 확인되는 trackId 속성
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://document.wisetracker.co.kr/v2-developer/sdk/cpc/web-to-app.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.