جعل الـ tracker يعمل على تطبيق React أمر بسيط للغاية.

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

بافتراض أنك تقوم ببناء تطبيق SPA (تطبيق صفحة واحدة)، فكل ما عليك فعله هو إضافة الكود التالي إلى نقطة الدخول الخاصة بك:

import Tracker from '@openreplay/tracker';

const tracker = new Tracker({
  projectKey: "<your project key>",  
});

function YourMainComponent({props}) {
    //some code here...

    useEffect(() => {
        tracker.start();
    }, [])

    return //....
}

بمعنى آخر، يمكنك تهيئة الـ tracker في بداية السكربت، وبمجرد تحميل الصفحة، يمكنك تشغيله باستخدام خطاف useEffect.

كملاحظة، إن الـ projectKey الذي تقوم بتكوينه هو المفتاح المقدَّم من منصة OpenReplay. ولأسباب أمنية، يجب عدم تخزين هذه القيمة بشكل ثابت (hardcoded) في الكود، بل في نوع ما من ملفات/أنظمة التكوين.

هناك خيارات مختلفة لحل هذه المشكلة؛ واعتمادًا على إعدادك، قد تستخدم شيئًا مثل دعم المتغيرات ENV من create-react-app.

إذا كنت تبني تطبيقًا معقدًا باستخدام React، فمن المحتمل أنك تستخدم Next أو Remix أو شيئًا مشابهًا. تأكد من الاطلاع على قسم الإعداد لدينا للعثور على الإطار الذي تعمل معه.

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