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

ولكن ماذا يحدث إذا أردت أيضًا تعزيز تسجيلات جلساتك ببيانات خاصة بتطبيقك؟

مثل فهم الخطة المدفوعة التي ينتمي إليها المستخدم عند مراجعتك لإعادة تشغيل جلسته؟ يمكن أن توفّر هذه المعلومات سياقًا إضافيًا لمطوّريك، لذا فإن كونها غير قياسية لا يعني أنه ينبغي لنا تجاهلها، أليس كذلك؟

هنا يأتي دور البيانات الوصفية.

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

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

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

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

أول ما عليك فعله هو إعداد حقول البيانات الوصفية مباشرةً داخل المنصة.

إذا تخطّيت هذه الخطوة، فلن تتمكّن من تسجيل أي معلومات، لذا لا تتخطّاها!

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

وبمجرّد دخولك إلى هناك، انقر على عنصر القائمة Metadata في أقصى يسار شاشتك:

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

في هذا المثال، أنشأنا 3 حقول لمشروع “e-commerce test”:

• حقل “plan” الذي سيحتوي على الخطة الحالية للمستخدم.
• حقل “utm_source” الذي يحتوي على رمز يحدّد من أين أتى المستخدم.
• وأخيرًا، حقل “items_in_cart” الذي يحتوي على العدد الإجمالي للعناصر في سلة المستخدم.

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

وبعد جاهزية هذا الإعداد، تكون الخطوة التالية هي إضافة الكود المطلوب لإرسال البيانات فعليًا كجزء من جلستك.

لإضافة البيانات الوصفية إلى الجلسة، سنستخدم الطريقة setMetadata من الـ tracker. يمكنك استخدام هذه الطريقة في أي وقت طوال جلسة المستخدم، فقط ضع في اعتبارك الأمرين التاليين:

1. إذا طبّقت قيمًا متعدّدة على حقل البيانات الوصفية نفسه، فلن تُحفظ سوى القيمة الأخيرة كجزء من الجلسة.
2. يجب أن تكون جميع القيم سلاسل نصية. وإلا فلن تُحفظ. لن يحوّل الـ tracker القيم إلى سلاسل نصية، لذا انتبه لهذا الأمر.

في هذا المثال، نستخدم موقع التجارة الإلكترونية المبني باستخدام Next.js الذي استخدمناه في درس NextJs، احرص على الاطلاع على ذلك الدرس كي تفهم البنية الأساسية لمزوّد السياق (context provider) الموضّح في لقطة الشاشة التالية:

تُظهر الأسهم الحمراء المواضع التي أُجريت فيها التحديثات ذات الصلة. يصدّر مزوّد السياق هذا دالة تُسمّى setMetadata تستدعي بدورها الطريقة setMetadata من الـ tracker.

إذا أردت مثالًا عمليًا قابلًا للتشغيل، يمكنك الاطلاع على هذا المستودع.

والآن كل ما علينا فعله هو استخدام الدالة المُصدَّرة كلما أردنا تهيئة حقول البيانات الوصفية.

لغرض هذا المثال، سنقرّر تعيين حقلَي utm_source وplan مباشرةً من الصفحة الرئيسية، ثم في كل مرة يضيف فيها المستخدم عنصرًا إلى السلة، سنحدّث الحقل الأخير المتبقّي.

في الملف pages/index.tsx، سنضيف الكود التالي:

// inside the main component
const { startTracking, setMetadata } = useContext(TrackerContext)
//...
useEffect(() => {
    async function getProds() {
      await startTracking()
      setMetadata('plan', getPlan()) //addition
      setMetadata('utm_source', getUTMSource()) //addition
      dispatch(getMakeUpProducts() as any)
    }

    getProds()
  }, [dispatch])

كان معظم ذلك الـ hook موجودًا بالفعل، لكننا أضفنا الإشارة إلى الدالة setMetadata ثم الاستدعاءين لها. كلتا الدالتين، getPlan وgetUTMSource، تُرجعان بيانات عشوائية في هذا المثال. بالنسبة لحالة الاستخدام الخاصة بك، سيتعيّن عليك تنفيذهما وفقًا لذلك.

سيقوم هذا الكود بتعيين قيم البيانات الوصفية هذه عند تحميل الصفحة الرئيسية.

والآن نحتاج إلى إضافة القيمة الأخيرة، وهي عدد العناصر في السلة. لأجل ذلك، سنذهب إلى المكوّن ProductSidebar، وهو المكوّن المسؤول عن التحكّم بما يحدث عند النقر على “Add to cart”، وسنضيف hook آخر للتفاعل مع تغيّر عدد عناصر السلة.

useEffect(() => {
    setMetadata('items_in_cart', productsInCart)
  }, [productsInCart])

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

والآن يجري حفظ البيانات. يمكننا أيضًا رؤية ذلك في المنصة من خلال قائمة الجلسات.

والآن بعد أن أصبحت البيانات الوصفية تُحفظ داخل جميع عمليات إعادة تشغيل الجلسات، ماذا يمكنك أن تفعل بها؟

حسنًا، بدايةً، يمكنك عرضها مباشرةً من إعادة التشغيل:

ينبغي أن تبدأ في رؤية حقول البيانات الوصفية في الزاوية العلوية اليمنى من شاشة المشغّل لديك. في هذا المثال، نرى أن المستخدم لديه خطة Enterprise Edition، وأنه قادم من Reddit، وأن لديه عنصرًا واحدًا فقط مُضافًا إلى السلة.

الأمر القوي الآخر الذي يمكنك فعله بالبيانات الوصفية هو استخدامها كمعامل بحث. باستخدام شريط omnisearch، يمكنك اختيار حقول البيانات الوصفية المخصّصة التي أنشأتها كمعاملات بحث:

لذا إذا أردت النظر في عمليات إعادة تشغيل Enterprise Edition فقط، يمكنك ببساطة اختيار حقل Plan وتصفيته حسب “ee”، على النحو التالي:

يمكنك أيضًا استخدام شريط omnisearch نفسه عند إنشاء widget للوحة المعلومات (dashboard) الخاصة بك. وللاستمرار في مثال EE، إذا أردت إنشاء لوحة معلومات لعملاء Enterprise فقط، يمكنك تصفية كل widget مخصّص باستخدام السمة “Plan”.

على سبيل المثال، يُظهر الـ widget التالي عدد عملاء Enterprise الذين ينقرون على زر “Add to cart”:

مما ينتج عنه widget يبدو على هذا النحو:

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

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

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

يمكن الاطلاع على الكود المصدري الكامل للمشروع التجريبي الذي يستخدم البيانات الوصفية هنا.

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