# สร้าง Cloud Page

ใช้คู่มือนี้เพื่อสร้างและเผยแพร่ Cloud Page

## ก่อนที่คุณจะเริ่ม

-   Cloud Pages สามารถใช้งานได้เมื่อมีการร้องขอ ติดต่อ [Pushwoosh Support](https://help.pushwoosh.com/hc/en-us/requests/new) เพื่อเปิดใช้งานสำหรับโปรเจกต์ของคุณ
-   ตัดสินใจว่าจะ redirect ผู้ใช้ไปที่ไหนหลังจากการกระทำหลักบนเพจ เช่น ไปยังหน้าขอบคุณ หน้าผลลัพธ์ หรือ URL อื่นๆ

## สร้างเพจ

1.  ไปที่ **Content** → **Cloud Pages**
2.  คลิก **Create cloud page**

<img src="/cloud-pages-create-and-publish-a-cloud-page-1.webp" alt="มุมมองรายการ Cloud Pages พร้อมปุ่ม Create cloud page และตัวเลือกเมนูการดำเนินการของเพจ"/>

3.  ป้อนชื่อเพจ
4.  เพิ่ม URL ใน **Redirect to (after form submit)** ฟิลด์นี้จำเป็นต้องกรอก ใช้เพื่อกำหนดว่าผู้ใช้จะไปที่ไหนหลังจากดำเนินการบนเพจเสร็จสิ้น เช่น ไปยังหน้าขอบคุณหรือหน้าแคมเปญอื่น

<img src="/cloud-pages-create-and-publish-a-cloud-page-2.webp" alt="ฟอร์มการตั้งค่า Cloud Page พร้อมฟิลด์ชื่อเพจและฟิลด์ URL Redirect to (after form submit)"/>

5.  ใน **On existing user** เลือกสิ่งที่จะเกิดขึ้นเมื่อผู้ติดต่อที่มีอยู่ส่งฟอร์มอีกครั้ง:
    -   **Update existing user** (ค่าเริ่มต้น): อัปเดตฟิลด์โปรไฟล์ผู้ติดต่อด้วยค่าที่ส่งมา
    -   **Skip existing user**: ลงทะเบียนอุปกรณ์ที่ผู้ใช้ส่งจาก แต่ไม่อัปเดตแท็กที่มีอยู่บนโปรไฟล์ผู้ติดต่อ
    -   **Error for existing user**: สำหรับการลงทะเบียนครั้งเดียว เช่น ข้อเสนอพิเศษหรือเว็บบินาร์ หากผู้ติดต่อมีอยู่แล้ว การส่งจะถูกปฏิเสธ โปรไฟล์จะไม่อัปเดต และผู้ใช้จะถูก redirect กลับไปที่ฟอร์มและเห็นข้อความแสดงข้อผิดพลาด

<img src="/cloud-pages-create-and-publish-a-cloud-page-10.webp" alt="แถบการตั้งค่า Cloud Page พร้อมเมนู On existing user ที่แสดงตัวเลือก Update existing user, Skip existing user และ Error for existing user"/>

## สร้างเนื้อหาเพจ

ขั้นตอนการทำงานแบบลากและวางคล้ายกับ [Drag & drop editor](/th/product/content/email-content/drag-and-drop-email-editor/)

1.  เปิดแผง **Content** ในเอดิเตอร์
2.  ลากบล็อกไปยัง canvas
3.  แก้ไขเนื้อหาของบล็อก
4.  ทำซ้ำสำหรับแต่ละบล็อกที่ต้องการ
5.  คลิก **Save cloud page**

<img src="/cloud-pages-create-and-publish-a-cloud-page-3.webp" alt="เอดิเตอร์ Cloud Page พร้อมแผงบล็อกเนื้อหาและเค้าโครงฟอร์มบน canvas"/>

### เพิ่มรูปภาพ

ในการเพิ่มรูปภาพ ให้ลากบล็อก **Image** ไปยัง canvas อัปโหลดไฟล์ เลือกรูปภาพสต็อก (**More Images** → **Stock Photos**) หรือวาง URL รูปภาพจาก [Media store](/th/product/content/media-store/) ของคุณ

## สร้างฟอร์มสำหรับลูกค้าเป้าหมายหรือฟอร์มการส่งข้อมูล

เพิ่มฟอร์มเพื่อรวบรวมรายละเอียดการติดต่อและค่าอื่นๆ ที่คุณต้องการสำหรับการแบ่งกลุ่ม
1.  เพิ่มบล็อก **Form**
2.  เพิ่มฟิลด์ที่คุณต้องการ สำหรับแต่ละฟิลด์ ให้ตั้งค่าประเภทฟิลด์และชื่อฟิลด์ จากนั้นเปิดใช้งาน **Required Field** สำหรับค่าที่ผู้ใช้ต้องให้ก่อนส่ง

<img src="/cloud-pages-create-and-publish-a-cloud-page-9.webp" alt="การตั้งค่าฟอร์ม Cloud Page แสดงการเปิดใช้งานสวิตช์ required สำหรับหนึ่งในฟิลด์ฟอร์มในเอดิเตอร์"/>

3.  กำหนดค่า **Submit button**
4.  เมื่อทุกอย่างพร้อมแล้ว คลิก **Save cloud page**

<img src="/cloud-pages-create-and-publish-a-cloud-page-4.webp" alt="ตัวอย่างฟอร์ม Cloud Page พร้อมฟิลด์อีเมลและโทรศัพท์ที่กำหนดค่าในเอดิเตอร์"/>

### จะเกิดอะไรขึ้นหลังจากการส่งฟอร์ม

<Aside type="note">
ขั้นตอนด้านล่างอธิบายสิ่งที่เกิดขึ้นเมื่อผู้ติดต่อใหม่ส่งฟอร์ม สำหรับผู้ติดต่อที่มีอยู่ ผลลัพธ์จะขึ้นอยู่กับการตั้งค่าเพจ **On existing user**
</Aside>

##### โปรไฟล์ผู้ติดต่อและอุปกรณ์

เมื่อผู้ใช้ส่งฟอร์ม Pushwoosh จะสร้างหรืออัปเดตโปรไฟล์ผู้ติดต่อใน [User Explorer](/th/product/audience-data-and-segmentation/user-explorer/)

ตัวอย่างเช่น หากฟอร์มมีฟิลด์อีเมลและฟิลด์โทรศัพท์ Pushwoosh จะลงทะเบียนอุปกรณ์ Email หนึ่งเครื่องและอุปกรณ์ SMS หนึ่งเครื่อง อุปกรณ์ทั้งสองจะถูกเชื่อมโยงภายใต้ [User ID](/th/product/pushwoosh-knowledge-hub/users-userids/) เดียวกัน
<img src="/cloud-pages-create-and-publish-a-cloud-page-6.webp" alt="โปรไฟล์ผู้ติดต่อใน User Explorer แสดงอุปกรณ์ Email และ SMS ที่ลงทะเบียนหลังจากการส่งฟอร์ม"/>

##### แท็ก (Tags)

ฟิลด์อื่นๆ ทั้งหมดจะถูกบันทึกเป็นแท็กที่กำหนดเองตามชื่อฟิลด์ ตัวอย่างเช่น หากฟอร์มของคุณมีฟิลด์ `fitness_goal` และ `workout_frequency` โปรไฟล์ผู้ติดต่อจะแสดงแท็กเช่น `fitness_goal = Boost endurance` และ `workout_frequency = 3–4x a week`

รหัสเพจจะถูกบันทึกในแท็ก `PW_CloudPageCode`
<img src="/cloud-pages-create-and-publish-a-cloud-page-8.webp" alt="โปรไฟล์ผู้ติดต่อใน User Explorer แสดงแท็กที่กำหนดเองที่บันทึกหลังจากการส่งฟอร์ม"/>

##### Event

Pushwoosh จะส่ง `PW_FormSubmitted` ทุกครั้งที่มีการส่งฟอร์ม คุณสามารถดูได้ในแท็บ **Events History** บนโปรไฟล์ผู้ติดต่อใน [User Explorer](/th/product/audience-data-and-segmentation/user-explorer/) Event จะมีแอตทริบิวต์ `form_code` ที่ระบุว่าการส่งมาจาก Cloud Page ใด และการประทับเวลาที่เกิดขึ้น

<img src="/cloud-pages-create-and-publish-a-cloud-page-5.webp" alt="มุมมองผลลัพธ์การส่งฟอร์มแสดงการจับข้อมูลที่สำเร็จและขั้นตอนการ redirect หลังการส่ง"/>

ใช้เป็นทริกเกอร์ใน Customer Journey เพื่อเริ่มลำดับการต้อนรับ ขั้นตอนการติดตาม และระบบอัตโนมัติอื่นๆ
ตัวอย่างเช่น คุณสามารถสร้าง journey ที่ส่งอีเมลต้อนรับทันทีหลังจากผู้ใช้ส่งฟอร์มแบบทดสอบฟิตเนส จากนั้นติดตามด้วยแผนการออกกำลังกายส่วนบุคคลใน 24 ชั่วโมงต่อมา

## ทดสอบเพจ

หลังจากที่คุณบันทึกเพจแล้ว เพจจะสามารถเข้าถึงได้แบบสาธารณะผ่าน URL ของมัน รูปแบบเริ่มต้นคือ `https://cloud-pages.svc-nue.pushwoosh.com/cloud-pages/v1/page/<page-code>`
<Aside type="note">
หากคุณร้องขอการตั้งค่าโดเมนที่กำหนดเองผ่าน [Pushwoosh Support](https://help.pushwoosh.com/hc/en-us/requests/new) และการตั้งค่าเสร็จสมบูรณ์แล้ว มันจะใช้ URL โดเมนของคุณแทน: `https://domain.com/{slug}`
</Aside>

1.  ในรายการเพจ เปิดเมนูการดำเนินการของเพจและคลิก **Preview**
2.  ตรวจสอบว่าเนื้อหาของเพจโหลดอย่างถูกต้องและแสดงผลตามที่คาดไว้
3.  หากเพจของคุณมีฟอร์ม ให้กรอกฟอร์มด้วยข้อมูลทดสอบและคลิกปุ่มส่ง

<Aside type="note">
การส่งข้อมูลทดสอบจะสร้างโปรไฟล์ผู้ติดต่อจริงใน Pushwoosh
</Aside>
4.  ยืนยันว่าการ redirect เปิดหน้าเพจที่คาดไว้
5.  เปิด [User Explorer](/th/product/audience-data-and-segmentation/user-explorer/) และยืนยันว่าข้อมูลผู้ใช้และแท็กที่ส่งมาแสดงผล

## แก้ไขหรือลบเพจ

Cloud Pages ทั้งหมดจะแสดงรายการอยู่ใน **Content** → **Cloud Pages** ซึ่งคุณสามารถจัดการและแก้ไขได้

1.  ไปที่ **Content** → **Cloud Pages**
2.  เปิดเมนูการดำเนินการของเพจ
3.  คลิก **Edit** หรือ **Delete** เพจ

<img src="/cloud-pages-create-and-publish-a-cloud-page-7.webp" alt="รายการ Cloud Pages พร้อมตัวเลือกเมนูการดำเนินการของเพจสำหรับการแก้ไขและลบเพจ"/>