أوقات المستخدم - تتبُّع الويب (ga.js)

يقدّم هذا المستند دليلاً شاملاً حول كيفية استخدام طريقة _trackTiming.

مقدمة

أظهرت الدراسات أنّ تقليل الوقت الذي تستغرقه الصفحة لتحميلها يحسّن تجربة المستخدم بشكل عام في الموقع الإلكتروني. تتضمّن "إحصاءات Google" عددًا من التقارير الفعّالة التي تتتبّع وقت تحميل الصفحة تلقائيًا. ولكن ماذا لو كنت تريد تتبّع الوقت الذي يستغرقه تحميل مورد معيّن؟

على سبيل المثال، هل يستغرق تحميل مكتبة JavaScript شائعة وقتًا طويلاً، ما يؤدي إلى تراجع تجربة بعض المستخدمين على الموقع الإلكتروني؟

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

للاطّلاع على مثال عملي، يمكنك الاطّلاع على نموذج الرمز لتوقيتات المستخدم.

إعداد توقيتات المستخدم

لجمع بيانات توقيت المستخدم، عليك استخدام طريقة _trackTiming التي ترسِل بيانات الوقت إلى "إحصاءات Google".

_gaq.push([‘_trackTiming’, category, variable, time, opt_label, opt_sample]);

أين تمثل المعلمات:

المَعلمة القيمة مطلوبة ملخّص
category string نعم سلسلة لتصنيف جميع متغيّرات توقيت المستخدم في مجموعات منطقية لأغراض إعداد التقارير بشكل أسهل على سبيل المثال، يمكنك استخدام القيمة jQuery إذا كنت تتتبّع الوقت المستغرق لتحميل مكتبة JavaScript بالتحديد.
variable string نعم سلسلة للإشارة إلى اسم إجراء المورد الذي يتم تتبّعه. على سبيل المثال، يمكنك استخدام القيمة JavaScript Load إذا أردت تتبُّع الوقت الذي يستغرقه تحميل مكتبة JavaScript jQuery. يُرجى العلم أنّه يمكن استخدام المتغيّرات نفسها في عدة فئات لتتبُّع توقيتات حدث شائع بين هذه الفئات، مثل Javascript Load وPage Ready Time وما إلى ذلك.
time number نعم عدد المللي ثانية في الوقت المنقضي حتى يتم إعداد التقارير لإرسالها إلى "إحصاءات Google". إذا استغرق تحميل مكتبة jQuery 20 ملي ثانية، سيتم إرسال القيمة 20.
opt_label string لا سلسلة يمكن استخدامها لإضافة مرونة في عرض توقيتات المستخدم في التقارير. يمكن أيضًا استخدام التصنيفات للتركيز على تجارب فرعية مختلفة لمجموعة القيم نفسها والمتغيّرات نفسها. على سبيل المثال، إذا حمَّلنا jQuery من "شبكة عرض المحتوى من Google"، سنستخدم القيمة Google CDN.
opt_sampleRate number لا رقم يتم تجاهل النسبة المئوية للزوّار الذين يتم إرسال نتائج توقيتهم إلى "إحصاءات Google" يدويًا. يتم ضبط الإعداد التلقائي على الرقم نفسه المستخدَم لجمع بيانات السرعة العامة للموقع الإلكتروني، ويستند كنسبة مئوية من الزوّار. وبالتالي، إذا أردت تتبُّع نتائج _trackTiming بنسبة 100% من الزوّار، يمكنك استخدام القيمة 100. تجدر الإشارة إلى أنّ كل نتيجة تُحتسب ضمن الحد الأقصى العام وهو 500 نتيجة لكل جلسة.

الرجوع إلى أعلى الصفحة

تتبُّع الوقت المستغرَق

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

إليك مثال تافه:

var startTime = new Date().getTime();

setTimeout(myCallback, 200);

function myCallback(event) {

  var endTime = new Date().getTime();
  var timeSpent = endTime - startTime;

  _gaq.push(['_trackTiming', 'Test', 'callback_timeout', timeSpent, 'animation']);
}

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

هذا المثال تافه، ولكنه يوضح مفهوم كيفية تتبع الوقت. لنلقِ نظرة على مثال أكثر واقعية.

الرجوع إلى أعلى الصفحة

تتبُّع الوقت المستغرَق في تحميل مورد JavaScript

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

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

في ما يلي مثال بسيط يوضّح كيفية تتبُّع الوقت المستغرَق في دالة تُحمِّل موارد JavaScript بشكل غير متزامن:

var startTime;

