سيقوم السطر التالي بتثبيت المتتبّع ومعه الـ SDK لتتمكن من الاستفادة من جميع ميزات المتتبّع.

npm i @openreplay/react-native

عند إنشاء نسخة من متتبّع OpenReplay، تتوفّر عدة خيارات تهيئة يمكنك تقديمها لتخصيص العديد من جوانب التسجيل وتجربة التسجيل. يجب عليك ضبط الخيار projectKey في المُنشئ (constructor). يمكنك الحصول على هذه القيمة من لوحة تحكم OpenReplay الخاصة بك ضمن ‘Preferences > Projects’.

أضف الكود التالي إلى ملفك الجذري:

import Openreplay from '@openreplay/react-native';

// ...
useEffect(() => {
	Openreplay.tracker.startSession(
		'yourProjectKey',
		options, // explained below, set {} if empty
		'https://local.openreplay.instance/ingest' // if you're using our Serverless/SaaS plan then 'https://api.openreplay.com/ingest'
	);
}, [])

لتتبّع تفاعلات المستخدم داخل التطبيق، ستحتاج إلى إضافة المكوّنات التالية إلى تطبيقك:

• ORTouchTrackingView - يُضاف على المستوى الجذري لتتبّع تفاعلات اللمس
• ORTrackedInput - غلاف (wrapper) حول Input الخاص بـ React-Native يُرسل إشارات كلما انتهى المستخدم من الإدخال
• ORSanitizedView - يُشوّش المحتوى الموجود بداخله

// App.tsx
import Openreplay from '@openreplay/react-native';

function App() {
	const start = () => {
	    Openreplay.tracker.startSession(
	      process.env.REACT_APP_KEY!,
	      {},
	      process.env.REACT_APP_INGEST
	    );
	    Openreplay.tracker.setMetadata('key', 'value');
	    Openreplay.tracker.setUserID('user-id');
	    Openreplay.patchNetwork(global, () => false, {});
	};
	
	React.useEffect(() => start(), []);
	
	return (
		// this top-level view is required to track touch interactions
		<Openreplay.ORTouchTrackingView style={styles.container}> 
		      <View style={styles.container}>
		         <Openreplay.ORTrackedInput
		          style={styles.input}
		          onChangeText={onChangeNumber}
		          value={number}
		          placeholder="Trackable input"
		          numberOfLines={1}
		        />
		
		        <Openreplay.ORSanitizedView style={styles.sanitizedView}>
		          <Text>Contents of this view are sanitized and invisible on the recording</Text>
		        </Openreplay.ORSanitizedView>
		      </View>
		</Openreplay.ORTouchTrackingView>
	)
}

راجع كيفية تنقية البيانات في عمليات إعادة تشغيل React Native لمزيد من التفاصيل.

بشكل افتراضي، تكون جميع الخيارات مضبوطة على true:

• crashes: Bool يُفعّل crashlytics.
• analytics: Bool يُفعّل التتبّع التحليلي لطرق العرض (views) المُعلّمة.
• performances: Bool يُفعّل مستمع الأداء (performance listener).
• logs: Bool يُفعّل مستمع السجلات (logs listener).
• screen: Bool يُفعّل مُسجّل الشاشة.

إذا كانت لديك أي أسئلة حول هذه العملية، فلا تتردد في التواصل معنا عبر Slack الخاص بنا أو تفقّد المنتدى الخاص بنا.