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

Jecelyn Yeen

Sofia Emelianova

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

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

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

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

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

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

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

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

   

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

   

เกริ่นนำ

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

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

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

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

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

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

หมายเหตุ: คุณสามารถลบ Americano ในหน้าเมนูได้โดยวางเมาส์เหนือปุ่ม Total แล้วคลิก - ข้าง Americano ในเมนูป๊อปอัป

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

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

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

1. ในแผงโปรแกรมอัดเสียง ให้คลิกปุ่ม สิ้นสุดการบันทึกเพื่อสิ้นสุดการบันทึก

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

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

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

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

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

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

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

อาจมีการรองรับการตั้งค่าอื่นๆ ในอนาคต แชร์กับเราเกี่ยวกับการตั้งค่าการเล่นซ้ำที่คุณต้องการ

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

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

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

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

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

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

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

ขยายขั้นตอน

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

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

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

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

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

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

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

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

   

   หรือคลิกปุ่มเลือก แล้วคลิก Mocha ในหน้าเว็บ

2. เล่นซ้ำตอนนี้ ระบบจะเลือก Mocha แทน Cappuccino

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

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

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

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

   

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

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

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

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

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

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

ขอแสดงความยินดี คุณทำตามบทแนะนำเสร็จสิ้นแล้ว

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