# 如何使用 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"/>

## 开始构建之前

* **网站。** 您的开发人员已[准备好网站](/zh/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，优惠将永远不会出现在网站上，或在下单后不会消失。
* **内容。** 您有包含优惠以及按钮或链接的 [Web 内容](/zh/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**。

详情请参阅[如何发送触发式营销活动](/zh/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**。
   * 选择 **Inline** 而不是 **Popup**。
   * **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](/zh/product/customer-journey/journey-elements/channels/web-placement/#configure-the-placement)。

一旦优惠为用户排入队列，用户就会进入下一个元素，而不是在用户看到或点击优惠之后。

## 3. 根据用户的操作进行分支

1. 将 **Wait for Trigger** 元素连接到 **Web Placement**。
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="Wait for Trigger 设置：等待期为 1 天，Clicked 分支等待 PW_WebPlacementClick，Ordered 分支等待 PW_OrderCreated，以及 Not triggered 分支" width="584"/>

一天内点击优惠的用户进入 **Clicked**，未点击但下单的用户进入 **Ordered**。其他所有用户在一天结束后进入 **Not triggered**。如果没有 **Ordered** 分支，未点击但已下单的用户仍会收到提醒：**Hide after an event** 只会从网站上移除优惠，不会让用户在 Journey 中移动。

6. 将 **Exit** 连接到 **Clicked** 和 **Ordered** 分支。
7. 将 **Push** 元素连接到 **Not triggered** 分支，并设置提醒，例如“您购物车的免运费优惠即将结束”，然后将 **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="Conversion goals：转化期为 3 天，目标事件为 PW_OrderCreated" width="616"/>

要统计优惠的点击而不是订单，请选择 `PW_WebPlacementClick`。

## 5. 启动并查看结果

1. 点击 **Launch campaign**。
2. 在 Journey 统计中，查看 **Web Placement** 元素：**Shown** 是优惠的显示次数，**Interactions** 是其点击次数。请参阅 [Placement 统计](/zh/product/customer-journey/journey-elements/channels/web-placement/#placement-statistics)。