รูปแบบที่ส่งเสริมการติดตั้ง PWA

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

ภาพหน้าจอของปุ่มติดตั้งแบบง่ายใน PWA
ปุ่มติดตั้งง่ายๆ ที่มีให้ใน PWA

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

แนวทางปฏิบัติแนะนำ

มีแนวทางปฏิบัติแนะนำที่นำมาใช้ได้ไม่ว่าจะใช้รูปแบบการโปรโมตใดในเว็บไซต์

  • ทำให้โปรโมชันอยู่นอกเส้นทางของผู้ใช้ เช่น ใส่คำกระตุ้นให้ดำเนินการ (Call-To-Action) ด้านล่างแบบฟอร์มเข้าสู่ระบบและปุ่มส่งในหน้าเข้าสู่ระบบ 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 จะเริ่มทำงานแล้ว
  • ประเมินมูลค่าของกรณีการใช้งานที่มีการติดตั้งสำหรับผู้ใช้ พิจารณาการกำหนดเป้าหมายที่เลือกเพื่อนำเสนอโปรโมชันแก่ผู้ใช้ที่น่าจะได้รับประโยชน์จากโปรโมชันเท่านั้น
  • ใช้พื้นที่ส่วนหัวที่มีค่าอย่างมีประสิทธิภาพ ลองพิจารณาว่ามีอะไรอีกบ้างจะเป็นประโยชน์ในการนำเสนอผู้ใช้ในส่วนหัว และชั่งน้ำหนักลำดับความสำคัญของโปรโมชันการติดตั้งเมื่อเทียบกับตัวเลือกอื่นๆ
ปุ่มติดตั้งแบบกำหนดเองในเมนูการนำทาง
เพิ่มปุ่มติดตั้ง/โปรโมชันในเมนูการนำทางแบบเลื่อนออก

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

ตรวจสอบให้แน่ใจว่าคุณได้:

  • หลีกเลี่ยงการขัดขวางเนื้อหาสำคัญที่ใช้ไปยังส่วนต่างๆ ใส่โปรโมชันการติดตั้ง PWA ใต้รายการเมนูอื่นๆ
  • เสนอการเสนอขายสั้นๆ ที่มีความเกี่ยวข้องถึงเหตุผลที่ผู้ใช้จะได้รับประโยชน์จากการติดตั้ง PWA

หน้า Landing Page

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

ข้อความแจ้งให้ติดตั้งแบบกำหนดเองในหน้า Landing Page
ข้อความแจ้งให้ติดตั้งแบบกำหนดเองในหน้า Landing Page

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

ตรวจสอบให้แน่ใจว่าคุณได้:

  • ดึงดูดความสนใจจากฟีเจอร์ที่สำคัญต่อผู้เข้าชมมากที่สุด และเน้นคีย์เวิร์ดที่อาจนำพวกเขามายังหน้า Landing Page
  • ทำให้โปรโมชันการติดตั้งและคำกระตุ้นการตัดสินใจดึงดูดสายตา แต่หลังจากที่คุณแสดงคุณค่าที่นำเสนออย่างชัดเจนแล้วเท่านั้น เพราะนี่คือหน้า Landing Page ของคุณนั่นเอง
  • ลองเพิ่มโปรโมชันการติดตั้งในส่วนของแอปที่ผู้ใช้ใช้เวลาอยู่นานที่สุด

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

แบนเนอร์ที่กำหนดเองที่ติดตั้งที่ด้านบนของหน้า
แบนเนอร์แบบปิดได้ที่ด้านบนของหน้า

ตรวจสอบให้แน่ใจว่าคุณได้:

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

UI ชั่วคราว

UI ชั่วคราว เช่น รูปแบบการออกแบบของ Snackbar จะแจ้งให้ผู้ใช้ทราบ และช่วยให้ผู้ใช้ดำเนินการในแอปได้ง่ายๆ ในกรณีนี้ เมื่อใช้งานอย่างเหมาะสม รูปแบบ UI เหล่านี้จะไม่ขัดจังหวะการไหลเวียนของผู้ใช้ และโดยทั่วไปจะถูกปิดโดยอัตโนมัติหากผู้ใช้เพิกเฉย

ติดตั้งแบนเนอร์แบบกำหนดเองเป็นแถบแสดงข้อความ
แถบแสดงข้อความแบบปิดได้ระบุว่า PWA ติดตั้งได้

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

ติดตั้งแบนเนอร์แบบกำหนดเองเป็นแถบแสดงข้อความ
แถบแสดงข้อความแบบปิดได้ระบุว่า PWA ติดตั้งได้

ตรวจสอบให้แน่ใจว่าคุณได้:

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

หลังการแปลง

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

การติดตั้งโปรโมชันหลัง Conversion
โปรโมชันการติดตั้งหลังจากที่ผู้ใช้ทำการซื้อเสร็จสมบูรณ์

เส้นทางการจองหรือการชำระเงิน

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

โปรโมชันการติดตั้งหลังจากเส้นทางของผู้ใช้
โปรโมชันการติดตั้งหลังจากเส้นทางของผู้ใช้

ตรวจสอบให้แน่ใจว่าคุณได้:

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

ขั้นตอนการลงชื่อสมัครใช้ ลงชื่อเข้าใช้ หรือออกจากระบบ

โปรโมชันนี้เป็นกรณีพิเศษของรูปแบบโปรโมชันเส้นทางที่การ์ดโปรโมชันจะโดดเด่นกว่า

ปุ่มติดตั้งแบบกำหนดเองในหน้าลงชื่อสมัครใช้
ปุ่มติดตั้งแบบกำหนดเองในหน้าลงชื่อสมัครใช้

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

ตรวจสอบให้แน่ใจว่าคุณได้:

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

รูปแบบการโปรโมตแบบอินไลน์

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

ในฟีด

โปรโมชันการติดตั้งในฟีดจะปรากฏระหว่างบทความข่าวหรือการ์ดข้อมูลอื่นๆ ใน PWA

โปรโมชันการติดตั้งภายในฟีดเนื้อหา
โปรโมชันการติดตั้งภายในฟีดเนื้อหา

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

ตรวจสอบให้แน่ใจว่าคุณได้:

  • จำกัดความถี่ของโปรโมชันเพื่อไม่ให้ผู้ใช้น่ารำคาญ
  • ให้ผู้ใช้ปิดโปรโมชันได้
  • จดจำตัวเลือกของผู้ใช้ในการปิด