تشغيل المتعقّب في تطبيق Nuxt أمر بسيط للغاية.

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

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

import { tracker } from '@openreplay/tracker'

tracker.configure({ projectKey: "<your project key>" });

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

import Tracker from '@openreplay/tracker';
import {v4 as uuidV4} from 'uuid'

function defaultGetUserId() {
   return uuidV4() 
}

export function startTracker(config) {

    console.log("Starting tracker...")

    const getUserId = (config?.userIdEnabled && config?.getUserId) ? config.getUserId : defaultGetUserId
    let userId = null;

    const trackerConfig = {
        projectKey: config?.projectKey
    }

    const tracker = new Tracker(trackerConfig);

    if(config?.userIdEnabled) {
        userId = getUserId()
        tracker.setUserID(userId)
    }

    tracker.start();
    return {
        tracker,
        userId
    }
}

تتولّى هذه الدالة إنشاء نسخة من Tracker واستدعاء الطريقة start، التي تجعل كل شيء يبدأ بالعمل.

تستقبل هذه الدالة أيضًا كائن «إعدادات» يمكنك توسيعه لميزات مستقبلية. يوضّح لك هذا المثال كيفية تمكين القدرة على تحديد هوية المستخدمين بشكل فريد، بصورة اختيارية. يمكنك استخدام UUID افتراضي يكون فريدًا لكل مستخدم في كل مرة يزور فيها الصفحة. وبدلاً من ذلك، يمكنك توفير دالة getUserId مخصّصة كجزء من الإعدادات.

باستخدام دالتك المخصّصة، يمكنك توفير معرّف العميل الخاص بمتجرك، أو عنوان البريد الإلكتروني للمستخدم، أو أي شيء يحدّد هوية المستخدم بشكل فريد داخل تطبيقك. بهذه الطريقة، يمكنك تتبّع session replays الخاصة به على مرّ الوقت في حال واجه مشكلة معيّنة لا يبلّغ عنها الآخرون.

في هذا المثال، يُتوقّع تمرير مفتاح المشروع، الذي يمكنك الحصول عليه من واجهة المشاريع في OpenReplay، داخل الكائن config ضمن المفتاح projectKey.

لاستخدام دالة startTracker هذه، ستحتاج إلى إنشاء إضافة (plugin) خاصة بالعميل فقط داخل دليل plugins في مشروع Nuxt الخاص بك.

تأكّد من إضافة اللاحقة .client إلى اسم ملف الإضافة الخاص بك. وذلك للتأكّد من أن Nuxt يقوم بتحميلها على جانب العميل فقط.

قد يبدو كود الإضافة على النحو التالي:

import {startTracker} from '../utils/tracker'

export default defineNuxtPlugin( (nuxtApp) => {
    
    return {
        provide: {
            startTracking: () => {
                let config = useRuntimeConfig().public
                
                let {userId} = startTracker({
                    userIdEnabled: true,
                    projectKey: config.openreplayProjectKey
                })
                //Optional if you need it
                let uid = useUserId()
                uid.value = userId
            }
        }
    }
})

إذا كنت ترغب في قراءة المزيد عن إنشاء إضافات Nuxt، يمكنك الاطّلاع على توثيقهم.

الآن، توفّر هذه الإضافة دالة تُسمّى startTracking، تتولّى استدعاء دالة startTracker التي عرّفناها سابقًا. لكن الأهم من ذلك، أنه داخل كود الإضافة يمكنك الحصول على متغيّر البيئة الذي خزّنت فيه مفتاح المشروع. تذكّر أن هذه المعلومات يجب ألّا تكون مكتوبة بشكل ثابت (hard-coded) داخل مشروعك لأسباب أمنية.

من خلال الدالة useRuntimeConfig، يمكنك الوصول إلى متغيّرات البيئة العامة. في هذا المثال، أصل إلى openreplayProjectKey المعرّف بالاسم NUXT_PUBLIC_OPENREPLAY_PROJECT_KEY.

يوضّح لك المثال أعلاه أيضًا كيفية استخدام قيمة معرّف المستخدم المُعادة مع composable لمشاركة القيمة بين المكوّنات. هذان السطران اختياريان تمامًا.

بعد حفظ الإضافة في ملف، يمكنك حينئذٍ استخدامها على هذا النحو من ملف app.vue الخاص بك.

<script setup>
onMounted( () => {
  const {$startTracking} = useNuxtApp()
  $startTracking()
})
</script>

<template>
  <div>
    <NuxtPage />
  </div>
</template>

تأكّد من استدعاء المتعقّب بعد تشغيل حدث mounted. يمكنك القيام بذلك باستخدام composable المسمّى onMounted. بعد ذلك، يجب أن يبدأ المتعقّب بإرسال البيانات إلى المنصّة بمجرّد نشر التطبيق.

للاطّلاع على الكود الكامل لتطبيق عملي مبني على Nuxt، يمكنك مراجعة هذا المستودع.

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