قياس الاستخدام بلا إنترنت

كيفية تتبُّع استخدام موقعك الإلكتروني بلا إنترنت حتى تتمكّن من توضيح سبب حاجة موقعك الإلكتروني إلى تجربة أفضل بلا إنترنت

Stephan Giesau

Martin Schierle

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

المشاكل المحتملة في أحداث المتصفّح على الإنترنت وبلا إنترنت

الحل الواضح لتتبُّع الاستخدام بلا إنترنت هو إنشاء متتبِّعات أحداث للحدثَين online وoffline (اللذين تتيحهما العديد من المتصفحات) ووضع منطق تتبُّع الإحصاءات في هذه المتتبِّعات. للأسف، هناك العديد من المشكلات والقيود في هذا النهج:

• بشكل عام، قد يكون تتبُّع كل حدث لحالة الاتصال بالشبكة مفرطًا، ويؤدي إلى نتائج عكسية في عالم يركّز على الخصوصية حيث يجب جمع أقل قدر ممكن من البيانات. بالإضافة إلى ذلك، يمكن أن يتم تنشيط الحدثين online وoffline في حال انقطاع الاتصال بالشبكة لجزء من الثانية، وهو ما قد لا يلاحظه المستخدم.
• لا يصل تتبُّع الإحصاءات للنشاط بلا إنترنت إلى خادم الإحصاءات.
• يعتمد تتبُّع الطابع الزمني محليًا عندما يصبح المستخدم غير متصل بالإنترنت وإرسال النشاط الذي تم إجراؤه بلا إنترنت إلى خادم الإحصاءات عندما يعود المستخدم إلى الإنترنت على إعادة زيارة المستخدم لموقعك الإلكتروني. إذا غادر المستخدم موقعك الإلكتروني بسبب عدم توفّر وضع عدم الاتصال بالإنترنت ولم يَعُد إليه مطلقًا، لن يكون لديك أي طريقة لتتبُّع ذلك. تُعدّ إمكانية تتبُّع عمليات مغادرة المسار بلا إنترنت بيانات مهمة لتقديم حجة حول سبب حاجة موقعك الإلكتروني إلى وضع عدم الاتصال بالإنترنت بشكل أفضل.
• لا يُعدّ الحدث online موثوقًا للغاية لأنّه يعرف فقط عن الوصول إلى الشبكة، وليس إمكانية الوصول إلى الإنترنت. لذلك، قد يظل المستخدم غير متصل بالإنترنت، وقد يتعذّر إرسال إشعار التتبّع.
• حتى إذا بقي المستخدم في الصفحة الحالية أثناء عدم اتصاله بالإنترنت، لن يتم تتبُّع أي من أحداث الإحصاءات الأخرى (مثل أحداث التمرير والنقرات وما إلى ذلك)، والتي قد تكون المعلومات الأكثر صلة وفائدة.
• فمجرد عدم الاتصال بالإنترنت ليس مفيدًا للغاية. من المهم معرفة الموارد التي يتعذّر تحميلها. وهذا مهم بشكل خاص للتطبيقات من صفحة واحدة (SPA)، حيث قد لا يؤدي انقطاع الاتصال بالشبكة إلى ظهور صفحة خطأ في المتصفّح تفيد بأنّ الجهاز غير متصل بالإنترنت، وهو ما يفهمه المستخدمون. بدلاً من ذلك، من المرجّح أن يؤدي ذلك إلى تعذُّر تحميل أجزاء عشوائية وديناميكية من الصفحة بدون ظهور أي رسالة خطأ.

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

طريقة أفضل: مشغّل الخدمات

الحل الذي يتيح وضع عدم الاتصال بالإنترنت هو أيضًا حل أفضل لتتبُّع الاستخدام بلا إنترنت. يمكنك تخزين إشعارات التحليلات في IndexedDB طالما أنّ المستخدم غير متصل بالإنترنت، وإعادة إرسالها عندما يتصل المستخدم بالإنترنت مرة أخرى. بالنسبة إلى "إحصاءات Google"، تتوفّر هذه الميزة حاليًا في وحدة Workbox، ولكن يُرجى العِلم أنّ النتائج التي يتم إرسالها بعد أكثر من أربع ساعات قد لا تتم معالجتها.

في أبسط أشكاله، يمكن تفعيله ضمن مشغّل خدمات مستند إلى Workbox باستخدام هذين السطرين:

import * as googleAnalytics from 'workbox-google-analytics';

googleAnalytics.initialize();

يتتبّع هذا الإجراء جميع الأحداث الحالية وإشعارات مشاهدات الصفحات على الويب أثناء عدم الاتصال بالإنترنت، ولكن لن تعرف أنّها حدثت بلا إنترنت، لأنّه تتم إعادة تشغيلها كما هي. يمكنك التلاعب بطلبات التتبُّع باستخدام Workbox من خلال إضافة علامة offline إلى إشعار "إحصاءات Google"، باستخدام سمة مخصّصة:

import * as googleAnalytics from 'workbox-google-analytics';

googleAnalytics.initialize({
  parameterOverrides: {
    customDimension1: 'offline',
  },
});

