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

ومع ذلك، هناك حالة استخدام واحدة لا تستطيع أدوات إعادة تشغيل الجلسة التقليدية التعامل معها فعلياً: دعم الجلسات المباشرة.

إن امتلاك القدرة على رؤية ما يفعله مستخدموك مباشرة والاستجابة له بشكل مباشر، بل وحتى تولّي التحكم في الماوس الخاص بهم أو إجراء مكالمة سريعة لـ تُريهم المشكلة، أمر لا يُقدّر بثمن. ولهذا السبب طبّقت OpenReplay ميزة Assist.

في سيناريو عادي تقوم فيه بإعداد تطبيقك لتسجيل جلسة مستخدم، ستحصل على الأحداث والأخطاء والمشكلات المعتادة في تطبيقك، والتي تُسلَّم إلى نسختك من OpenReplay (أو إلى نسخة SaaS) بعد بضع دقائق من إغلاق علامة التبويب (فالتطبيق بحاجة في النهاية إلى التأكد من أنك لم تُغلقها عن طريق الخطأ). ستتمكن من تحليل ما فعله المستخدم خطوة بخطوة، ولكن إذا وجدت بالفعل مشكلة، فلن تتمكن من مراجعتها مباشرة مع ذلك المستخدم.

ومع ذلك، وبفضل Assist، ستتمكن الآن من:

• فحص ما يفعله المستخدم بشكل مباشر وفي الوقت الفعلي، منذ اللحظة التي يفتح فيها الصفحة.
• بفضل استخدام WebRTC، يتم إنشاء قناة فردية بين العميل والمشغّل. وهذا يتيح لك فتح مكالمة مباشرة من داخل التطبيق، دون الحاجة إلى تثبيت برنامج اتصال من طرف ثالث على أيٍّ من الحاسوبين المعنيين.
• تولّي التحكم في ماوس المستخدم (بعد الحصول على إذنه بالطبع) وإظهار المكان الذي يجب أن ينقر عليه بالضبط.

ألقِ نظرة على واجهة ميزة Assist كما يراها المشغّل وهو يراقب ما يفعله المستخدم في أي لحظة معينة:

نظراً لأن هذه ميزة تعرض التحديثات بشكل مباشر، فإن أبرز النقاط الرئيسية ستكون حقلي “البريد الإلكتروني” و”رقم الهاتف المحمول”. الأول يتم إخفاؤه (تشويشه) للحفاظ على خصوصية المستخدم، والثاني يتم تجاهله حرفياً بواسطة أداة التتبّع لمنع جمع البيانات الشخصية. وبما أن تحويل البيانات يتم على جانب العميل، فلا توجد أي طريقة لك، بصفتك مشغّلاً، لرؤية هذه القيم.

وهذا بدوره يتيح لك تقديم الدعم بشكل مثالي لأي نوع من الأنظمة مع ضمان لمستخدميك بأنه لن تكون هناك أي معالجة على الإطلاق لبياناتهم الشخصية.

هذه الميزة متاحة بالفعل في جميع أحدث إصدارات OpenReplay، لذا كل ما علينا فعله هو تفعيلها. إذا كنت تعمل مع نسخة الحزمة (package) من OpenReplay، فكل ما عليك فعله هو تثبيت الإضافة التالية مباشرة من سطر الأوامر:

npm install @openreplay/tracker-assist

ثم استخدم الكود التالي لتفعيلها:

//...
import OpenReplay from '@openreplay/tracker';
import trackerAssist from '@openreplay/tracker-assist';
//...
const tracker = new OpenReplay({
  projectKey: "your project key"
});
tracker.use(trackerAssist({})); //add this line
tracker.start();

أما إذا كنت تستخدم مقطع JS الذي حصلت عليه من المنصة عند إعدادها لأول مرة، فكل ما عليك فعله هو تحديث مسار واحد. يُفترض أن يكون مقطعك الأصلي مشابهاً لهذا:

<!-- OpenReplay Tracking Code for HOST -->
<script>
  var initOpts = {
    projectKey: "your project key",
    defaultInputMode: 0,
    obscureTextNumbers: false,
    obscureTextEmails: true,
  };
  var startOpts = { userID: "" };
  (function(A,s,a,y,e,r){
    r=window.OpenReplay=[e,r,y,[s-1, e]];
    s=document.createElement('script');s.src=A;s.async=!a;
    document.getElementsByTagName('head')[0].appendChild(s);
    r.start=function(v){r.push([0])};
    r.stop=function(v){r.push([1])};
    r.setUserID=function(id){r.push([2,id])};
    r.setUserAnonymousID=function(id){r.push([3,id])};
    r.setMetadata=function(k,v){r.push([4,k,v])};
    r.event=function(k,p,i){r.push([5,k,p,i])};
    r.issue=function(k,p){r.push([6,k,p])};
    r.isActive=function(){return false};
    r.getSessionToken=function(){};
  })("//static.openreplay.com/latest/openreplay.js",1,0,initOpts,startOpts);
</script>

لاحظ المسار المؤدي إلى الملف openreplay.js في الأسفل. نحتاج إلى تغيير ذلك ووضعopenreplay-assist.js بدلاً منه، بحيث يصبح شبيهاً بهذا:

<!-- OpenReplay Tracking Code for HOST -->
<script>
  var initOpts = {
    projectKey: "your project key",
    defaultInputMode: 0,
    obscureTextNumbers: false,
    obscureTextEmails: true,
  };
  var startOpts = { userID: "" };
  (function(A,s,a,y,e,r){
    r=window.OpenReplay=[e,r,y,[s-1, e]];
    s=document.createElement('script');s.src=A;s.async=!a;
    document.getElementsByTagName('head')[0].appendChild(s);
    r.start=function(v){r.push([0])};
    r.stop=function(v){r.push([1])};
    r.setUserID=function(id){r.push([2,id])};
    r.setUserAnonymousID=function(id){r.push([3,id])};
    r.setMetadata=function(k,v){r.push([4,k,v])};
    r.event=function(k,p,i){r.push([5,k,p,i])};
    r.issue=function(k,p){r.push([6,k,p])};
    r.isActive=function(){return false};
    r.getSessionToken=function(){};
  })("//static.openreplay.com/latest/openreplay-assist.js",1,0,initOpts,startOpts);
</script>

ومن المفترض أن يكون هذا كل ما تحتاج إلى تغييره في إعدادك الأساسي للحصول على إمكانية الوصول إلى ميزات Assist.

ما مدى روعة ذلك؟!

لاحظ أنه إذا صادفت رسالة الخطأ التالية (كما حدث معي)، فينبغي عليك اتباع هذه الخطوات لإصلاحها.

“Critical dependency: the request of a dependency is an expression”

من المفترض أن يكون الإصلاح الوارد في الـ issue كافياً لتمضي قُدماً.

يمكنك الآن البدء في الاستفادة الكاملة من Assist الخاص بـ OpenReplay، فلنلقِ نظرة على ذلك.

بما أن العميل لم يعد عليه فعل أي شيء آخر من الآن فصاعداً، فقد حان الوقت لتنظر إلى جانب المشغّل.

مباشرة على المنصة، انقر على خيار Assist في قائمة التنقّل، كما هو موضح أدناه:

بمجرد النقر هناك، ستحصل على قائمة بجلسات Assist النشطة. وبمجرد أن يفتح مستخدمك التطبيق، ستظهر الجلسة هنا تلقائياً وستراها مدرجة على هذا النحو:

هناك، ترى المعلومات التالية:

• معرّف المستخدم، ذلك البريد الإلكتروني هناك؟ لقد أعددته باستخدام الطريقة setUserID على أداة التتبّع.
• وقت وتاريخ بدء كل جلسة.
• مدة الجلسة (تظهر بصيغة “14 seconds” في لقطة الشاشة).
• وأخيراً، المعلومات الجغرافية حول المستخدم. يمكنك أن ترى هناك أنني موجود في إسبانيا، وأنني علاوة على ذلك أستخدم Firefox على نظام macOS الخاص بسطح المكتب لديّ.

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

بمجرد تحديد موقع الجلسة التي كنت تبحث عنها، انقر على أيقونة “Play” الخاصة بالجلسة. سينقلك ذلك إلى العرض المباشر لتطبيق العميل.

يمكنك أن ترى في المقارنة جنباً إلى جنب أدناه كيف تعرض شاشة Assist جلسة المستخدم الحالي الذي تتم مراقبته.

الآن، كما يمكنك أن تلاحظ، هناك بعض الاختلافات بين ما يراه المستخدم وما يراه المشغّل. ولسبب وجيه. يتم إخفاء المعلومات الخاصة تلقائياً أو تجاهلها بالكامل. وهذا لحماية المستخدم الذي تتم مراقبته، فأنت بصفتك مشغّلاً لست بحاجة بالضرورة إلى رؤية رقم هاتف أو عنوان بريد إلكتروني. من المهم ملاحظة أن هذا هو السلوك الافتراضي، فأداة التتبّع المثبّتة على تطبيق العميل تكتشف نوع البيانات التي تُدخلها وتنسيقها (كما هو الحال في حقل البريد الإلكتروني) وتقرر في الحال حمايتها.

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

ميزة إضافية (ميزة مثيرة جداً للاهتمام، يجدر بي أن أضيف) هي القدرة على تولّي التحكم في مؤشر ماوس عميلك. من خلال هذه الوظيفة، ستتمكن من التحكم في الماوس والنقر على أماكن مختلفة من التطبيق. لن تتمكن من إرسال أي نوع آخر من إشارات الإدخال، لكن ذلك ينبغي أن يكون كافياً لمساعدتك على مساعدة مستخدميك.

وللوصول إلى هذه الميزة، كل ما عليك فعله هو النقر على رابط “Remote Control” في القسم العلوي الأيمن من شاشتك. عندما تفعل ذلك، سيرى عميلك نافذة منبثقة (modal) تطلب الإذن.

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

هذه ميزة رائعة عندما يعجز مستخدموك عن معرفة كيفية التفاعل مع تطبيقك أو المكان الذي يجب النقر عليه بالضبط. يمكنك حتى دعمهم عن طريق بدء مكالمة مباشرة مع مستخدمك واستخدام مؤشرك الأحمر لتُريهم المكان الذي يجب النقر عليه. تُظهرني لقطة الشاشة التالية وأنا أُجري مكالمة مباشرة مع… حسناً، مع نفسي من حاسوبين مختلفين بنظامي تشغيل مختلفين. يتم نقل كلٍّ من الصوت والفيديو عبر WebRTC.

إذا واجهت أي مشكلات في إعداد إضافة Assist في مشروعك، فيرجى التواصل معنا عبر مجتمعنا على Slack وطرح أسئلتك على مطورينا مباشرة!