วิธีที่ VWO สร้างประสบการณ์ผู้เข้าชมที่ปราศจากการเสียดสีเมื่อทำการทดลองในแอปพลิเคชันหน้าเดียว (SPA)

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

เว็บไซต์จำนวนมากสร้างขึ้นเป็น Single Page Applications (SPA) เนื่องจากมีข้อได้เปรียบที่สำคัญบางประการเหนือเว็บไซต์สแตติกแบบเดิม: เว็บไซต์ไดนามิกมีความรวดเร็ว กะทัดรัด และตอบสนอง เว็บไซต์ดังกล่าวทำให้คุณสามารถเพิ่มประสิทธิภาพเนื้อหาที่ผู้ใช้ของคุณเห็นเพื่อสร้างประสบการณ์ที่น่าดึงดูดและไม่เหมือนใคร หากคุณได้ยินจากทีมพัฒนาของคุณว่าเว็บไซต์ของคุณสร้างขึ้นโดยใช้ React, Vue, AngularJS, Ember หรือ Backbone แสดงว่าคุณกำลังทำงานกับ SPA และบทความนี้เกี่ยวข้องกับคุณ

ในบทความนี้ เราพูดถึงวิธีที่ VWO ทำการทดลองบนเว็บไซต์แบบไดนามิกอย่างมีประสิทธิภาพและง่ายดายด้วยการสนับสนุนการทดสอบ SPA ในตัว เพื่อให้คุณมุ่งเน้นเฉพาะความพยายามในการเพิ่มประสิทธิภาพประสบการณ์เว็บไซต์ของคุณเท่านั้น

แต่ก่อนอื่น มาพูดถึงปัญหาที่นำคุณมาที่นี่ก่อน

ความท้าทายของการทำการทดลองบนเว็บไซต์แบบไดนามิก

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

ประการแรก มาทำความเข้าใจว่า SPA นั้นแตกต่างจากเว็บไซต์ทั่วไป หน้าเว็บทั้งหมดโหลดขึ้นทุกครั้งที่มีผู้เยี่ยมชมเว็บไซต์ทั่วไป อย่างไรก็ตาม ใน SPA จะมีการอัปเดตเฉพาะบางส่วนของหน้า นี่เป็นเพราะใน SPA ทรัพยากรต่างๆ เช่น HTML, CSS, Scripts เป็นต้น ซึ่งสร้างรูปลักษณ์ของหน้าเว็บของคุณ จะถูกโหลดเพียงครั้งเดียว

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

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

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

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

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

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

นี่เป็นเพียงรุ่นที่เรียบง่ายของสิ่งที่เกิดขึ้น หากคุณสนใจที่จะทำความเข้าใจในทางเทคนิคว่าเกิดอะไรขึ้นหลังหน้าจอ โปรดอ่านต่อไป มิฉะนั้น คุณสามารถข้ามไปยังส่วนถัดไปของบทความได้

เฟรมเวิร์กเว็บไซต์บางอย่าง เช่น GatsbyJS, Next.js, ReactJS เป็นต้น ใช้การเรนเดอร์ฝั่งเซิร์ฟเวอร์และจัดเก็บสแน็ปช็อตของหน้าเว็บเดิมของคุณตามที่ควรจะโหลด ดังนั้น เมื่อคุณแก้ไของค์ประกอบบนหน้าเพื่อวัตถุประสงค์ในการทดสอบ เฟรมเวิร์กจะตรวจพบการเปลี่ยนแปลงว่าเป็น 'ปัญหา' และเปลี่ยนหน้ากลับเป็นสถานะเดิมตามที่ปรากฏในสแน็ปช็อตที่เก็บไว้ ซึ่งจะเป็นอุปสรรคต่อการทดสอบ A/B ของคุณ

ประการที่สอง เฟรมเวิร์กล่าสุดเช่น React, Gatsby, Next.js, Vue.js, Angular เป็นต้น ใช้แนวคิดของการเรนเดอร์ตามสถานะ ตัวอย่างเช่น ใน React เมื่อใดก็ตามที่มีการเปลี่ยนแปลงเกิดขึ้นในสถานะใดสถานะหนึ่งอันเนื่องมาจากรูปแบบการทดสอบ A/B อินเทอร์เฟซของเว็บไซต์จะรีโหลดตัวเองไปยังรูปแบบเดิมโดยอัตโนมัติ ดังนั้นผู้ใช้จะไม่เห็นรูปแบบดังกล่าว สิ่งนี้สร้างประสบการณ์ที่เหมาะสมรองลงมาสำหรับผู้เยี่ยมชมเว็บไซต์

VWO ทำให้การทดลองใช้งาน Single Page Applications ง่ายขึ้นได้อย่างไร

