إن البدء مع OpenReplay أمرٌ سهل.

إذا كنت ترغب في مشاهدة شرح سريع حول كيفية البدء، استخدم هذا الفيديو على YouTube، وإلا فتابع القراءة لمزيد من التفاصيل.

هناك طريقتان لتشغيل OpenReplay: باستخدام السكربت أو باستخدام حزمة npm.

انسخ والصق مقطع الكود مباشرةً داخل </head> الخاص بتطبيق الويب لديك. يمكن العثور على السكربت في لوحة تحكم OpenReplay ضمن ‘Preferences > Projects’ وهو فريد لكل مشروع.

إذا كان موقعك الإلكتروني يدعم Google Tag Manager، فيمكنك اتباع دليل GTM خطوة بخطوة.

أولاً قم بتثبيت حزمة npm.

npm i @openreplay/tracker

بعد ذلك، قم بتهيئة الحزمة من نقطة الدخول إلى قاعدة الكود الخاصة بك وابدأ tracker. يجب عليك تعيين خيار projectKey في الـ constructor. يمكن العثور على قيمته في لوحة تحكم OpenReplay ضمن ‘Preferences > Projects’.

import OpenReplay from '@openreplay/tracker';
//...
const tracker = new OpenReplay({
  projectKey: PROJECT_KEY
});
tracker.start();

اتبع المقطع أدناه إذا كان تطبيق الويب لديك يُعرض من جهة الخادم (SSR) (أي NextJS أو NuxtJS). تأكّد من استدعاء tracker.start() بمجرد بدء تشغيل التطبيق (في useEffect أو componentDidMount).

import OpenReplay from '@openreplay/tracker/cjs';
//...
const tracker = new OpenReplay({
      projectKey: PROJECT_KEY
});
//...
function MyApp() {
  useEffect(() => { // use componentDidMount in case of React Class Component
    tracker.start();
  }, []);
}

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

إذا لم تكن تستخدم OpenReplay داخل تطبيق بسيط، فمن المرجّح أنك تستخدم إطار عمل لتطوير الويب، مثل Next.js أو Nuxt أو غيرهما. اطّلع على شروحاتنا المخصّصة لكل من أُطر العمل المدعومة:

React Vue Angular NextJS Nuxt

الآن وقد قمت بتثبيت tracker ونشر تطبيق الويب الخاص بك، يجب أن تظهر تسجيلات الجلسات خلال بضع دقائق. أحسنت!

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

• تحديد هوية المستخدم: اربط معرّف المستخدم الداخلي الخاص بك بالجلسة التي يتم تسجيلها.
• البيانات الوصفية: تُعرف أيضاً باسم traits أو متغيرات المستخدم، وتوفّر البيانات الوصفية معلومات إضافية عن المستخدمين أثناء تسجيل الجلسات.
• الأحداث المخصّصة: احصل على رؤى أعمق عبر تسجيل أحداث خاصة بمجالك إلى جانب عمليات إعادة تشغيل الجلسات.
• الإبلاغ عن الأخطاء: أبلِغ عن الأخطاء والاستثناءات وشاهدها ضمن علامة التبويب ERRORS.
• رفع Source-Maps: اطّلع على سياق الكود المصدري المستمدّ من تتبّعات المكدّس (stack traces) في صورته الأصلية.
• الإضافات: افهم ما يجري وراء الكواليس عبر التقاط store الخاص بتطبيقك ومراقبة استعلامات HTTP وGraphQL.
• عمليات التكامل: اربط OpenReplay بأدوات التسجيل (logging) الخاصة بك وزامِن أخطاء الواجهة الخلفية مع عمليات إعادة تشغيل الجلسات.