function loadJs(url, callback) {
  var js = document.createElement('script');
  js.async = true;
  js.src = url;
  var s = document.getElementsByTagName('script')[0];

  js.onload = callback;
  startTime = new Date().getTime();

  s.parentNode.insertBefore(js, s);
}

function myCallback(event) {
  var endTime = new Date().getTime();
  var timeSpent = endTime - startTime;
  _gaq.push(['_trackTiming', 'jQuery', 'Load Library', timeSpent, 'Google CDN']);

  // Library has loaded. Now you can use it.
};

لاحظ أن هذا المثال يتشابه إلى حد كبير مع المثال السابق.

في هذا المثال، تُعدّ loadJs إحدى الدوال المساعِدة التي تحمِّل موارد JavaScript من خلال إنشاء عنصر نص برمجي ديناميكيًا وإرفاقه بنموذج العناصر في المستند (DOM) للمتصفح. تقبل الدالة معلَمتين: عنوان URL كسلسلة، ودالة استدعاء سيتم تنفيذها بمجرد تحميل النص البرمجي.

في loadJs، يتم تخزين طابع زمني للبداية في startTime. بعد تحميل المورد، يتم تنفيذ وظيفة معاودة الاتصال. في وظيفة معاودة الاتصال، يتم استرداد الطابع الزمني للانتهاء واستخدامه لحساب الوقت المستغرَق في تحميل مورد JavaScript. ويتم إرسال هذا الوقت المستغرق في "إحصاءات Google" باستخدام طريقة _trackTiming.

لذلك من خلال الاتصال:

