# วิธีแสดงข้อเสนอบนเว็บไซต์ด้วย Web Placement

Journey สามารถแสดงข้อเสนอบนเว็บไซต์ของคุณโดยตรงให้ผู้ใช้ที่มาถึงขั้นตอนหนึ่ง เช่น แบนเนอร์จัดส่งฟรีในรถเข็นของผู้ใช้ที่ทิ้งสินค้าไว้ในนั้น คู่มือนี้สร้าง Journey ดังกล่าวตั้งแต่ต้นจนจบ: ข้อเสนอจะปรากฏในรถเข็น ผู้ใช้ที่ไม่ได้คลิกข้อเสนอและไม่ได้สั่งซื้อภายในหนึ่งวันจะได้รับ push และทุกคำสั่งซื้อหลังจากข้อเสนอจะนับเป็น Conversion

Journey ที่เสร็จสมบูรณ์จะมีลักษณะดังนี้:

<img src="/how-to-create-campaigns-how-to-show-a-website-offer-with-web-placement-1.webp" alt="canvas ของ Journey: จุดเข้า Cart abandoned, Web Placement ชื่อ Free shipping in the cart, Wait for Trigger ชื่อ Clicked the offer? ที่มีสาขา Clicked, Ordered และ Not triggered, push บนสาขา Not triggered และ Exit สามจุด" width="928"/>

## ก่อนเริ่มสร้าง

* **เว็บไซต์** นักพัฒนาของคุณได้[เตรียมเว็บไซต์](/th/product/customer-journey/journey-elements/channels/web-placement/#prepare-your-website)แล้ว: Web SDK 3.108.1 ขึ้นไป `setUserId` สำหรับผู้เยี่ยมชมที่ลงชื่อเข้าใช้ และองค์ประกอบที่ข้อเสนอจะถูกแทรกเข้าไป เช่น `<div id="pw-cart-slot"></div>` ในรถเข็น
* **Event** เว็บไซต์หรือแบ็กเอนด์ของคุณส่ง Event เมื่อผู้ใช้ทิ้งสินค้าไว้ในรถเข็นและเมื่อผู้ใช้สั่งซื้อ คู่มือนี้ใช้ `PW_AbandonedCart` และ `PW_OrderCreated` ส่ง Event ทั้งสองด้วย User ID เดียวกับที่เว็บไซต์ส่งให้ `setUserId`: ข้อเสนอจะแสดงและถูกนำออกตาม User ID หากใช้ ID อื่น ข้อเสนอจะไม่ปรากฏบนเว็บไซต์เลย หรือไม่หายไปหลังจากสั่งซื้อ
* **เนื้อหา** คุณมี[เนื้อหาเว็บ](/th/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** ซึ่งอยู่บน canvas แล้ว
4. ใน **Event** ให้เลือก `PW_AbandonedCart`
5. คลิก **Save**

ดูรายละเอียดได้ที่ [วิธีส่งแคมเปญแบบทริกเกอร์](/th/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` ไปยังแอปพลิเคชันของคุณ รายการ Event จะแสดง Event หลังจากแอปพลิเคชันได้รับ Event นั้นแล้วเท่านั้น หากไม่คลิก คุณจะเลือก Event นี้ในขั้นตอนถัดไปไม่ได้
6. คลิก **Save**

ดูการตั้งค่าทั้งหมดได้ที่ [Web Placement](/th/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` เป็นชื่อสาขาและเลือก Event `PW_WebPlacementClick`
4. คลิก **Add branch** ใน **Branch 2** ให้ป้อน `Ordered` เป็นชื่อสาขาและเลือก Event `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** พร้อมข้อความเตือน เช่น "Free shipping on your cart ends soon" แล้วเชื่อมต่อ **Exit** เข้ากับองค์ประกอบนั้น ผู้ใช้ที่ไม่มีอุปกรณ์ที่เปิดใช้งาน push จะไม่ได้รับข้อความเตือน

## 4. นับคำสั่งซื้อเป็น Conversion

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 ที่มีระยะเวลา Conversion 3 วัน และ PW_OrderCreated เป็น Event เป้าหมาย" width="616"/>

หากต้องการนับการคลิกข้อเสนอแทนคำสั่งซื้อ ให้เลือก `PW_WebPlacementClick`

## 5. เปิดใช้และตรวจสอบผลลัพธ์

1. คลิก **Launch campaign**
2. ในสถิติของ Journey ให้ตรวจสอบองค์ประกอบ **Web Placement**: **Shown** คือจำนวนครั้งที่ข้อเสนอแสดง **Interactions** คือจำนวนครั้งที่ข้อเสนอถูกคลิก ดู [สถิติของ Placement](/th/product/customer-journey/journey-elements/channels/web-placement/#placement-statistics)