การติดตั้ง Progressive Web App (PWA) จะช่วยให้ผู้ใช้ค้นหาและใช้แอปได้ง่ายขึ้น แม้จะมีการโปรโมตในเบราว์เซอร์ แต่ผู้ใช้บางรายอาจไม่ทราบว่าสามารถติดตั้ง PWA ได้ ดังนั้นการมอบประสบการณ์การใช้งานในแอปที่คุณสามารถใช้โปรโมตและเปิดใช้การติดตั้ง PWA จึงมีประโยชน์

บทความนี้ไม่ได้ครอบคลุมทุกแง่มุม แต่ถือเป็นจุดเริ่มต้นสำหรับวิธีต่างๆ ในการโปรโมตการติดตั้ง PWA ไม่ว่าคุณจะใช้รูปแบบใด หรือรูปแบบใด รูปแบบทั้งหมดจะนำไปสู่โค้ดเดียวกันที่เรียกใช้ขั้นตอนการติดตั้ง ซึ่งระบุไว้ในวิธีมอบประสบการณ์การติดตั้งในแอปของคุณเอง
แนวทางปฏิบัติแนะนำ
แนวทางปฏิบัติแนะนำบางประการใช้ได้กับรูปแบบการโปรโมตใดก็ตามที่คุณใช้ในเว็บไซต์
- แสดงโปรโมชันนอกเส้นทางของเส้นทางของผู้ใช้ เช่น ในหน้าเข้าสู่ระบบ PWA ให้ใส่คำกระตุ้นให้ดำเนินการใต้แบบฟอร์มการเข้าสู่ระบบและปุ่มส่ง การใช้รูปแบบการโปรโมตที่รบกวนจะลดความสามารถในการใช้งาน PWA และส่งผลเสียต่อเมตริกการมีส่วนร่วม
- ระบุความสามารถในการปิดหรือปฏิเสธโปรโมชัน โปรดจดจำค่ากําหนดของผู้ใช้หากผู้ใช้ดำเนินการดังกล่าว และแสดงข้อความแจ้งอีกครั้งเฉพาะในกรณีที่มีการเปลี่ยนแปลงความสัมพันธ์ของผู้ใช้กับเนื้อหา เช่น ผู้ใช้ลงชื่อเข้าใช้หรือทำการซื้อ
- ใช้เทคนิคต่างๆ ในส่วนต่างๆ ของ PWA แต่ระวังอย่าทำให้ผู้ใช้รู้สึกไม่สบายใจหรือรำคาญกับโปรโมชันการติดตั้ง
- แสดงโปรโมชันเฉพาะหลังจากเหตุการณ์
beforeinstallprompt
เริ่มต้น
การโปรโมตเบราว์เซอร์อัตโนมัติ
เมื่อเป็นไปตามเกณฑ์บางอย่าง เบราว์เซอร์ส่วนใหญ่จะแสดงให้ผู้ใช้ทราบว่าติดตั้ง Progressive Web App ของคุณได้ เช่น Chrome บนเดสก์ท็อปจะแสดงปุ่มติดตั้งในแถบอเนกประสงค์


Chrome สําหรับ Android จะแสดงแถบข้อมูลขนาดเล็กแก่ผู้ใช้ แต่คุณป้องกันการดำเนินการนี้ได้ด้วยการเรียกใช้ preventDefault()
ในเหตุการณ์ beforeinstallprompt
หากคุณไม่ได้เรียกใช้ preventDefault()
แบนเนอร์จะแสดงขึ้นเมื่อผู้ใช้เข้าชมเว็บไซต์เป็นครั้งแรกและเป็นไปตามเกณฑ์ความสามารถในการติดตั้งใน Android จากนั้นจะแสดงอีกครั้งหลังจากผ่านไปประมาณ 90 วัน
รูปแบบการโปรโมตในอินเทอร์เฟซผู้ใช้
รูปแบบการโปรโมตอินเทอร์เฟซผู้ใช้ใช้ได้กับ PWA เกือบทุกประเภทและจะปรากฏในตำแหน่งต่างๆ เช่น การนำทางเว็บไซต์และแบนเนอร์ เช่นเดียวกับรูปแบบการโปรโมตประเภทอื่นๆ สิ่งสำคัญคือต้องคำนึงถึงบริบทของผู้ใช้เพื่อลดการหยุดชะงักของเส้นทางของผู้ใช้
เว็บไซต์ที่พิจารณาอย่างรอบคอบว่าควรแสดง UI ของโปรโมชันเมื่อใดจะได้รับการติดตั้งมากขึ้นและหลีกเลี่ยงการแทรกแซงเส้นทางของผู้ใช้ที่ไม่สนใจการติดตั้ง
ปุ่มติดตั้งแบบง่าย
UX ที่ง่ายที่สุดคือใส่ปุ่ม "ติดตั้ง" หรือ "ดาวน์โหลดแอป" ในตำแหน่งที่เหมาะสมในเนื้อหาเว็บ ตรวจสอบว่าปุ่มไม่บดบังฟังก์ชันการทํางานสําคัญอื่นๆ และไม่ได้ขวางเส้นทางของผู้ใช้ผ่านแอปพลิเคชัน

