# Web SDK
## 1. SDK 설치
{% tabs %}
{% tab title="Javascript" %}
Html 파일에 아래 스크립트를 추가하세요:
```html
```
{% endtab %}
{% tab title="Node JS" %}
{% hint style="success" %}
**현재 최신 버전:** 1.1.2\
최신 버전을 확인하려면 [npm 패키지 페이지](https://www.npmjs.com/package/marketap-web-sdk-node)를 방문하세요.
{% endhint %}
npm 또는 yarn을 사용해 Marketap SDK를 설치하세요:
```bash
# NPM을 사용하는 경우
npm install marketap-web-sdk-node@latest
# Yarn을 사용하는 경우
yarn add marketap-web-sdk-node@latest
```
{% endtab %}
{% endtabs %}
## 2. 연동 코드 작성하기
### 2.1 SDK 초기화 하기
페이지가 처음 로드되는 시점에 SDK를 초기화해주세요.
{% tabs %}
{% tab title="Javascript" %}
SDK 스크립트가 로드된 뒤에는 window\.mtap을 통해 marketap SDK에 전역적으로 접근이 가능합니다. SDK에 접근하기 전, Initialize 함수를 먼저 호출해주세요:
```html
```
{% endtab %}
{% tab title="Node JS" %}
```javascript
import mtap from "marketap-web-sdk-node";
export default function RootComponent() {
// 웹 어플리케이션 최상단 로직
...
useEffect(() => {
// Marketap SDK 초기화
mtap.initialize({
projectId: "YOUR_PROJECT_ID",
}).then(() => {
console.log("Marketap SDK initialized");
});
...
}, []);
...
}
```
{% endtab %}
{% endtabs %}
{% hint style="warning" %}
SDK의 원활한 동작을 위해 페이지 로드마다 최소 1회의 실행이 보장된 위치에서 initialize함수를 호출해주세요.
{% endhint %}
{% hint style="success" %}
* 보유한 프로젝트의 Project ID 값은 [이 문서](https://docs.marketap.io/t3ZS4WXNMj0HK27EtIMV/developer/getting-started/marketap-overview/project-setting)를 통해 확인이 가능합니다.
* **initialize** 함수는 중복 호출되더라도 가장 초기 호출 1회에만 주요 로직이 실행됩니다.
{% endhint %}
## 3. 모바일 앱에 통합하기 (선택)
모바일 앱에서 웹뷰를 사용할 경우 Mobile SDK 가 Web SDK의 이벤트를 받아서 처리하도록 브릿지 코드를 추가할 수 있습니다. 브릿지 코드를 연동할 경우 다음 기능이 지원됩니다:
* 이벤트 트래킹 통합 (Web SDK의 이벤트를 Mobile SDK에서 처리)
* 유저, 기기 식별 통합 (identify, resetIdentity)
* 인앱메시지 통합 (웹뷰 내 캠페인 표시 및 클릭/노출 처리)
웹뷰 브릿지를 연동하려면 다음 문서에 따라 진행해주세요.
{% content-ref url="../../advanced-usage/webview-bridge" %}
[webview-bridge](https://docs.marketap.io/t3ZS4WXNMj0HK27EtIMV/developer/advanced-usage/webview-bridge)
{% endcontent-ref %}
## 4. 이어서 진행하기
아래 카드를 통해 Web에 필요한 연동을 이어서 하실 수 있습니다. Marketap SDK가 권장하는 기능 연동 순서는 [functions](https://docs.marketap.io/t3ZS4WXNMj0HK27EtIMV/developer/sdk-integrating/functions "mention") 페이지를 확인해주세요.