تسجيل مسارات المستخدمين وإعادة تشغيلها وقياسها باستخدام "أدوات مطوري البرامج في Chrome"

1- مقدمة

يمكنك استخدام لوحة "المسجّلة الذكية" لتسجيل تدفقات المستخدمين وإعادة تشغيلها وقياسها.

ألقِ نظرة على لوحة "المسجّلة الذكية" الجديدة (ميزة المعاينة) مع الفيديو أدناه.

ما ستتعرّف عليه ستتعلّمه

• تسجيل تدفق المستخدم
• إعادة تشغيل تدفق المستخدم
• تعديل تدفق المستخدم
• قياس تدفق المستخدمين

ما تحتاج إليه

• جهاز كمبيوتر يعمل بشبكة Wi-Fi وخدمة Wi-Fi رائعة
• الإصدار 101 من Chrome والإصدارات الأحدث.

2. فتح لوحة "المسجّلة الذكية"

فتح لوحة "المسجّلة الذكية" باتّباع الخطوات التالية

1. افتح أدوات مطوري البرامج.
2. انقر على مزيد من الخيارات &gt؛ مزيد من الأدوات &gt؛ المسجّلة الذكية. بدلاً من ذلك، يمكنك استخدام قائمة الأوامر لفتح لوحة المسجّلة الذكية.

3. بدء

سنستخدم صفحة العرض التوضيحي لطلب القهوة هذه. "السداد" هو تدفق شائع للمستخدم بين مواقع التسوق على الويب.

في الأقسام التالية، سنرشدك إلى كيفية التسجيل وإعادة تشغيل وقياس عملية الدفع التالية باستخدام لوحة "المسجّلة الذكية":

1. أضِف قهوة إلى سلة التسوّق.
2. يُرجى إضافة قهوة أخرى إلى سلة التسوّق.
3. انتقِل إلى صفحة سلة التسوق.
4. أزِل قهوة واحدة من سلة التسوّق.
5. ابدأ عملية الدفع.
6. أدخِل تفاصيل الدفع.
7. إتمام الدفع

فتح الصفحة

4. تسجيل تدفق المستخدم

1. افتح صفحة العرض التوضيحي. انقر على الزر بدء تسجيل جديد للبدء.
2. أدخِل "coffee checkout" في مربع النص اسم التسجيل.
3. انقر على الزر بدء تسجيل جديد. بدأ التسجيل. تعرض اللوحة جارٍ التسجيل... يشير إلى أن التسجيل قيد التقدم.
4. انقر على Cappuccino لإضافته إلى سلة التسوّق.
5. انقر على Americano لإضافته إلى سلة التسوّق. ملاحظة: تعرض المسجّلة الذكية الخطوات التي اتّخذتها حتى الآن.
6. انتقِل إلى صفحة سلة التسوق.
7. أزِل Americano من سلة التسوق.
8. انقر على الزر الإجمالي: 19 دولارًا أمريكيًا (أو ما يعادله بالعملة المحلية) لبدء عملية الدفع.
9. في نموذج تفاصيل الدفع، املأ المربعين النصيين الاسم والبريد الإلكتروني، وضَع علامة في مربّع الاختيار أريد تلقي تحديثات الطلبات والرسائل الترويجية.
10. انقر على الزر إرسال لإكمال عملية الدفع.
11. في لوحة المسجّلة الذكية. انقر على زر إنهاء التسجيل لإنهاء التسجيل.

5. إعادة تشغيل تدفق المستخدم

بعد تسجيل تدفق مستخدم، يمكنك إعادة تشغيله عن طريق النقر على زر إعادة التشغيل.

ويمكنك الاطّلاع على إعادة تشغيل تدفق المستخدمين على الصفحة. ويتم عرض تقدّم إعادة التشغيل في لوحة المسجّلة الذكية أيضًا.

يمكنك محاكاة اتصال شبكة بطيء من خلال ضبط إعدادات إعادة التشغيل. على سبيل المثال، وسِّع إعدادات إعادة التشغيل، واختَر شبكة الجيل الثالث بطيئة في القائمة المنسدلة الشبكة.

ويمكنك أيضًا ضبط مهلة أطول لكل الخطوات.

قد يتوفّر المزيد من الإعدادات في المستقبل. شارِك معنا إعدادات إعادة التشغيل التي تريدها.

6. قياس تدفق المستخدمين

يمكنك قياس أداء تدفق المستخدم من خلال النقر على الزر قياس الأداء. على سبيل المثال، تمثّل عملية الدفع عملية مهمة بالنسبة إلى المستخدم لموقع إلكتروني خاص بالتسوّق. باستخدام لوحة المسجّلة الذكية، يمكنك تسجيل عملية الدفع مرة واحدة وقياسها بانتظام.