ماذا لو خرج المستخدم من الصفحة بسبب عدم الاتصال بالإنترنت، قبل عودة الاتصال بالإنترنت؟ على الرغم من أنّ هذا الإجراء يؤدي عادةً إلى إيقاف مشغّل الخدمات مؤقتًا، لأنّه لا يمكنه إرسال البيانات عند عودة الاتصال، تستخدم وحدة "إحصاءات Google" في Workbox واجهة برمجة التطبيقات Background Sync API. ترسل ميزة "المزامنة في الخلفية" بيانات الإحصاءات عند عودة الاتصال، حتى إذا أغلق المستخدم علامة التبويب أو المتصفّح.

ومع ذلك، هناك عيب واحد: على الرغم من أنّ هذا يجعل التتبُّع الحالي متاحًا بلا إنترنت، فمن المرجّح ألا تظهر لك الكثير من البيانات ذات الصلة إلى أن يتم تنفيذ وضع عدم الاتصال بالإنترنت الأساسي. سيظل المستخدمون يغادرون موقعك بسرعة عندما ينقطع الاتصال. ولكن يمكنك الآن على الأقل قياس ذلك وتحديده من خلال مقارنة متوسط مدة الجلسة وتفاعل المستخدمين الذين تم تطبيق سمة "بلا إنترنت" عليهم مع المستخدمين العاديين.

تطبيقات الصفحة الواحدة (SPA) و"التحميل الكسول"

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

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

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

import { setCatchHandler } from 'workbox-routing';

setCatchHandler(({ event }) => {
  // https://developer.mozilla.org/docs/Web/API/Client/postMessage
  event.waitUntil(async function () {
    // Exit early if we don't have access to the client.
    // Eg, if it's cross-origin.
    if (!event.clientId) return;

    // Get the client.
    const client = await clients.get(event.clientId);
    // Exit early if we don't get the client.
    // Eg, if it closed.
    if (!client) return;

    // Send a message to the client.
    client.postMessage({
      action: "network_fail",
      url: event.request.url,
      destination: event.request.destination
    });

    return Response.error();

  }());
});

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

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

import { registerRoute } from 'workbox-routing';
import { NetworkOnly } from 'workbox-strategies';

const networkOnly = new NetworkOnly();
registerRoute(
  new RegExp('https:\/\/example\.com\/products\/.+'),
  async (params) => {
    try {
      // Attempt a network request.
      return await networkOnly.handle(params);
    } catch (error) {
      // If it fails, report the error.
      const event = params.event;
      if (!event.clientId) return;
      const client = await clients.get(event.clientId);
      if (!client) return;

      client.postMessage({
        action: "network_fail",
        url: event.request.url,
        destination: "products"
      });

      return Response.error();
    }
  }
);

كخطوة أخيرة، يجب أن تستمع الصفحة إلى الحدث message، وأن ترسل إشارة الإحصاءات. مرة أخرى، تأكَّد من تخزين طلبات الإحصاءات التي تحدث بلا إنترنت مؤقتًا ضمن مشغّل الخدمات. كما ذكرنا سابقًا، عليك إعداد المكوّن الإضافي workbox-google-analytics لخدمة دعم "إحصاءات Google‏" المضمَّنة.

يستخدم المثال التالي "إحصاءات Google"، ولكن يمكن تطبيقه بالطريقة نفسها مع مقدّمي خدمات الإحصاءات الآخرين.

if ("serviceWorker" in navigator) {
  // ... SW registration here

  // track offline error events
  navigator.serviceWorker.addEventListener("message", event => {
    if (gtag && event.data && event.data.action === "network_fail") {
      gtag("event", "network_fail", {
        event_category: event.data.destination,
        // event_label: event.data.url,
        // value: event.data.value
      });
    }
  });
}

سيؤدي ذلك إلى تتبُّع عمليات تحميل الموارد التي تعذّر إجراؤها في "إحصاءات Google"، حيث يمكن تحليلها باستخدام التقارير. يمكن استخدام الإحصاءات المستخلَصة لتحسين التخزين المؤقت لمشغّل الخدمات ومعالجة الأخطاء بشكل عام، ما يجعل الصفحة أكثر فعالية وموثوقية في ظل ظروف الشبكة غير المستقرة.

الخطوات التالية

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

ننصحك بإعداد عملية التتبُّع الكاملة، ثم توسيع نطاق إمكاناتك بلا إنترنت بشكل متكرر، مع التركيز على التتبُّع. ابدأ بصفحة خطأ بلا إنترنت. يمكنك إنشاء هذه الصفحة بسهولة باستخدام Workbox، وهي من أفضل الممارسات المتعلّقة بتجربة المستخدم، وتُعدّ مشابهة لصفحات الخطأ 404 المخصّصة. بعد ذلك، يمكنك العمل على الاحتياطيات الأكثر تقدّمًا في وضع عدم الاتصال بالإنترنت، وأخيرًا على المحتوى غير المتاح على الويب. تأكَّد من الإعلان عن ذلك وشرحه للمستخدمين بشكل جيد، وستلاحظ زيادة في الاستخدام. ففي النهاية، ينقطع اتصال الجميع بالإنترنت من حين لآخر.

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