Web SDK

이 페이지에서는 Web SDK의 설치 및 초기화를 안내합니다.

1. SDK 설치

Html 파일에 아래 스크립트를 추가하세요:

<html lang="en">
<head>
    <!-- SDK 스크립트 -->
    <script src="https://static.marketap.io/sdk/marketap-web-sdk.min.js">
    </script>
</head>
</html>

현재 최신 버전: 1.1.2 최신 버전을 확인하려면 npm 패키지 페이지를 방문하세요.

npm 또는 yarn을 사용해 Marketap SDK를 설치하세요:

# NPM을 사용하는 경우
npm install marketap-web-sdk-node@latest

# Yarn을 사용하는 경우
yarn add marketap-web-sdk-node@latest

2. 연동 코드 작성하기

2.1 SDK 초기화 하기

페이지가 처음 로드되는 시점에 SDK를 초기화해주세요.

SDK 스크립트가 로드된 뒤에는 window.mtap을 통해 marketap SDK에 전역적으로 접근이 가능합니다. SDK에 접근하기 전, Initialize 함수를 먼저 호출해주세요:

<script>
    window.mtap.initialize({projectId: "YOUR_PROJECT_ID"}); // SDK 초기화
</script>

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");
        });
        ...
    }, []);
    ...
}

SDK의 원활한 동작을 위해 페이지 로드마다 최소 1회의 실행이 보장된 위치에서 initialize함수를 호출해주세요.

보유한 프로젝트의 Project ID 값은 이 문서를 통해 확인이 가능합니다.
initialize 함수는 중복 호출되더라도 가장 초기 호출 1회에만 주요 로직이 실행됩니다.

3. 모바일 앱에 통합하기 (선택)

모바일 앱에서 웹뷰를 사용할 경우 Mobile SDK 가 Web SDK의 이벤트를 받아서 처리하도록 브릿지 코드를 추가할 수 있습니다. 브릿지 코드를 연동할 경우 다음 기능이 지원됩니다:

이벤트 트래킹 통합 (Web SDK의 이벤트를 Mobile SDK에서 처리)
유저, 기기 식별 통합 (identify, resetIdentity)
인앱메시지 통합 (웹뷰 내 캠페인 표시 및 클릭/노출 처리)

웹뷰 브릿지를 연동하려면 다음 문서에 따라 진행해주세요.

웹뷰 브릿지

4. 이어서 진행하기

아래 카드를 통해 Web에 필요한 연동을 이어서 하실 수 있습니다. Marketap SDK가 권장하는 기능 연동 순서는 Marketap SDK 기능 연동 페이지를 확인해주세요.

Event 및 User 연동

In-App Campaign

PreviousReact Native SDK NextMarketap SDK 기능 연동

Last updated 1 month ago

Was this helpful?

hashtag1. SDK 설치

hashtag2. 연동 코드 작성하기

hashtag2.1 SDK 초기화 하기

hashtag3. 모바일 앱에 통합하기 (선택)

hashtag4. 이어서 진행하기

1. SDK 설치

2. 연동 코드 작성하기

2.1 SDK 초기화 하기

3. 모바일 앱에 통합하기 (선택)

4. 이어서 진행하기