قياس الاستخدام في وضع عدم الاتصال

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

Stephan Giesau

Martin Schierle

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

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

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

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

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

أسلوب أفضل: عامل الخدمة

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

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

googleAnalytics.initialize();

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

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

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

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

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

تطبيقات 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 لفلترة معرّف الموارد المنتظم باستخدام تعبير عادي. إنّ الحلّ الأسهل هو تنفيذ 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 وتُرسِل إشعار إحصاءات Google. مرة أخرى، احرص على تخزين طلبات الإحصاءات التي تتم بلا اتصال بالإنترنت في الخدمة العاملة. كما هو описан سابقًا، عليك إعداد المكوّن الإضافي 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 المخصصة على أي حال. بعد ذلك، شقّ طريقك نحو خطوات احتياطية أكثر تقدّمًا بلا إنترنت، ثم أخيرًا نحو المحتوى الفعلي بلا إنترنت. احرص على الإعلان عن هذه الميزة وشرحها للمستخدمين بشكلٍ جيد، وستلاحظ زيادة في معدّل الاستخدام. بعد كل شيء، يقطع الجميع الاتصال بالإنترنت من حين لآخر.

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

الصورة الرئيسية مقدمة من JC Gellidon على Unsplash.