ส่วนหัวแบบคงที่
นี่คือปุ่มติดตั้งที่เป็นส่วนหนึ่งของส่วนหัวของเว็บไซต์ เนื้อหาส่วนหัวอื่นๆ มักจะมีการแสดงแบรนด์ของเว็บไซต์ เช่น โลโก้และเมนูแฮมเบอร์เกอร์ ส่วนหัวอาจเป็น position:fixed
หรือไม่ก็ได้ โดยขึ้นอยู่กับฟังก์ชันการทำงานของเว็บไซต์และความต้องการของผู้ใช้

การใช้การโปรโมตการติดตั้ง PWA จากส่วนหัวของเว็บไซต์อย่างเหมาะสมเป็นวิธีที่ยอดเยี่ยมในการช่วยให้ลูกค้าผู้ภักดีที่สุดกลับมาใช้งานประสบการณ์ของคุณได้ง่ายขึ้น พิกเซลในส่วนหัวของ PWA มีคุณค่ามาก ดังนั้นโปรดตรวจสอบว่าคำกระตุ้นให้ดำเนินการ (Call-To-Action) ของการติดตั้งมีขนาดที่เหมาะสม มีความสำคัญมากกว่าเนื้อหาส่วนหัวอื่นๆ ที่เป็นไปได้ และไม่รบกวน

ตรวจสอบให้แน่ใจว่าคุณได้:
- ไม่แสดงปุ่มติดตั้ง เว้นแต่จะมีการเรียกใช้
beforeinstallprompt
- ประเมินมูลค่าของ Use Case ที่ติดตั้งแล้วสําหรับผู้ใช้ ลองใช้การกำหนดเป้าหมายแบบเลือกเฉพาะเพื่อแสดงโปรโมชันต่อผู้ใช้ที่มีแนวโน้มจะได้รับประโยชน์จากโปรโมชันเท่านั้น
- ใช้พื้นที่ส่วนหัวอันมีค่าอย่างมีประสิทธิภาพ พิจารณาว่ามีอะไรอีกบ้างที่เป็นประโยชน์ที่จะเสนอให้ผู้ใช้ในส่วนหัว และพิจารณาลําดับความสําคัญของโปรโมชันการติดตั้งเทียบกับตัวเลือกอื่นๆ
เมนูการนำทาง

เมนูการนำทางเป็นตําแหน่งที่ดีในการโปรโมตการติดตั้งแอป เนื่องจากผู้ใช้ที่เปิดเมนูแสดงถึงความสนใจในประสบการณ์การใช้งาน
ตรวจสอบให้แน่ใจว่าคุณได้:
- หลีกเลี่ยงการขัดจังหวะเนื้อหาการนําทางที่สําคัญ ใส่การโปรโมตการติดตั้ง PWA ไว้ใต้รายการอื่นๆ ในเมนู
- เสนอข้อมูลสั้นๆ ที่เกี่ยวข้องเกี่ยวกับเหตุผลที่ผู้ใช้จะได้รับประโยชน์จากการติดตั้ง PWA
หน้า Landing Page
หน้า Landing Page มีไว้เพื่อโปรโมตผลิตภัณฑ์และบริการของคุณ ดังนั้นหน้านี้เป็นพื้นที่ที่เหมาะสมในการโปรโมตข้อดีในการติดตั้ง PWA

