البدء مع OpenReplay أمر بسيط.

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

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

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

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

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

npm i @openreplay/tracker

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

يمكنك استخدام الـ tracker كنسخة وحيدة (singleton)، وهي الطريقة الموصى بها لاستخدامه. بهذه الطريقة، يمكنك الوصول إلى الـ tracker من أي مكان في تطبيقك:

import { tracker } from '@openreplay/tracker'

tracker.configure({
	projectKey: PROJECT_KEY,
  ingestPoint: "https://openreplay.mydomain.com/ingest", // when dealing with the self-hosted version of OpenReplay
})

tracker.start() // returns a promise with session info (sessionID, sessionHash, userUUID)

أو يمكنك استخدام الفئة Tracker مباشرةً للتعامل مع نسختها يدويًا:

import OpenReplay from '@openreplay/tracker';
//...
const tracker = new OpenReplay({
  projectKey: PROJECT_KEY,
  ingestPoint: "https://openreplay.mydomain.com/ingest" // only required if using the self-hosted version of OpenReplay
});

tracker.start();

اتبع المقتطف أدناه إذا كان تطبيق الويب الخاص بك مُصيّرًا من جانب الخادم (SSR) (أي NextJS وNuxtJS). تأكّد من أن الـ tracker يعمل في بيئة المتصفح وأن 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 أو غيرهما. اطّلع على دروسنا التعليمية المخصّصة لكل من أطر العمل المدعومة:

ReactVueAngularNextJSNuxt

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

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