تشغيل الـ tracker في تطبيق Vue أمر بسيط للغاية.

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

<script setup>
// note that you can manually import Tracker class if you want to handle the instance manually
import { tracker } from '@openreplay/tracker'
//... your code here
tracker.configure({
  projectKey: "<your project key>",
  ingestPoint: "https://openreplay.mydomain.com/ingest" // only required if using the self-hosted version of OpenReplay
});

tracker.start();
//... more code here
</script>

لأسباب أمنية، تجنّب كتابة الـ projectKey الخاص بك بشكل مباشر (hardcoding) في كود تطبيقك. بدلاً من ذلك، قم بتخزينه في ملف إعدادات أو في نظام بيئة (environment system).

أحد الخيارات هو إضافة متغير بيئة (environment variable) في ملف .env في جذر مشروعك مع إضافة البادئة VITE_ إلى المتغير، مما يجعله متاحًا لك في كود Vue الخاص بك. يمكنك استخدامه لاحقًا عبر import.meta.env.<your variable name>.

إليك مثالًا:

tracker.configure({
  projectKey: import.meta.env.VITE_VUE_APP_PROJECT_KEY,
});

إذا كنت تبني تطبيقًا معقدًا باستخدام Vue، فمن المرجّح أنك تستخدم Nuxt أو شيئًا مشابهًا له. تأكّد من الاطلاع على قسم Tracker Setup للعثور على إطار العمل (framework) الذي تعمل به.

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