ก่อนอื่น ให้อธิบายข้อเสนอแนะมูลค่าของเว็บไซต์ จากนั้นแจ้งให้ผู้เข้าชมทราบว่าจะได้รับอะไรบ้างจากการติดตั้ง
ตรวจสอบให้แน่ใจว่าคุณได้:
- ดึงดูดผู้เข้าชมด้วยฟีเจอร์ที่สําคัญที่สุด และเน้นคีย์เวิร์ดซึ่งอาจนําผู้เข้าชมมายังหน้า Landing Page
- ทําให้โปรโมชันการติดตั้งและคํากระตุ้นให้ดำเนินการ (Call-To-Action) ดึงดูดสายตา แต่ต้องหลังจากที่คุณอธิบายคุณค่าที่คุณนำเสนออย่างชัดเจนแล้วเท่านั้น ท้ายที่สุดแล้ว หน้า Landing Page ก็คือหน้า Landing Page
- ลองเพิ่มการโปรโมตเพื่อการติดตั้งในส่วนที่แอปของคุณมีผู้ใช้อยู่มากที่สุด
ติดตั้งแบนเนอร์
ผู้ใช้ส่วนใหญ่เคยเห็นแบนเนอร์การติดตั้งในประสบการณ์การใช้งานบนอุปกรณ์เคลื่อนที่และคุ้นเคยกับการโต้ตอบที่แบนเนอร์นำเสนอ ควรใช้แบนเนอร์อย่างระมัดระวังเนื่องจากอาจรบกวนผู้ใช้

ตรวจสอบให้แน่ใจว่าคุณได้:
- รอจนกว่าผู้ใช้จะแสดงความสนใจในเว็บไซต์ของคุณก่อนที่จะแสดงแบนเนอร์ หากผู้ใช้ปิดแบนเนอร์ของคุณ อย่าแสดงแบนเนอร์นั้นอีก เว้นแต่ผู้ใช้จะเรียกเหตุการณ์ Conversion ที่บ่งบอกถึงการมีส่วนร่วมกับเนื้อหาในระดับที่สูงขึ้น เช่น การซื้อในเว็บไซต์อีคอมเมิร์ซหรือการลงชื่อสมัครใช้บัญชี
- อธิบายสั้นๆ ถึงประโยชน์ในการติดตั้ง PWA ในแบนเนอร์ ตัวอย่างเช่น คุณสามารถแยกความแตกต่างของการติดตั้ง PWA กับแอป iOS/Android ได้โดยระบุว่าแอปแทบไม่ใช้พื้นที่เก็บข้อมูลในอุปกรณ์ของผู้ใช้ หรือจะระบุว่าจะติดตั้งทันทีโดยไม่ต้องเปลี่ยนเส้นทางไปยัง Store ก็ได้
UI ชั่วคราว
UI ชั่วคราว เช่น รูปแบบการออกแบบ Snackbar จะแจ้งให้ผู้ใช้ทราบและช่วยให้ผู้ใช้ดำเนินการต่างๆ ได้อย่างง่ายดาย ซึ่งในกรณีนี้คือการติดตั้งแอป เมื่อใช้อย่างเหมาะสม รูปแบบ UI ประเภทเหล่านี้จะไม่ขัดจังหวะขั้นตอนของผู้ใช้ และมักจะปิดโดยอัตโนมัติหากผู้ใช้ไม่สนใจ

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

ตรวจสอบให้แน่ใจว่าคุณได้:
- แสดงแถบนําทาง 4-7 วินาทีเพื่อให้ผู้ใช้มีเวลาเพียงพอในการดูและโต้ตอบกับแถบนําทาง และไม่รบกวนการใช้งาน
- หลีกเลี่ยงการแสดงไอคอนเหนือ UI ชั่วคราวอื่นๆ เช่น แบนเนอร์ ฯลฯ
- รอจนกว่าคุณจะมีสัญญาณความสนใจที่ชัดเจนจากผู้ใช้ก่อนใช้รูปแบบนี้ เช่น การเข้าชมซ้ำ การลงชื่อเข้าใช้ของผู้ใช้ หรือเหตุการณ์ Conversion ที่คล้ายกัน
หลังจากแปลง
ทันทีหลังจากเหตุการณ์ Conversion ของผู้ใช้ เช่น หลังจากซื้อในเว็บไซต์อีคอมเมิร์ซ เป็นโอกาสที่ดีในการโปรโมตการติดตั้ง PWA ผู้ใช้มีส่วนร่วมกับเนื้อหาของคุณอย่างชัดเจน และ Conversion มักเป็นสัญญาณว่าผู้ใช้จะมีส่วนร่วมกับบริการของคุณอีกครั้ง

