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

Jecelyn Yeen

Sofia Emelianova

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

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

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

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

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

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

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

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

   

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

   

บทนำ

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

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

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

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

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

เล่นโฟลว์ผู้ใช้ซ้ำ

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

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

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

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

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

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

ทั้งนี้อาจมีการเพิ่มการตั้งค่าอื่นๆ ในอนาคต โปรดแชร์การตั้งค่าการเล่นซ้ำที่ต้องการกับเรา

วัดเส้นทางของผู้ใช้

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

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

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

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

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

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

ขยายขั้นตอน

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

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

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

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

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

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

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

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

   

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

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

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

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

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

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

   

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

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

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

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

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

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

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

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