บันทึก เล่นซ้ำ และวัดความไหลลื่นของผู้ใช้

Jecelyn Yeen

Sofia Emelianova

สำรวจแผงโปรแกรมอัดเสียงใหม่ (ฟีเจอร์พรีวิว) ในวิดีโอด้านล่าง

ทำตามบทแนะนำนี้เพื่อดูวิธีใช้แผงโปรแกรมอัดเสียงเพื่อบันทึก เล่นซ้ำ และวัดการไหลเวียนของผู้ใช้

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

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

หมายเหตุ: ฟีเจอร์นี้พร้อมใช้งานใน Chrome เท่านั้น และใช้ใน Chromium ไม่ได้

เปิดแผงโปรแกรมอัดเสียง

1. เปิดเครื่องมือสำหรับนักพัฒนาเว็บ

2. คลิกตัวเลือกเพิ่มเติม     > เครื่องมือเพิ่มเติม > โปรแกรมอัดเสียง

   

   หรือใช้เมนูคำสั่งเพื่อเปิดแผงโปรแกรมอัดเสียง

   

เกริ่นนำ

เราจะใช้หน้าการสาธิตการสั่งกาแฟนี้ การชำระเงินเป็นขั้นตอนทั่วไปของผู้ใช้ในเว็บไซต์ช็อปปิ้ง

ในส่วนถัดไป เราจะแนะนำวิธีบันทึก เล่นซ้ำ และตรวจสอบขั้นตอนการชำระเงินต่อไปนี้ด้วยแผงโปรแกรมอัดเสียง

1. เพิ่มกาแฟลงในรถเข็น
2. เพิ่มกาแฟอื่นลงในรถเข็น
3. ไปที่หน้ารถเข็น
4. นำกาแฟ 1 ใบออกจากรถเข็น
5. เริ่มขั้นตอนการชำระเงิน
6. กรอกรายละเอียดการชำระเงิน
7. ชำระเงิน

บันทึกการไหลเวียนของผู้ใช้

1. เปิดหน้าสาธิตนี้ คลิกปุ่มเริ่มการบันทึกใหม่เพื่อเริ่มต้น
2. ป้อน "จุดชำระเงิน" ในกล่องข้อความชื่อการบันทึก
   หมายเหตุ: ช่องทำเครื่องหมายแอตทริบิวต์ตัวเลือกและประเภทตัวเลือกที่จะบันทึกเป็นช่องที่ไม่บังคับ สำหรับบทแนะนำนี้ ให้ปล่อยไว้ตามค่าเริ่มต้น ดูข้อมูลเพิ่มเติมได้ที่ทำความเข้าใจตัวเลือก
3. คลิกปุ่มเริ่มการบันทึกใหม่ เริ่มการบันทึกแล้ว แผงจะแสดงกำลังบันทึก... ซึ่งบ่งบอกว่ากำลังบันทึกอยู่
4. คลิกคาปูชิโนเพื่อเพิ่มลงในรถเข็น
5. คลิก Americano เพื่อเพิ่มลงในรถเข็น โปรดสังเกตว่าโปรแกรมอัดเสียงจะแสดงขั้นตอนที่คุณได้ทำไปแล้ว
6. ไปที่หน้ารถเข็นและนำ Americano ออกจากรถเข็น
   หมายเหตุ: หรือคุณจะนำ Americano ออกในหน้าเมนูก็ได้ โดยวางเมาส์เหนือปุ่มรวม แล้วคลิก - ข้าง Americano ในเมนูป๊อปอัป อย่างไรก็ตาม คุณจะต้องเพิ่มขั้นตอนการวางเมาส์ด้วยตนเองหลังจากบันทึกเสร็จแล้ว เนื่องจากโปรแกรมอัดเสียงจะไม่บันทึกเหตุการณ์ขณะวางเมาส์เหนือโดยอัตโนมัติ
7. คลิกปุ่มรวม: $19.00 เพื่อเริ่มกระบวนการชำระเงิน
8. ในแบบฟอร์มรายละเอียดการชำระเงิน ป้อนข้อความในช่องข้อความชื่อและอีเมล และเลือกช่องทำเครื่องหมายฉันต้องการรับข้อมูลอัปเดตเกี่ยวกับคำสั่งซื้อและข้อความส่งเสริมการขาย
9. คลิกปุ่มส่งเพื่อให้กระบวนการชำระเงินเสร็จสมบูรณ์
   หมายเหตุ: คุณจะแก้ไขขั้นตอนและเพิ่มการยืนยันด้วยตนเองได้ก่อนที่จะสิ้นสุดการบันทึก
