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

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

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

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

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

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

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

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

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

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

npm install @openreplay/tracker-assist

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

//...
import { tracker } from '@openreplay/tracker';
import trackerAssist from '@openreplay/tracker-assist';
//...
tracker.configure({
  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”

ينبغي أن يكون الإصلاح المأخوذ من ذلك التقرير كافيًا لتتمكن من المتابعة.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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