سيؤدي النقر على الزر قياس الأداء إلى تشغيل إعادة تشغيل تدفق المستخدم أولاً، ثم فتح تتبع الأداء في لوحة الأداء.

تعرّف على كيفية تحليل أداء الصفحة على الصفحة من خلال لوحة الأداء. يمكنك تفعيل مربع اختيار "مؤشرات أداء الويب" في لوحة الأداء، للاطّلاع على مقاييس مؤشرات أداء الويب، وتحديد فرص تحسين تجربة تصفّح المستخدم.

7. تعديل مسارات المستخدمين

لنتعرّف على خيارات تعديل مسارات المستخدمين.

في أعلى لوحة المسجّلة الذكية، تتوفّر لك الخيارات التالية:

1. إضافة تسجيل جديد انقر على الرمز + من أجل إضافة تسجيل جديد.
2. عرض كل التسجيلات تعرض القائمة المنسدلة قائمة التسجيلات المحفوظة. انقر على الخيار [number] تسجيلات لتوسيع قائمة التسجيلات المحفوظة وإدارتها.
3. تصدير تسجيل يمكنك تصدير مسار المستخدم كنص برمجي Puppeteer لتخصيص النص البرمجي بشكل أكبر.
4. حذف تسجيل حذف التسجيل الذي تم اختياره

يمكنك أيضًا تعديل اسم التسجيل بالنقر على زر التعديل بجانبه.

8- تعديل الخطوات

لنتعرّف على خيارات تعديل الخطوات ضمن سير العمل.

توسيع الخطوات

1. وسِّع كل خطوة للاطّلاع على تفاصيل الإجراء. على سبيل المثال، وسِّع خطوة عنصر العنصر "&";Cappuccino".
2. تعرض الخطوة أعلاه أداة اختيار. لمزيد من المعلومات، راجع أولوية أداة الاختيار. عند إعادة تشغيل تدفق المستخدم، تحاول المسجّلة الذكية طلب البحث عن العنصر باستخدام إحدى أدوات الاختيار حسب التسلسل. على سبيل المثال، إذا نجحت أداة المسجّلة الذكية في الاستعلام عن العنصر باستخدام أداة الاختيار الأولى، ستتخطّى أداة الاختيار الثانية وتتابع إلى الخطوة التالية.
3. ويمكنك إضافة أي أدوات اختيار أو إزالتها. على سبيل المثال، يمكنك إزالة المُحدِّد رقم 2 لأن استخدام aria/Cappuccino يكفي في هذه الحالة فقط. مرّر مؤشر الماوس فوق المُحدِّد رقم 2 وانقر على - لإزالته.
4. أداة الاختيار قابلة للتعديل أيضًا. على سبيل المثال، إذا كنت تريد اختيار Mocha بدلاً من Cappuccino، يمكنك تعديل قيمة المحدِّد إلى aria/Mocha بدلاً من ذلك. بدلاً من ذلك، انقر على الزر اختيار ثم انقر على Mocha في الصفحة.
5. يجب إعادة تشغيل التدفق الآن، مع اختيار Mocha بدلاً من Cappuccino.
6. جرِّب تعديل خصائص الخطوات الأخرى مثل type وtarget وvalue والمزيد.

إضافة الخطوات وإزالتها

وهناك خيارات لإضافة الخطوات وإزالتها أيضًا. وتُعد هذه الطريقة مفيدة إذا كنت تريد إضافة خطوة إضافية أو إزالة خطوة تمت إضافتها بدون قصد. وبدلاً من إعادة تسجيل تدفق المستخدم، يمكنك تعديله فقط. انقر على قائمة الكباب 3 نقاط بجانب الخطوة لفتح القائمة.

1. على سبيل المثال، ليس من الضروري استخدام حدث Scroll بعد خطوة Mocha. يمكنك اختيار إزالة الخطوة لإزالتها.
2. لنفترض أنك تريد الانتظار حتى عرض قهوة 9 على الصفحة قبل تنفيذ أي خطوات.
3. في قائمة خطوة Mocha، اختَر إضافة خطوة قبل.
4. في Confirm Element (تعديل العنصر)، عدِّل الخطوة الجديدة باستخدام التفاصيل التالية:
   • type: انتظَرForForElement
   • المحدّد رقم 1: .cup
   • عامل التشغيل: == (انقر على زر إضافة عامل تشغيل)
   • العدد: 9 (انقر على الزر إضافة عدد)
5. أعِد تشغيل التدفق الآن لمشاهدة التغييرات.

9- تهانينا.

تهانينا. لقد أكملت هذا الدرس التطبيقي حول الترميز بنجاح.

يمكن أيضًا تخصيص أداة الاختيار للتسجيلات. يُرجى الانتقال إلى مستنداتنا للحصول على المزيد من المعلومات.

كيف تعثر على هذا الدرس التطبيقي حول الترميز؟

لا، هذا ممل. هذا رائع.