10. ในแผงโปรแกรมอัดเสียง ให้คลิกปุ่มสิ้นสุดการบันทึก เพื่อสิ้นสุดการบันทึกเสียง

แสดงการไหลเวียนของผู้ใช้ซ้ำ

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

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

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

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

จำลองเครือข่ายที่ช้า

คุณสามารถจำลองการเชื่อมต่อเครือข่ายที่ช้าได้โดยกำหนดการตั้งค่าการเล่นซ้ำ ตัวอย่างเช่น ขยายการตั้งค่าการเล่นซ้ำ เลือก 3G ที่ช้าในเมนูแบบเลื่อนลงของเครือข่าย

อาจมีการรองรับการตั้งค่าเพิ่มเติมในอนาคต บอกให้เราทราบถึงการตั้งค่าการเล่นซ้ำที่คุณต้องการ

วัดการไหลเวียนของผู้ใช้

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

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

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

แก้ไขขั้นตอน

ลองมาดูตัวเลือกพื้นฐานในการแก้ไขขั้นตอนต่างๆ ภายในเวิร์กโฟลว์ที่บันทึกไว้กัน

ดูรายการตัวเลือกการแก้ไขทั้งหมดได้ที่แก้ไขขั้นตอนในข้อมูลอ้างอิงฟีเจอร์

ขยายขั้นตอน

ขยายแต่ละขั้นตอนเพื่อดูรายละเอียดของการดำเนินการ เช่น ขยายขั้นตอนองค์ประกอบการคลิก "คาปูชิโน"

ขั้นตอนข้างต้นจะแสดงตัวเลือก 2 รายการ ดูข้อมูลเพิ่มเติมได้ที่ทำความเข้าใจเกี่ยวกับตัวเลือกการบันทึก

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

เพิ่มและนำตัวเลือกออกจากขั้นตอน

คุณสามารถเพิ่มหรือนำตัวเลือกออกได้ เช่น คุณนำตัวเลือก 2 ออกได้เนื่องจากในกรณีนี้เพียง aria/Cappuccino ก็เพียงพอแล้ว วางเมาส์เหนือตัวเลือก #2 แล้วคลิก - เพื่อนําออก

แก้ไขตัวเลือกในขั้นตอน

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

1. แก้ไขค่าตัวเลือกเป็น aria/Mocha แทน

   

   หรือจะคลิกปุ่มเลือก แล้วคลิก Mocha ในหน้านั้นก็ได้

2. เล่นซ้ำโฟลว์ในตอนนี้ ซึ่งควรจะเลือก Mocha แทน Cappuccino

3. ลองแก้ไขพร็อพเพอร์ตี้ขั้นตอนอื่นๆ เช่น type, target, value และอื่นๆ

เพิ่มและนำขั้นตอนออก

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

1. คลิกขวาขั้นตอนที่คุณต้องการแก้ไข หรือคลิกไอคอน จุด 3 จุดด้านข้าง

   

2. คุณสามารถเลือกนำขั้นตอนออกเพื่อนำออกได้ ตัวอย่างเช่น คุณไม่จำเป็นต้องใช้เหตุการณ์ scroll หลังจากขั้นตอน Mocha

3. สมมติว่าคุณต้องการรอจนกว่ากาแฟ 9 ถ้วยจะแสดงผลในหน้าก่อนที่จะดำเนินการใดๆ ในเมนูขั้นตอน Mocha ให้เลือกเพิ่มขั้นตอนก่อน

4. ในองค์ประกอบยืนยัน ให้แก้ไขขั้นตอนใหม่พร้อมรายละเอียดต่อไปนี้

   • ประเภท: waitForElement
   • ตัวเลือก #1: .cup
   • โอเปอเรเตอร์: == (คลิกปุ่มเพิ่มโอเปอเรเตอร์)
   • จำนวน: 9 (คลิกปุ่มเพิ่มจำนวน)

5. เล่นซ้ำขั้นตอนเลยเพื่อดูการเปลี่ยนแปลง

ขั้นตอนถัดไป

ยินดีด้วย คุณดูบทแนะนำจบแล้ว

หากต้องการดูฟีเจอร์และเวิร์กโฟลว์เพิ่มเติม (เช่น การนำเข้าและการส่งออก) ที่เกี่ยวข้องกับโปรแกรมอัดเสียง โปรดดูหัวข้อข้อมูลอ้างอิงฟีเจอร์โปรแกรมอัดเสียง