การติดตั้ง Progressive Web App (PWA) จะช่วยให้ผู้ใช้ค้นหาและใช้งานได้ง่ายขึ้น แม้จะมีการโปรโมตเบราว์เซอร์ ผู้ใช้บางคนก็ไม่รู้ตัวว่าสามารถติดตั้ง PWA ได้ ดังนั้นการมอบประสบการณ์ในแอปที่คุณใช้โปรโมตและเปิดใช้การติดตั้ง PWA จึงอาจมีประโยชน์
![ภาพหน้าจอของปุ่มติดตั้งแบบง่ายใน PWA](https://web.dev/static/articles/promote-install/image/screenshot-simple-instal-3b0b6b042e079.png?authuser=6&hl=th)
บทความนี้ไม่ได้ครอบคลุมทั้งหมด แต่ก็เป็นจุดเริ่มต้นสำหรับวิธีต่างๆ ในการโปรโมตการติดตั้ง PWA ไม่ว่าคุณจะใช้รูปแบบใดหรือรูปแบบใด ทั้งหมดนี้จะนำไปยังโค้ดเดียวกันที่เรียกใช้ขั้นตอนการติดตั้ง ซึ่งระบุอยู่ใน วิธีมอบประสบการณ์การติดตั้งแอปของคุณเอง
แนวทางปฏิบัติแนะนำ
ไม่ว่าคุณจะใช้โปรโมชันรูปแบบใดในเว็บไซต์ก็ตาม มีแนวทางปฏิบัติแนะนำบางประการที่สามารถนำไปใช้ได้
- ทำให้โปรโมชันไม่ต้องดำเนินไปตามขั้นตอนในเส้นทางของผู้ใช้ เช่น ในหน้าเข้าสู่ระบบของ PWA ให้ใส่คำกระตุ้นให้ดำเนินการใต้แบบฟอร์มเข้าสู่ระบบและปุ่มส่ง การใช้รูปแบบการโปรโมตที่รบกวนจะลดความสามารถในการใช้งาน PWA และส่งผลเสียต่อเมตริกการมีส่วนร่วม
- รวมถึงความสามารถในการปิดหรือปฏิเสธโปรโมชัน อย่าลืมคำนึงถึงค่ากำหนดของผู้ใช้หากผู้ใช้ดำเนินการนี้ และแจ้งเตือนอีกครั้งเฉพาะเมื่อความสัมพันธ์ของผู้ใช้กับเนื้อหาของคุณเปลี่ยนแปลงไป เช่น ลงชื่อเข้าใช้หรือทำการซื้อ
- รวมเทคนิคในส่วนต่างๆ ของ PWA แต่โปรดระวังอย่าให้มีการโปรโมตการติดตั้งมากเกินไปหรือสร้างความรำคาญแก่ผู้ใช้
- แสดงโปรโมชันหลังจากที่กิจกรรม
beforeinstallprompt
เริ่มทำงานแล้วเท่านั้น
การโปรโมตเบราว์เซอร์อัตโนมัติ
เมื่อเป็นไปตามเกณฑ์บางอย่าง เบราว์เซอร์ส่วนใหญ่จะแจ้งให้ผู้ใช้ทราบว่า Progressive Web App ของคุณติดตั้งได้ ตัวอย่างเช่น Chrome บนเดสก์ท็อปจะแสดงปุ่มติดตั้งในแถบอเนกประสงค์
![ภาพหน้าจอของแถบอเนกประสงค์ที่มีสัญญาณบอกสถานะการติดตั้งที่มองเห็นได้](https://web.dev/static/articles/promote-install/image/screenshot-omnibox-a-vi-4d92411b4427d.png?authuser=6&hl=th)
![ภาพหน้าจอของโปรโมชันการติดตั้งที่ได้จากเบราว์เซอร์](https://web.dev/static/articles/promote-install/image/screenshot-browser-provi-bd3e42c38ef14.png?authuser=6&hl=th)
Chrome สำหรับ Android จะแสดงแถบข้อมูลขนาดเล็กให้ผู้ใช้เห็น แต่ป้องกันได้ด้วยการเรียกใช้ preventDefault()
ในเหตุการณ์ beforeinstallprompt
หากคุณไม่ได้เรียกใช้ preventDefault()
แบนเนอร์จะปรากฏขึ้นในครั้งแรกที่ผู้ใช้เข้าชมเว็บไซต์และตรงตามเกณฑ์ความสามารถในการติดตั้งใน Android และจะแสดงอีกครั้งหลังจากผ่านไปประมาณ 90 วัน
รูปแบบการโปรโมตอินเทอร์เฟซผู้ใช้
รูปแบบการโปรโมตอินเทอร์เฟซผู้ใช้ใช้ได้กับ PWA เกือบทุกประเภทและปรากฏในที่ต่างๆ เช่น การนําทางในเว็บไซต์และแบนเนอร์ เช่นเดียวกับรูปแบบการโปรโมตประเภทอื่นๆ สิ่งสำคัญคือการตระหนักถึงบริบทของผู้ใช้เพื่อลดการหยุดชะงักในเส้นทางของผู้ใช้
เว็บไซต์ที่ไตร่ตรองเรื่องเวลาที่เรียกใช้ UI โปรโมชันจะมีการติดตั้งมากขึ้นและหลีกเลี่ยงการแทรกแซงเส้นทางของผู้ใช้ที่ไม่สนใจการติดตั้ง
ปุ่มติดตั้งแบบใช้งานง่าย
UX ที่ง่ายที่สุดคือการใส่ปุ่ม "ติดตั้ง" หรือ "รับแอป" ในตำแหน่งที่เหมาะสมในเนื้อหาเว็บ ตรวจสอบว่าปุ่มไม่บล็อกฟังก์ชันที่สำคัญอื่นๆ และกีดขวางเส้นทางของผู้ใช้ผ่านแอปพลิเคชันของคุณ
![ปุ่มติดตั้งแบบกำหนดเอง](https://web.dev/static/articles/promote-install/image/custom-install-button-c31a48092e91c.png?authuser=6&hl=th)
ส่วนหัวแบบคงที่
นี่คือปุ่มติดตั้งที่เป็นส่วนหนึ่งของส่วนหัวของเว็บไซต์ เนื้อหาส่วนหัวอื่นๆ มักรวมถึงการแสดงแบรนด์ของเว็บไซต์ เช่น โลโก้และเมนูแฮมเบอร์เกอร์ ส่วนหัวอาจเป็น position:fixed
หรือไม่ก็ได้ ทั้งนี้ขึ้นอยู่กับฟังก์ชันการทำงานของเว็บไซต์และความต้องการของผู้ใช้
![ปุ่มติดตั้งแบบกำหนดเองในส่วนหัว](https://web.dev/static/articles/promote-install/image/custom-install-button-he-ae67d1ee86ff3.png?authuser=6&hl=th)
เมื่อใช้อย่างเหมาะสม การโปรโมตการติดตั้ง PWA จากส่วนหัวของเว็บไซต์เป็นวิธีที่ยอดเยี่ยมในการทำให้ลูกค้าที่เหนียวแน่นที่สุดกลับมาใช้บริการอีกครั้งได้ง่ายขึ้น พิกเซลในส่วนหัว PWA นั้นมีค่า ดังนั้นให้ตรวจสอบว่าคำกระตุ้นให้ดำเนินการ (Call-To-Action) ในการติดตั้งมีขนาดที่เหมาะสม และมีความสำคัญมากกว่าเนื้อหาส่วนหัวอื่นๆ ที่เป็นไปได้และไม่รบกวนการใช้งาน
![ปุ่มติดตั้งที่กำหนดเองในส่วนหัว](https://web.dev/static/articles/promote-install/image/custom-install-button-he-37ffcc16ba69b.png?authuser=6&hl=th)
ตรวจสอบให้แน่ใจว่าคุณได้:
- ไม่แสดงปุ่มติดตั้งเว้นแต่
beforeinstallprompt
จะเริ่มทำงานแล้ว - ประเมินคุณค่าของ Use Case ที่ติดตั้งไว้สำหรับผู้ใช้ ลองใช้การกำหนดเป้าหมายแบบคัดสรรเพื่อนำเสนอการโปรโมตต่อผู้ใช้ที่มีแนวโน้มว่าจะได้รับประโยชน์เท่านั้น
- ใช้พื้นที่ส่วนหัวที่มีค่าได้อย่างมีประสิทธิภาพ ลองพิจารณาดูว่าจะเป็นประโยชน์อะไรอีกบ้างในการนำเสนอให้ผู้ใช้ในส่วนหัว และให้น้ำหนักลำดับความสำคัญของโปรโมชันการติดตั้งที่สัมพันธ์กับตัวเลือกอื่นๆ
เมนูการนำทาง
![ปุ่มติดตั้งที่กำหนดเองในเมนูนำทาง](https://web.dev/static/articles/promote-install/image/custom-install-button-na-58019edc6068c.png?authuser=6&hl=th)
เมนูการนำทางเป็นส่วนที่ดีในการโปรโมตการติดตั้งแอป เนื่องจากผู้ใช้ที่เปิดเมนูจะส่งสัญญาณการมีส่วนร่วมในประสบการณ์การใช้งานของคุณ
ตรวจสอบให้แน่ใจว่าคุณได้:
- หลีกเลี่ยงการรบกวนเนื้อหาการนำทางที่สำคัญ ใส่โปรโมชันการติดตั้ง PWA ใต้รายการในเมนูอื่นๆ
- นำเสนอการเสนอขายสั้นๆ ที่เกี่ยวข้องว่าเหตุใดผู้ใช้จะได้รับประโยชน์จากการติดตั้ง PWA
หน้า Landing Page
หน้า Landing Page มีจุดประสงค์เพื่อโปรโมตผลิตภัณฑ์และบริการของคุณ ดังนั้นจึงเป็นที่หนึ่งที่มีความเหมาะสมในขนาดใหญ่เมื่อโปรโมตข้อดีของการติดตั้ง PWA
![ข้อความแจ้งให้ติดตั้งแบบกำหนดเองในหน้า Landing Page](https://web.dev/static/articles/promote-install/image/custom-install-prompt-a-5843b12d5bc42.png?authuser=6&hl=th)
ขั้นแรก อธิบายคุณค่าที่นำเสนอของเว็บไซต์ แล้วบอกให้ผู้เข้าชมรู้ว่าจะได้อะไรจากการติดตั้ง
ตรวจสอบให้แน่ใจว่าคุณได้:
- สร้างความน่าสนใจให้กับฟีเจอร์ที่สำคัญต่อผู้เข้าชมมากที่สุด และเน้นคีย์เวิร์ดที่อาจนำพวกเขาไปยังหน้า Landing Page ของคุณ
- ทำให้การโปรโมตการติดตั้งและคำกระตุ้นการตัดสินใจของคุณดึงดูดสายตา แต่ต้องหลังจากที่แสดงคุณค่าที่นำเสนออย่างชัดเจนแล้ว เพราะนี่คือหน้า Landing Page ของคุณนั่นเอง
- ลองเพิ่มโปรโมชันการติดตั้งลงในแอปที่ผู้ใช้ใช้เวลามากที่สุด
ติดตั้งแบนเนอร์
ผู้ใช้ส่วนใหญ่เคยเจอแบนเนอร์การติดตั้งในประสบการณ์ใช้งานบนอุปกรณ์เคลื่อนที่ และคุ้นเคยกับการโต้ตอบที่นำเสนอโดยแบนเนอร์ ควรใช้แบนเนอร์อย่างระมัดระวัง เนื่องจากอาจรบกวนผู้ใช้
![แบนเนอร์การติดตั้งแบบกำหนดเองที่ด้านบนของหน้า](https://web.dev/static/articles/promote-install/image/custom-install-banner-to-3aa411a9214c1.png?authuser=6&hl=th)
ตรวจสอบให้แน่ใจว่าคุณได้:
- รอจนกว่าผู้ใช้แสดงความสนใจในเว็บไซต์ก่อนที่จะแสดงแบนเนอร์ หากผู้ใช้ปิดแบนเนอร์ของคุณ โปรดอย่าแสดงแบนเนอร์ดังกล่าวอีก เว้นแต่ผู้ใช้ได้ทริกเกอร์เหตุการณ์ Conversion ที่บ่งชี้ว่ามีส่วนร่วมกับเนื้อหาในระดับที่สูงกว่า เช่น การซื้อบนเว็บไซต์อีคอมเมิร์ซหรือการลงชื่อสมัครใช้บัญชี
- ระบุคำอธิบายสั้นๆ เกี่ยวกับคุณค่าของการติดตั้ง PWA ในแบนเนอร์ เช่น คุณแยกความแตกต่างระหว่างการติดตั้ง PWA กับแอป iOS/Android ได้ โดยอธิบายว่าแอปใช้พื้นที่เก็บข้อมูลในอุปกรณ์ของผู้ใช้เกือบไม่ติดตั้งหรือติดตั้งทันทีโดยไม่มีการเปลี่ยนเส้นทางร้านค้า
UI ชั่วคราว
UI ชั่วคราว เช่น รูปแบบการออกแบบ Snackbar จะแจ้งให้ผู้ใช้ทราบ และช่วยให้ผู้ใช้ดำเนินการต่างๆ ได้อย่างง่ายดาย ซึ่งในกรณีนี้คือการติดตั้งแอป เมื่อใช้อย่างเหมาะสม รูปแบบ UI ประเภทนี้จะไม่รบกวนการไหลเวียนของผู้ใช้ และมักจะปิดโดยอัตโนมัติหากผู้ใช้เพิกเฉย
![แบนเนอร์การติดตั้งแบบกำหนดเองเป็นแถบแสดงข้อความ](https://web.dev/static/articles/promote-install/image/custom-install-banner-sn-fc0c5df5e9391.png?authuser=6&hl=th)
แสดงแถบแสดงข้อความหลังจากโต้ตอบกับแอป 2-3 ครั้ง หากแถบนี้ปรากฏขึ้นเมื่อหน้าเว็บโหลดขึ้นหรือไม่แสดงบริบท ผู้ชมอาจพลาดอะไรไปได้ง่าย หรือทำให้สติปัญญาเกินความจำเป็น ในกรณีนี้ ผู้ใช้จะปิดทุกอย่างที่เห็น อย่าลืมว่าผู้ใช้ใหม่ในเว็บไซต์อาจยังไม่พร้อมที่จะติดตั้ง PWA ดังนั้น คุณควรรอจนกว่าจะมีสัญญาณความสนใจที่ชัดเจนจากผู้ใช้ก่อนที่จะใช้รูปแบบนี้ เช่น การเข้าชมซ้ำ การลงชื่อเข้าใช้ของผู้ใช้ หรือเหตุการณ์ Conversion ที่คล้ายกัน
![แบนเนอร์การติดตั้งแบบกำหนดเองเป็นแถบแสดงข้อความ](https://web.dev/static/articles/promote-install/image/custom-install-banner-sn-b294fb32a9249.png?authuser=6&hl=th)
ตรวจสอบให้แน่ใจว่าคุณได้:
- แสดงแถบแสดงข้อความเป็นเวลา 4-7 วินาทีเพื่อให้ผู้ใช้มีเวลาเพียงพอในการดูและโต้ตอบกับแถบดังกล่าวโดยไม่ให้เกะกะ
- หลีกเลี่ยงการแสดงทับ UI ชั่วคราวอื่นๆ เช่น แบนเนอร์ ฯลฯ
- รอจนกว่าจะมีสัญญาณความสนใจที่ชัดเจนจากผู้ใช้ก่อนใช้รูปแบบนี้ เช่น การเข้าชมซ้ำ การลงชื่อเข้าใช้ของผู้ใช้ หรือเหตุการณ์ Conversion ที่คล้ายกัน
หลังการแปลง
ทันทีหลังจากเหตุการณ์ Conversion ของผู้ใช้ เช่น หลังจากการซื้อในเว็บไซต์อีคอมเมิร์ซ เป็นโอกาสที่ยอดเยี่ยมในการโปรโมตการติดตั้ง PWA ผู้ใช้มีส่วนร่วมกับเนื้อหาของคุณอย่างชัดเจน และ Conversion มักเป็นสัญญาณที่บ่งบอกว่าผู้ใช้จะมีส่วนร่วมกับบริการของคุณอีกครั้ง
![โปรโมชันการติดตั้งหลังจาก Conversion](https://web.dev/static/articles/promote-install/image/an-install-promotion-con-effd5a7b38e75.png?authuser=6&hl=th)
เส้นทางการจองหรือการชําระเงิน
แสดงโปรโมชันการติดตั้งระหว่างหรือหลังจากเส้นทางตามลำดับ เช่น หลังการจองหรือขั้นตอนการชำระเงิน หากแสดงโปรโมชันหลังจากที่ผู้ใช้ดำเนินการเสร็จแล้ว คุณมักจะทำให้การโปรโมตโดดเด่นขึ้นเนื่องจากเส้นทางเสร็จสมบูรณ์แล้ว
![โปรโมชันการติดตั้งหลังจากเส้นทางของผู้ใช้](https://web.dev/static/articles/promote-install/image/an-install-promotion-a-u-2e0b33d2ff618.png?authuser=6&hl=th)
ตรวจสอบให้แน่ใจว่าคุณได้:
- ใส่คำกระตุ้นให้ดำเนินการ (Call-To-Action) ที่เกี่ยวข้อง ผู้ใช้กลุ่มใดจะได้รับประโยชน์จาก การติดตั้งแอปของคุณ และเพราะเหตุใด และมีความเกี่ยวข้องกับเส้นทางที่พวกเขากำลังดำเนินอยู่อย่างไร
- หากแบรนด์ของคุณมีข้อเสนอที่ไม่ซ้ำกันสำหรับผู้ใช้แอปที่ติดตั้งไว้ ให้พูดถึงพวกเขา
- ป้องกันไม่ให้การโปรโมตเกิดขึ้นในขั้นตอนถัดไปในเส้นทาง ไม่เช่นนั้นอาจส่งผลเสียต่ออัตราความสำเร็จในเส้นทาง ในตัวอย่างอีคอมเมิร์ซด้านบน ให้สังเกตว่าคำกระตุ้นให้ดำเนินการ (Call-To-Action) ที่สำคัญอยู่สูงกว่าโปรโมชันการติดตั้งแอป
ขั้นตอนการลงชื่อสมัครใช้ ลงชื่อเข้าใช้ หรือออกจากระบบ
โปรโมชันนี้เป็นกรณีพิเศษของรูปแบบโปรโมชันเส้นทาง ซึ่งการ์ดโปรโมชันมีความโดดเด่นมากขึ้น
![ปุ่มติดตั้งที่กำหนดเองในหน้าลงชื่อสมัครใช้](https://web.dev/static/articles/promote-install/image/a-custom-install-button-401ffb4e23752.png?authuser=6&hl=th)
โดยทั่วไปแล้ว หน้าเหล่านี้มักจะดูโดยผู้ใช้ที่มีส่วนร่วมเท่านั้น ซึ่งมีการนำเสนอคุณค่าของ PWA อยู่แล้ว และมักจะมีเนื้อหาที่เป็นประโยชน์ ไม่มากนักที่จะวางในหน้าเหล่านี้ ดังนั้นการสร้างคำกระตุ้นให้ดำเนินการ ขนาดใหญ่ขึ้นจะไม่รบกวนการใช้งานมากนัก ตราบใดที่ไม่เป็นอุปสรรค
ตรวจสอบให้แน่ใจว่าคุณได้:
- พยายามอย่าขัดจังหวะเส้นทางของผู้ใช้ภายในแบบฟอร์มการลงชื่อสมัครใช้ หากเป็นกระบวนการที่มีหลายขั้นตอน คุณอาจต้องรอจนกว่าผู้ใช้จะเสร็จสิ้นกระบวนการ
- โปรโมตฟีเจอร์ที่มีความเกี่ยวข้องกับผู้ใช้ที่ลงชื่อสมัครใช้มากที่สุด
- พิจารณาเพิ่มโปรโมชันการติดตั้งเพิ่มเติมภายในพื้นที่ ที่ลงชื่อเข้าใช้ของแอป
รูปแบบโปรโมชันในบรรทัด
เทคนิคการโปรโมตแบบอินไลน์จะรวมโปรโมชันเข้ากับเนื้อหาเว็บไซต์ การดำเนินการนี้มักมีความละเอียดอ่อนกว่าการโปรโมตในอินเทอร์เฟซผู้ใช้ แต่ก็มีข้อเสีย คุณควรทำให้การโปรโมตโดดเด่นมากพอที่ผู้ใช้ที่สนใจจะสังเกตเห็น แต่ไม่มากจนเกินไปจนรบกวนคุณภาพประสบการณ์ของผู้ใช้
ในฟีด
โปรโมชันการติดตั้งในฟีดจะปรากฏขึ้นระหว่างบทความข่าวหรือรายการการ์ดข้อมูลอื่นๆ ใน PWA
![โปรโมชันการติดตั้งภายในฟีดเนื้อหา](https://web.dev/static/articles/promote-install/image/an-install-promotion-with-06735d525d2b5.png?authuser=6&hl=th)
เป้าหมายของคุณคือการแสดงให้ผู้ใช้เห็นถึงวิธีเข้าถึงเนื้อหาที่พวกเขาชื่นชอบอย่างสนุกสนานมากขึ้น เน้นโปรโมตฟีเจอร์และฟังก์ชันที่จะเป็นประโยชน์ต่อผู้ใช้
ตรวจสอบให้แน่ใจว่าคุณได้:
- จำกัดความถี่ของโปรโมชันเพื่อหลีกเลี่ยงการรบกวนผู้ใช้
- ให้ผู้ใช้สามารถปิดโปรโมชันได้
- จดจำตัวเลือกของผู้ใช้ที่ต้องการปิด