# Web

## 사전 작업 <a href="#pre-work" id="pre-work"></a>

이 문서는 Web SDK 연동 완료 이후 인앱 메시지 수신을 테스트하기 위한 방법을 가이드합니다. 아래 문서의 사전 작업을 완료 후 진행해주세요.

{% content-ref url="../../sdk-integrating/initialize/web-sdk" %}
[web-sdk](https://docs.marketap.io/t3ZS4WXNMj0HK27EtIMV/developer/sdk-integrating/initialize/web-sdk)
{% endcontent-ref %}

{% content-ref url="" %}
[](https://docs.marketap.io/t3ZS4WXNMj0HK27EtIMV/developer/in-app-message/in-app-campaign)
{% endcontent-ref %}

## 1. 캠페인 수신 확인

[캠페인 테스트 단계](https://docs.marketap.io/t3ZS4WXNMj0HK27EtIMV/developer/in-app-message/in-app-campaign/..#id-1)에서 설정한 트리거 이벤트인 `홈 화면 조회` 를 찍도록 이벤트를 추가하고 캠페인이 트리거 되는지 확인해보겠습니다.&#x20;

코드의 적당한 위치에 홈 화면 조회(`mkt_home_view`) 이벤트를 추가합니다. 앱 실행 후 해당 코드가 실행되면 캠페인이 트리거되어야 합니다.&#x20;

```typescript
// React example

useEffect(() => {
  mtap.track('mkt_home_view')
}, []}
```

디바이스에서 인앱 메시지가 정상 수신되는지 확인해주세요. [#id-2](#id-2 "mention") 으로 이동해서 연동을 추가로 확인해주세요.

### 1-1. 클릭 확인

캠페인에 클릭 액션 URL이 설정되어 있는 경우, **마켓탭 SDK는 기본 동작으로** 다음과 같이 동작합니다.

```
window.location.href = url;
```

설정된 URL로 랜딩이 정상적으로 동작하는지 확인합니다.

## 2. 웹앱에서 확인하기 (선택)

모바일 웹뷰를 통해 웹페이지를 랜더링하는 웹앱일 경우 [웹뷰 브릿지](https://docs.marketap.io/t3ZS4WXNMj0HK27EtIMV/developer/advanced-usage/webview-bridge) 연동이 권장됩니다. 연동을 완료한 경우 이 섹션을 따라 진행해주세요.

### 2-1. `handleInAppInWebView` true인 경우 (기본값)

웹뷰 브릿지 연동시 따로 설정을 변경하지 않았다면 `handleInAppInWebView` true 입니다. 이 때 웹뷰에서 트리거된 인앱 팝업은 웹뷰 위에 html로 랜더링됩니다.&#x20;

* 캠페인이 정상적으로 노출되는지 확인합니다.
* 클릭 시 설정한 클릭 액션 url로 정상 랜딩 되는지 확인합니다.
  * 앱 내 페이지 전환 확인
  * 앱 외부 랜딩 확인 (외부 링크의 경우)

이 때 캠페인 클릭시 랜딩은 [#id-1-1](#id-1-1 "mention") 과 마찬가지로 `window.location.href` 를 통해 이루어집니다. 클릭 랜딩이 정상 동작하지 않거나 커스텀 액션이 필요할 때, 이 기본 동작을 비활성화하고 클릭 시 액션을 직접 제어하려면 아래 페이지 안내에 따라 clickHandler 기반 커스텀 연동을 진행해주세요.

{% content-ref url="../../advanced-usage/custom-click-handler" %}
[custom-click-handler](https://docs.marketap.io/t3ZS4WXNMj0HK27EtIMV/developer/advanced-usage/custom-click-handler)
{% endcontent-ref %}

### 2-2. `handleInAppInWebView` false인 경우

스크린의 일부에만 웹뷰를 사용하거나 웹뷰 내부 랜딩을 원하지 않는 경우 이 옵션을 사용할 수 있습니다.

`MarketapWebBridge(handleInAppInWebView: false)` 와 같이 `handleInAppInWebView` 값을 false로 주입한 경우 인앱 팝업은 웹뷰 내부에 랜더링되지 않고 플랫폼별 팝업 노출 로직에 따라 동작합니다. 플랫폼별 인앱 팝업은 아래 페이지 안내에 따라 진행해주세요.

{% content-ref url="ios" %}
[ios](https://docs.marketap.io/t3ZS4WXNMj0HK27EtIMV/developer/in-app-message/in-app-campaign/ios)
{% endcontent-ref %}

{% content-ref url="android" %}
[android](https://docs.marketap.io/t3ZS4WXNMj0HK27EtIMV/developer/in-app-message/in-app-campaign/android)
{% endcontent-ref %}

{% content-ref url="flutter" %}
[flutter](https://docs.marketap.io/t3ZS4WXNMj0HK27EtIMV/developer/in-app-message/in-app-campaign/flutter)
{% endcontent-ref %}

## 3. 이어서 진행하기

이제 In-App Campaign 테스트가 완료되었습니다. 아래 문서에서 이어서 진행해주세요.

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td>EVENT 및 USER 연동</td><td><a href="../../taxonomy/sdk">sdk</a></td></tr><tr><td>Push Notification 테스트</td><td><a href="../../push-notification/test">test</a></td></tr><tr><td>심화 연동</td><td><a href="../../advanced-usage/overview">overview</a></td></tr></tbody></table>