เส้นทางการจองหรือการชำระเงิน
แสดงโปรโมชันการติดตั้งระหว่างหรือหลังจากเส้นทางแบบตามลำดับ เช่น หลังจากขั้นตอนการจองหรือการชำระเงิน หากคุณแสดงโปรโมชันหลังจากที่ผู้ใช้ทําตามเส้นทางเสร็จแล้ว คุณมักจะทําให้โปรโมชันโดดเด่นขึ้นได้เนื่องจากเส้นทางเสร็จสมบูรณ์แล้ว

ตรวจสอบให้แน่ใจว่าคุณได้:
- ใส่คำกระตุ้นให้ดำเนินการ (Call-To-Action) ที่เกี่ยวข้อง ผู้ใช้กลุ่มใดบ้างที่จะได้รับประโยชน์จากการติดตั้งแอปของคุณ และเพราะเหตุใด เนื้อหามีความเกี่ยวข้องกับเส้นทางที่ผู้ใช้กําลังอยู่อย่างไร
- หากแบรนด์มีข้อเสนอเฉพาะสำหรับผู้ใช้แอปที่ติดตั้งไว้ ให้พูดถึงข้อเสนอดังกล่าว
- หลีกเลี่ยงการแสดงโปรโมชันในขั้นตอนถัดไปในเส้นทางของคุณ ไม่เช่นนั้นอาจส่งผลเสียต่ออัตราการทำตามเส้นทางจนเสร็จสมบูรณ์ ในตัวอย่างอีคอมเมิร์ซด้านบน โปรดสังเกตว่าคํากระตุ้นให้ดำเนินการ (Call-To-Action) หลักสําหรับการชำระเงินอยู่เหนือโปรโมชันการติดตั้งแอป
ขั้นตอนการลงชื่อสมัครใช้ ลงชื่อเข้าใช้ หรือออกจากระบบ
โปรโมชันนี้เป็นกรณีพิเศษของรูปแบบการโปรโมตเส้นทางที่การ์ดโปรโมชันจะโดดเด่นกว่า

โดยทั่วไปแล้ว หน้าเหล่านี้จะแสดงต่อผู้ใช้ที่มีส่วนร่วมเท่านั้น ซึ่งมีการระบุข้อเสนอมูลค่าของ PWA ไว้แล้ว นอกจากนี้ มักจะมีเนื้อหาอื่นๆ ที่เป็นประโยชน์ไม่มากนักที่จะวางไว้ในหน้าเหล่านี้ ด้วยเหตุนี้ การทำคำกระตุ้นให้ดำเนินการ (Call-To-Action) ให้มีขนาดใหญ่ขึ้นจึงรบกวนผู้ชมน้อยลง ตราบใดที่คำกระตุ้นให้ดำเนินการดังกล่าวไม่บดบังเนื้อหา
ตรวจสอบให้แน่ใจว่าคุณได้:
- หลีกเลี่ยงการขัดจังหวะเส้นทางของผู้ใช้ในแบบฟอร์มลงชื่อสมัครใช้ หากเป็นกระบวนการแบบหลายขั้นตอน คุณอาจต้องรอจนกว่าผู้ใช้จะทําตามเส้นทางจนเสร็จสมบูรณ์
- โปรโมตฟีเจอร์ที่มีความเกี่ยวข้องมากที่สุดกับผู้ใช้ที่ลงชื่อสมัครใช้
- ลองเพิ่มโปรโมชันการติดตั้งเพิ่มเติมในพื้นที่ที่ลงชื่อเข้าใช้ของแอป
รูปแบบโปรโมชันในบรรทัด
เทคนิคการโปรโมตในบรรทัดจะแทรกการโปรโมตไว้ในเนื้อหาของเว็บไซต์ ซึ่งมักจะสังเกตได้ยากกว่าการโปรโมตในอินเทอร์เฟซผู้ใช้ ซึ่งมีข้อดีข้อเสียต่างกัน คุณต้องการให้โปรโมชันโดดเด่นพอที่ผู้ใช้ที่สนใจจะสังเกตเห็น แต่ก็ไม่โดดเด่นจนทำให้คุณภาพของประสบการณ์ของผู้ใช้ลดลง
ในฟีด
โปรโมชันการติดตั้งในฟีดจะปรากฏระหว่างบทความข่าวหรือรายการการ์ดข้อมูลอื่นๆ ใน PWA

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