เมื่อเราพูดถึงปัญหาแล้ว เรามาพูดถึงวิธีแก้ปัญหากัน การสนับสนุน Native SPA ขั้นสูงของ VWO ใน Visual Editor ซึ่งเป็นส่วนหนึ่งของการทดสอบ VWO ช่วยให้มั่นใจว่าการแก้ไขที่ทำในการทดสอบจะนำไปใช้ใน SPA เพื่อให้แน่ใจว่าแคมเปญจะเชื่อถือได้และมอบประสบการณ์ที่ราบรื่นให้กับผู้เยี่ยมชมของคุณ

1. การทดสอบองค์ประกอบแบบไดนามิกบนเว็บไซต์ของคุณ

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

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

VWO มั่นใจได้อย่างไรว่าการเปลี่ยนแปลงถูกนำไปใช้อย่างถูกต้อง?

ง่าย.

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

มาดูเทคนิคเล็กน้อยและสำรวจเพิ่มเติมกัน คุณสามารถข้ามสิ่งนี้และไปยังจุดถัดไปได้อย่างสะดวกสบายหากรายละเอียดทางเทคนิคไม่เหมาะกับคุณ

ในเว็บไซต์แบบไดนามิก ตามพฤติกรรมของผู้ใช้ องค์ประกอบจะถูกเพิ่ม ลบ หรือแก้ไข แผนผัง DOM เป็นเหมือนที่เก็บส่วนประกอบเว็บไซต์ทั้งหมด (ปุ่ม แบนเนอร์ ป๊อปอัป วิดเจ็ต ฯลฯ) และเก็บสแนปชอตของสถานะปัจจุบันของเว็บไซต์

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

VWO จัดการการเปลี่ยนแปลงที่ถูกขัดขวางโดยการแสดงผลเฟรมเวิร์ก อย่างไร

VWO จะซ่อนปุ่ม CTA ไว้จนกว่าการเรนเดอร์เฟรมเวิร์กจะเสร็จสมบูรณ์ VWO ตรวจสอบซ้ำ ๆ ว่าการเรนเดอร์เสร็จสิ้นหรือไม่ เมื่อการแสดงผลเฟรมเวิร์กเสร็จสิ้น แคมเปญ VWO จะเริ่มดำเนินการ

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับการตั้งค่าเหล่านี้ได้ในบทความฐานความรู้ของเรา

2. การทดสอบองค์ประกอบของหน้าอื่น ๆ ในเว็บไซต์ของคุณ

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

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

ลองดูตัวอย่างกรณีการใช้งานของการเปลี่ยนแปลงที่ VWO Visual Editor จัดการ

1. สมมติว่าคุณได้ลบปุ่ม CTA สำรอง (พูดว่า “เพิ่มในรายการสิ่งที่อยากได้”) จากเว็บไซต์อีคอมเมิร์ซของคุณเพื่อทดสอบว่าการเปลี่ยนแปลงนี้ส่งผลต่อจำนวนการคลิกบน CTA หลักหรือไม่ (พูดว่า “หยิบใส่ตะกร้า”) นี่เป็นกรณีทดสอบการใช้งานที่คุณลบองค์ประกอบบนเว็บไซต์ แม้ว่าคุณจะลบปุ่มแล้ว ปุ่มนั้นยังคงอยู่ใน DOM เสมือนที่สร้างโดยเฟรมเวิร์กอย่าง React และจะแสดงข้อผิดพลาดเมื่อเว็บไซต์โหลดขึ้น

2. ตอนนี้ ลองนึกภาพว่าเว็บไซต์อีคอมเมิร์ซของคุณมีขั้นตอนการลงทะเบียนที่แสดงช่องป้อนข้อความเพื่อบันทึกที่อยู่อีเมลของผู้เข้าชม นอกเหนือจากปุ่ม 'ส่งทันที' เมื่อคุณเปลี่ยนแปลงรูปลักษณ์ของกล่องป้อนข้อความ ส่วนประกอบที่มีสไตล์ของเว็บไซต์ที่เกี่ยวข้องจะเปลี่ยนไป Visual Editor ของ VWO ช่วยให้มั่นใจว่าการเปลี่ยนแปลงที่ใช้ล่าสุดคือสิ่งที่ผู้ใช้เห็น ดูวิธีที่คุณสามารถเปลี่ยนแปลงฟิลด์แบบฟอร์มใน SPA และตรวจสอบให้แน่ใจว่าผู้เข้าชมที่สุ่มตัวอย่างสำหรับรูปแบบนั้นเห็นการเปลี่ยนแปลงเหล่านั้นแทนที่จะเห็นการควบคุม

วิธีการใช้ VWO สำหรับแอปพลิเคชันหน้าเดียวของคุณ?

ในการใช้ VWO สำหรับ SPA ของคุณ คุณเพียงแค่เพิ่ม VWO SmartCode ในส่วนหัวของเว็บไซต์ของคุณ และเพลิดเพลินไปกับการสนับสนุนเริ่มต้นสำหรับเว็บไซต์ SPA

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