loadJs(‘//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js’, callback);

سيتم تحميل مكتبة jQuery بشكل غير متزامن من شبكة عرض المحتوى في Google، إلى جانب تنفيذ وظيفة معاودة الاتصال بعد اكتمالها، والتي تُرسِل بدورها وقت تحميل المورد إلى "إحصاءات Google".

الرجوع إلى أعلى الصفحة

التعامل مع توقيتات المستخدم المتعددة

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

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

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

يمكن حلّ المشكلتَين من خلال تخزين معلَمتَي التوقيت و_trackTiming في كائن JavaScript.

إنشاء كائن JavaScript لتخزين توقيتات المستخدم.

في ما يلي كائن JavaScript بسيط يمكن استخدامه لتخزين بيانات توقيت المستخدم لكل مورد يتم تتبّعه:

function TrackTiming(category, variable, opt_label) {
  this.category = category;
  this.variable = variable;
  this.label = opt_label ? opt_label : undefined;
  this.startTime;
  this.endTime;
  return this;
}

TrackTiming.prototype.startTime = function() {
  this.startTime = new Date().getTime();
  return this;
}

TrackTiming.prototype.endTime = function() {
  this.endTime = new Date().getTime();
  return this;
}

TrackTiming.prototype.send = function() {
  var timeSpent = this.endTime - this.startTime;
  window._gaq.push(['_trackTiming', this.category, this.variable, timeSpent, this.label]);
  return this;
}

يمكننا الآن استخدام هذا الكائن لجعل loadJs متوافقة مع الطلبات المتعددة.

إرسال توقيتات المستخدم المخزنة

بعد أن أصبح لدينا طريقة لتخزين بيانات التوقيت لكل مورد نريد تتبُّعه، إليك طريقة تعديل loadJs لاستخدامه:

var tt = new TrackTiming('jQuery', 'Load Library', 'Google CDN');

loadJs(‘//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js’, myCallback, tt);

function loadJs(url, callback, tt) {
  var js = document.createElement('script');
  js.async = true;
  js.src = url;
  js.onload = callback;
  var s = document.getElementsByTagName('script')[0];

  tt.startTime();
  js.tt = tt;

  s.parentNode.insertBefore(js, s);
}

function myCallback(event) {
  var e = event || window.event;
  var target = e.target ? e.target : e.srcElement;

  target.tt.endTime().send();

  // Library has loaded. Now you can use it.
}

يبدأ الرمز أعلاه بإنشاء كائن TrackTiming جديد حيث يتم تمرير الفئة والمتغير والتصنيف الاختياري إلى الدالة الإنشائية. يتم بعد ذلك تمرير الكائن TrackTiming كمَعلمة إلى الدالة loadJs.

في loadJs، يتم استدعاء طريقة startTime للحصول على الطابع الزمني للبدء وتخزينه.

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

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

بعد أن نتمكن من الوصول إلى كائن TrackTiming الأصلي، يستطيع النص البرمجي إنهاء الوقت وإرسال البيانات.

يمكنك الاطّلاع على عرض توضيحي مباشر لهذا المثال على نماذج الموقع الإلكتروني.

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

الرجوع إلى أعلى الصفحة

تتبُّع طلبات XMLHttp

هناك طريقة أخرى شائعة لتحميل موارد صفحة الويب بشكل غير متزامن هي استخدام الكائن XMLHttpRequest. يمكن أيضًا تتبُّع الوقت المستغرَق لتحميل هذه الموارد باستخدام طريقة _trackTiming والكائن TimeTracker معًا.

إليك مثال على تحميل ملف علامات الاقتباس من الخادم.

var url = ‘//myhost.com/quotes.txt’;
var tt = new TrackTime('xhr demo', 'load quotes');

makeXhrRequest(url, myCallback, tt);

function makeXhrRequest(url, callback, tt) {
  if (window.XMLHttpRequest) {
    var xhr = new window.XMLHttpRequest;
    xhr.open('GET', url, true);
    xhr.onreadystatechange = callback;

    tt.startTime();
    xhr.tt = tt;

    xhr.send();
  }
}

function myCallback(event) {
  var e = event || window.event;
  var target = e.target ? e.target : e.srcElement;

  if (target.readyState == 4) {
    if (target.status == 200) {

      target.tt.endTime().send();

      // Do something with the resource.
    }
  }
}

يبدو هذا المثال مشابهًا حقًا لمثالloadJs. يمكنك الاطّلاع على العرض التوضيحي المباشر هنا.

الرجوع إلى أعلى الصفحة

تجنب إرسال بيانات غير صالحة

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

لذا، من أفضل الممارسات بشكل عام التأكد من أنّ الوقت الذي يتم قضاؤه أكبر من 0 وأقل من فترة زمنية معيّنة، قبل إرسال البيانات إلى "إحصاءات Google". يمكننا تعديل طريقة الإرسال TimeTracker أعلاه لتنفيذ عملية التحقّق التالية:

TrackTiming.prototype.send = function() {
  var timeSpent = this.endTime - this.startTime;

  var hourInMillis = 1000 * 60 * 60;

  if (0 < timeSpent && timeSpent < hourInMillis) {
    window._gaq.push(['_trackTiming', this.category, this.variable, timeSpent, this.label]);
  }

   return this;
}

تجاوز معدّل العيّنة وتصحيح الأخطاء

ترسل الطريقة _trackTiming البيانات إلى "إحصاءات Google" بالمعدّل نفسه فقط لجميع مقاييس سرعة الموقع الإلكتروني التي تجمعها "إحصاءات Google". ويتم ضبط ذلك تلقائيًا على% 1 من جميع الزوّار.

بالنسبة إلى المواقع التي تتلقى عددًا كبيرًا من الزيارات، من المفترض أن يكون الإعداد التلقائي مناسبًا. ولكن بالنسبة إلى المواقع الإلكترونية التي تسجّل عددًا أقل من الزيارات، يمكنك زيادة معدّل العيّنة من خلال ضبط مَعلمة معدّل العيّنة الاختيارية. مثلاً: 

_gaq.push(['_trackTiming', 'jQuery', 'Load Library', timeSpent, 'Google CDN', 50]);

سيتم جمع بيانات _trackTiming من% 50 من الزوار.

بدلاً من ذلك، يمكنك ضبط طريقة _setSiteSpeedSampleRate لضبط معدّل العيّنة لجميع توقيتات سرعة الموقع الإلكتروني، بما في ذلك طريقة _trackTiming. لذلك على سبيل المثال:

_gaq.push([‘_setSiteSpeedSampleRate’, 50]);

سنجمع أيضًا بيانات "_trackTiming" من% 50 من الزوّار.

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

الرجوع إلى أعلى الصفحة

تتبُّع الأحداث الزمنية الأخرى

يركّز كل الأمثلة أعلاه على استخدام طريقة _trackTiming لتتبُّع الوقت الذي يستغرقه تحميل الموارد، ولكن يمكن أيضًا استخدام هذه الطريقة لتتبُّع المُدد الزمنية العامة. على سبيل المثال، يمكنك تتبُّع ما يلي:

  • الوقت الذي يقضيه الزائر في مشاهدة الفيديو.
  • الوقت المستغرق لإكمال مستوى في لعبة.
  • الوقت الذي يقضيه الزائر في قراءة قسم من موقع إلكتروني.

وفي كل حالة من هذه الحالات، يمكنك إعادة استخدام عنصر JavaScript TimeTracker نفسه الموضّح أعلاه لتبسيط عملية جمع الوقت المستغرق في البيانات وإرسالها إلى "إحصاءات Google".