# Web Placement로 웹사이트 혜택을 표시하는 방법

Journey는 특정 단계에 도달한 사용자에게 웹사이트에서 바로 혜택을 표시할 수 있습니다. 예를 들어 장바구니에 상품을 남겨 둔 사용자의 장바구니에 무료 배송 배너를 표시합니다. 이 가이드에서는 이러한 Journey를 처음부터 끝까지 구축합니다. 혜택이 장바구니에 나타나고, 하루 안에 혜택을 클릭하지도 주문하지도 않은 사용자는 푸시를 받으며, 혜택 이후의 모든 주문은 전환으로 집계됩니다.

완성된 Journey는 다음과 같습니다:

<img src="/how-to-create-campaigns-how-to-show-a-website-offer-with-web-placement-1.webp" alt="Journey 캔버스: Cart abandoned 진입, Free shipping in the cart Web Placement, Clicked, Ordered, Not triggered 브랜치가 있는 Clicked the offer? Wait for Trigger, Not triggered 브랜치의 푸시, 세 개의 종료" width="928"/>

## 구축하기 전에

* **웹사이트.** 개발자가 [웹사이트를 준비](/ko/product/customer-journey/journey-elements/channels/web-placement/#prepare-your-website)해 두었습니다: Web SDK 3.108.1 이상, 로그인한 방문자에 대한 `setUserId`, 혜택이 들어갈 요소(예: 장바구니의 `<div id="pw-cart-slot"></div>`).
* **이벤트.** 사이트나 백엔드가 사용자가 장바구니에 상품을 남겨 둘 때와 주문할 때 이벤트를 보냅니다. 이 가이드에서는 `PW_AbandonedCart`와 `PW_OrderCreated`를 사용합니다. 두 이벤트 모두 웹사이트가 `setUserId`에 전달하는 것과 같은 User ID로 보내세요. 혜택은 User ID로 표시되고 제거되므로, 다른 ID를 사용하면 혜택이 사이트에 나타나지 않거나 주문 후에도 사라지지 않습니다.
* **콘텐츠.** 혜택과 버튼 또는 링크가 포함된 [웹 콘텐츠](/ko/product/content/web-popup-content/web-content/)가 있습니다(예: **Free shipping nudge with cart items**). 버튼이나 링크가 없으면 사용자가 혜택을 클릭할 수 없으므로 클릭 브랜치가 실행되지 않습니다.

## 1. 장바구니가 이탈되면 Journey 시작

1. **Campaigns > Customer Journey Builder**로 이동합니다.
2. **Create campaign**을 클릭한 다음 **Build a journey from scratch**를 클릭합니다.
3. 캔버스에 이미 있는 **Trigger-based Entry** 요소를 더블 클릭합니다.
4. **Event**에서 `PW_AbandonedCart`를 선택합니다.
5. **Save**를 클릭합니다.

자세한 내용은 [트리거 캠페인을 보내는 방법](/ko/tutorials/product-guides/how-to-create-campaigns-in-pushwoosh/how-to-send-a-triggered-campaign/)을 참조하세요.

## 2. 장바구니에 혜택 표시

1. 진입 요소에 **Web Placement** 요소를 연결합니다.
2. 요소를 더블 클릭하고 다음을 설정합니다:
   * **Web pop-up content:** 혜택(예: **Free shipping nudge with cart items**).
   * **Popup** 대신 **Inline**.
   * **CSS selector of the element:** 장바구니의 요소(예: `#pw-cart-slot`).
   * **Lifetime:** 혜택이 사용자를 기다리는 시간(예: 2일).
   * **Hide after an event:** 켜고 `PW_OrderCreated`를 선택하여 사용자가 주문하면 혜택이 사라지도록 합니다.
3. **Preview**에서 **Test device**를 선택합니다: 사이트가 열려 있는 브라우저입니다.
4. **Show on test device**를 클릭합니다.
5. 해당 기기에서 장바구니 페이지를 열고 혜택의 버튼을 클릭합니다. 그러면 `PW_WebPlacementClick`이 애플리케이션으로 전송됩니다. 이벤트 목록에는 애플리케이션이 수신한 이벤트만 표시되므로, 이 클릭 없이는 다음 단계에서 이벤트를 선택할 수 없습니다.
6. **Save**를 클릭합니다.

모든 설정은 [Web Placement](/ko/product/customer-journey/journey-elements/channels/web-placement/#configure-the-placement)를 참조하세요.

혜택이 사용자에 대해 대기열에 추가되는 즉시 사용자는 다음 요소로 이동하며, 사용자가 혜택을 보거나 클릭할 때까지 기다리지 않습니다.

## 3. 사용자의 행동에 따라 분기

1. **Web Placement**에 **Wait for Trigger** 요소를 연결합니다.
2. **Waiting period**에 1일을 입력합니다.
3. **Branch 1**에서 브랜치 이름으로 `Clicked`를 입력하고 `PW_WebPlacementClick` 이벤트를 선택합니다.
4. **Add branch**를 클릭합니다. **Branch 2**에서 브랜치 이름으로 `Ordered`를 입력하고 `PW_OrderCreated` 이벤트를 선택합니다.
5. **Save**를 클릭합니다.

<img src="/how-to-create-campaigns-how-to-show-a-website-offer-with-web-placement-2.webp" alt="대기 기간 1일, PW_WebPlacementClick을 기다리는 Clicked 브랜치, PW_OrderCreated를 기다리는 Ordered 브랜치, Not triggered 브랜치가 있는 Wait for Trigger 설정" width="584"/>

하루 안에 혜택을 클릭한 사용자는 **Clicked**로, 클릭하지 않고 주문한 사용자는 **Ordered**로 이동합니다. 나머지 사용자는 하루가 지나면 **Not triggered**로 이동합니다. **Ordered** 브랜치가 없으면 클릭하지 않고 주문한 사용자도 리마인더를 받게 됩니다: **Hide after an event**는 사이트에서 혜택만 제거할 뿐 Journey에서 사용자를 이동시키지 않습니다.

6. **Clicked** 및 **Ordered** 브랜치에 **Exit**를 연결합니다.
7. **Not triggered** 브랜치에 "Free shipping on your cart ends soon" 같은 리마인더가 담긴 **Push** 요소를 연결한 다음 **Exit**를 연결합니다. 푸시가 활성화된 기기가 없는 사용자는 리마인더를 받지 않습니다.

## 4. 주문을 전환으로 집계

1. **Settings**를 클릭한 다음 **Conversion goals**를 클릭합니다.
2. **Conversion period**에 3일을 입력합니다. 사용자가 Journey를 종료한 후 이 기간 내에 이루어진 주문도 집계됩니다.
3. **Event**에서 `PW_OrderCreated`를 선택합니다.
4. **Apply**를 클릭합니다.

<img src="/how-to-create-campaigns-how-to-show-a-website-offer-with-web-placement-3.webp" alt="전환 기간 3일, 대상 이벤트로 PW_OrderCreated가 설정된 Conversion goals" width="616"/>

주문 대신 혜택 클릭을 집계하려면 `PW_WebPlacementClick`을 선택합니다.

## 5. 시작하고 결과 확인

1. **Launch campaign**을 클릭합니다.
2. Journey 통계에서 **Web Placement** 요소를 확인합니다: **Shown**은 혜택이 표시된 횟수, **Interactions**는 클릭된 횟수입니다. [Placement 통계](/ko/product/customer-journey/journey-elements/channels/web-placement/#placement-statistics)를 참조하세요.