# Web Push 테스트

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

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

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td>Web SDK 설치</td><td><a href="../../sdk-integrating/initialize/web-sdk">web-sdk</a></td></tr><tr><td>Web Push 인증서 등록</td><td><a href="../certification/web-push">web-push</a></td></tr><tr><td>Web Push 설치</td><td><a href="../integration/web-push">web-push</a></td></tr></tbody></table>

### 디바이스 ID 확인 (크롬 브라우저 기준)

개발자 도구 (단축키 F12) > 콘솔에 접속하여 `mtap.getDeviceId()` 를 입력하여 테스트할 브라우저의 디바이스 ID를 확인합니다.&#x20;

<figure><img src="https://content.gitbook.com/content/TQoY0rYrzNUQxhlUfYFm/blobs/kdRouqcZr1KcjuEdqhlc/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202025-05-15%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%201.42.57.png" alt=""><figcaption></figcaption></figure>

## 1. 테스트 발송하기

&#x20;[#id-5](https://docs.marketap.io/t3ZS4WXNMj0HK27EtIMV/developer/push-notification/test/..#id-5 "mention") 에서 설정한 캠페인 창으로 진입해서 하단의  `테스트 발송하기` 버튼을 클릭합니다.

{% hint style="info" %}
웹 푸시를 테스트하는 경우에는 캠페인의 플랫폼을 웹으로 설정해야 합니다.
{% endhint %}

<figure><img src="https://content.gitbook.com/content/TQoY0rYrzNUQxhlUfYFm/blobs/krBkO2l4MykeMy6X8z6Y/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202025-07-03%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%203.39.31.png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://260547158-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTQoY0rYrzNUQxhlUfYFm%2Fuploads%2F3EfPWtPmNLHougiIvNBH%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202025-08-05%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%208.09.18.png?alt=media&#x26;token=ef693718-eac5-49e6-9644-060b53d0c97b" alt=""><figcaption></figcaption></figure>

디바이스에서 푸시가 정상 수신되는지 확인해주세요.

{% hint style="success" %}
테스트 발송하기는 타겟에 상관없이 테스트할 수 있습니다.
{% endhint %}

{% hint style="danger" %}
스크립트 파일은 어떤 환경(local, dev, prod)에서든 콘솔에 지정한 path를 통해 접근이 가능해야만 웹푸시를 사용할 수 있습니다. 테스트 환경에서도 설정한 경로를 통해 js파일이 잘 불러와지는지 확인해주세요!
{% endhint %}

## 2. 캠페인 수신 확인

[#id-2](https://docs.marketap.io/t3ZS4WXNMj0HK27EtIMV/developer/push-notification/test/..#id-2 "mention") 에서 설정한 트리거 이벤트인 `홈 화면 조회` 를 찍도록 이벤트를 추가하고 테스트 유저 설정 후 캠페인이 트리거 되는지 확인해보겠습니다.

테스트 유저 설정에 대한 자세한 내용은 아래 문서를 확인해주세요.

{% content-ref url="<https://app.gitbook.com/s/yROeODSgPulCgZ9LFAYn/campaign/common/test>" %}
[테스트 발송 및 유저 설정](https://app.gitbook.com/s/yROeODSgPulCgZ9LFAYn/campaign/common/test)
{% endcontent-ref %}

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

```html
// ...
<script>
    mtap.track('mkt_home_view')
</script>
// ...
```

현재 사용중인 브라우저에서 푸시가 잘 노출되는지 확인해주세요.

<figure><img src="https://content.gitbook.com/content/TQoY0rYrzNUQxhlUfYFm/blobs/2pEmJOnu76LQ5oe18DQO/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202025-05-15%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%201.56.56.png" alt="" width="375"><figcaption></figcaption></figure>

## 4. 이어서 진행하기

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

<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/overview">overview</a></td></tr><tr><td>In-App Campaign 테스트</td><td><a href="../../in-app-message/in-app-campaign">in-app-campaign</a></td></tr><tr><td>심화 연동</td><td><a href="../../advanced-usage/overview">overview</a></td></tr></tbody></table>