زمان‌بندی کاربر - ردیابی وب (ga.js)

این سند یک راهنمای جامع در مورد نحوه استفاده از روش _trackTiming ارائه می دهد.

معرفی

مطالعات نشان داده اند که کاهش زمان بارگذاری یک صفحه، تجربه کلی کاربر از یک سایت را بهبود می بخشد. Google Analytics تعدادی گزارش قدرتمند دارد که به طور خودکار زمان بارگذاری صفحه را ردیابی می کند. اما اگر بخواهید زمان بارگذاری یک منبع خاص را ردیابی کنید چه؟

به عنوان مثال، آیا بارگیری یک کتابخانه محبوب جاوا اسکریپت بیش از حد طول می کشد و تجربه سایت را برای کاربران خاصی کاهش می دهد؟

زمان‌بندی کاربر به شما امکان می‌دهد با ارائه یک روش بومی برای ردیابی یک دوره زمانی در Google Analytics به این سؤال پاسخ دهید.

برای دیدن یک نمونه کار، کد نمونه زمان‌بندی کاربر را بررسی کنید.

تنظیم زمان بندی کاربر

برای جمع‌آوری داده‌های زمان‌بندی کاربر، باید از روش _trackTiming استفاده کنید، که داده‌های زمانی را به Google Analytics ارسال می‌کند.

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

جایی که پارامترها نشان دهنده:

پارامتر ارزش ضروری خلاصه
category string آره رشته ای برای دسته بندی تمام متغیرهای زمان بندی کاربر در گروه های منطقی برای اهداف گزارش دهی آسان تر. به عنوان مثال، اگر زمان بارگذاری آن کتابخانه جاوا اسکریپت خاص را ردیابی می کنید، ممکن است از ارزش jQuery استفاده کنید.
variable string آره رشته ای برای نشان دادن نام عمل منبعی که ردیابی می شود. برای مثال، اگر می‌خواهید زمان بارگیری کتابخانه جاوا اسکریپت jQuery را ردیابی کنید، ممکن است از مقدار JavaScript Load استفاده کنید. توجه داشته باشید که متغیرهای یکسان را می توان در چندین دسته برای ردیابی زمان بندی رویدادهای مشترک این دسته ها مانند Javascript Load و Page Ready Time و غیره استفاده کرد.
time number آره تعداد میلی ثانیه در زمان سپری شده برای گزارش به Google Analytics. اگر بارگذاری کتابخانه jQuery 20 میلی ثانیه طول بکشد، مقدار 20 را ارسال می کنید.
opt_label string نه رشته ای که می تواند برای افزایش انعطاف پذیری در تجسم زمان بندی کاربر در گزارش ها استفاده شود. همچنین می‌توان از برچسب‌ها برای تمرکز روی آزمایش‌های فرعی مختلف برای یک دسته و ترکیب متغیر استفاده کرد. به عنوان مثال، اگر جی کوئری را از شبکه تحویل محتوای Google بارگیری کنیم، از مقدار Google CDN استفاده خواهیم کرد.
opt_sampleRate number نه عددی برای لغو دستی درصد بازدیدکنندگانی که بازدیدهای زمان‌بندی آنها به Google Analytics ارسال می‌شود. پیش‌فرض با همان تعداد جمع‌آوری داده‌های سرعت سایت عمومی تنظیم می‌شود و بر اساس درصد بازدیدکنندگان است. بنابراین اگر می‌خواهید بازدیدهای _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 میلی ثانیه استفاده می شود. پس از اجرای تابع callback، مهر زمانی endTime با ایجاد یک شیء Date جدید بازیابی می شود. سپس تفاوت زمان پایان و شروع برای بدست آوردن زمان صرف شده محاسبه می شود. در نهایت زمان صرف شده به Google Analytics ارسال می شود.

این مثال بی اهمیت است، اما مفهوم چگونگی ردیابی زمان را نشان می دهد. بیایید به یک مثال واقعی تر نگاه کنیم.

بازگشت به بالا

ردیابی زمان صرف شده برای بارگذاری یک منبع جاوا اسکریپت

امروزه، بسیاری از سایت ها شامل کتابخانه های جاوا اسکریپت شخص ثالث یا درخواست داده از طریق اشیاء JSON هستند. در حالی که سایت شما ممکن است این منابع را به سرعت در خانه بارگیری کند، همین منابع ممکن است برای کاربران کشورهای دیگر بسیار کند بارگذاری شوند. این منابع بارگذاری کند می تواند تجربه سایت را برای کاربران بین المللی کاهش دهد.

ویژگی زمان‌بندی سرعت کاربر می‌تواند به شما کمک کند تا زمان بارگیری این منابع را جمع‌آوری و گزارش دهید.

در اینجا یک مثال ساده نشان می دهد که چگونه می توان زمان صرف شده برای عملکردی را که به طور ناهمزمان منابع جاوا اسکریپت را بارگیری می کند، ردیابی کرد:

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 یک تابع ابزار است که منابع جاوا اسکریپت را با ایجاد پویا یک عنصر اسکریپت و پیوست کردن آن به DOM مرورگر بارگیری می کند. این تابع دو پارامتر را می پذیرد: یک URL به عنوان یک رشته و یک تابع callback که پس از بارگیری اسکریپت اجرا می شود.

در داخل loadJs ، یک مهر زمانی شروع در startTime ذخیره می شود. پس از بارگیری منبع، تابع callback اجرا می شود. در تابع callback، مهر زمانی پایان بازیابی شده و برای محاسبه زمان بارگیری منبع جاوا اسکریپت استفاده می شود. این زمان صرف شده با استفاده از روش _trackTiming به Google Analytics ارسال می شود.

بنابراین با تماس:

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

کتابخانه jQuery را به صورت ناهمزمان از شبکه Google Content Delivery بارگیری می کند و پس از تکمیل، تابع callback را اجرا می کند که به نوبه خود زمان بارگذاری منبع را به Google Analytics ارسال می کند.

بازگشت به بالا

کار با زمان بندی های چند کاربره

فرض کنید می خواهید چندین منبع جاوا اسکریپت را با استفاده از کد بالا بارگیری کنید. از آنجایی که متغیر startTime جهانی است، هر بار که شروع یک دوره زمانی را ردیابی می کنید، متغیر startTime بازنویسی می شود و زمان صرف شده اشتباه ایجاد می کند.

بنابراین به عنوان بهترین روش، باید یک نمونه منحصر به فرد از زمان شروع و پایان برای هر منبعی که می خواهید پیگیری کنید، حفظ کنید.

همچنین توجه داشته باشید که دسته و پارامترهای متغیر _trackTiming کدگذاری سختی دارند. بنابراین اگر loadJs برای بارگیری چندین منبع استفاده می کنید، نمی توانید هر منبع را در گزارش های Google Analytics تشخیص دهید.

هر دو مشکل را می توان با ذخیره پارامترهای زمان بندی و _trackTiming در یک شی جاوا اسکریپت حل کرد.

ایجاد یک شی جاوا اسکریپت برای ذخیره زمان بندی کاربر.

در اینجا یک شی جاوا اسکریپت ساده وجود دارد که می تواند برای ذخیره داده های زمان بندی کاربر برای هر منبعی که ردیابی می شود استفاده شود:

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 برای دریافت و ذخیره مهر زمانی آغاز فراخوانی می شود.

در مثال قبلی، تابع callback به راحتی می‌توانست به متغیر startTime دسترسی داشته باشد زیرا جهانی بود. اکنون که startTime بخشی از شی TrackTiming است، ما به راهی برای انتقال این شی از تابع loadJs به تابع callback نیاز داریم.

برای حل این مشکل یک استراتژی اضافه کردن شی TrackTiming به عنوان یک ویژگی به عنصر اسکریپت است. از آنجایی که تابع callback از روش onload اسکریپت اجرا می شود، به callback یک شی رویداد به عنوان پارامتر ارسال می شود. سپس این شی رویداد می تواند برای بازیابی شی اسکریپت اصلی که رویداد را اجرا کرده است، استفاده شود، و آن شی اسکریپت می تواند به نوبه خود برای دسترسی به شی TrackTiming ما استفاده شود.

هنگامی که بتوانیم به شی TrackTiming اصلی خود دسترسی پیدا کنیم، اسکریپت می تواند زمان را پایان دهد و داده ها را ارسال کند.

دموی زنده این نمونه را در سایت نمونه ما مشاهده کنید.

این الگوی افزودن شی TrackTiming به عنوان یک ویژگی به شی مورد ردیابی، برای ردیابی مکانیسم های بارگذاری ناهمزمان دیگر مانند استفاده از شی XMLHttpRequest به خوبی کار می کند.

بازگشت به بالا

ردیابی XMLHttpRequests

یکی دیگر از راه های رایج برای بارگیری ناهمزمان منابع صفحه وب، استفاده از شی 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 Analytics ارسال کرد. مشکل بزرگ ارسال یک مقدار بد بزرگ این است که میانگین و کل معیارهای شما را منحرف می کند.

بنابراین به طور کلی بهترین روش این است که قبل از ارسال داده ها به Google Analytics، مطمئن شوید که زمان صرف شده بیشتر از 0 و کمتر از مدت زمانی است. ما می توانیم روش ارسال 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 Analytics، داده‌ها را با همان نرخ به Google Analytics ارسال می‌کند. به طور پیش فرض این روی 1% از کل بازدیدکنندگان تنظیم شده است.

برای سایت هایی با حجم زیاد ترافیک، پیش فرض باید خوب باشد. اما برای سایت هایی که ترافیک کمتری دارند، می توانید با تنظیم پارامتر نرخ نمونه اختیاری، نرخ نمونه را افزایش دهید. به عنوان مثال:

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

داده های _trackTiming را از 50 درصد بازدیدکنندگان جمع آوری می کند.

همچنین، می‌توانید روش _setSiteSpeedSampleRate را برای تنظیم نرخ نمونه برای همه زمان‌بندی‌های سرعت سایت از جمله روش _trackTiming تنظیم کنید. بنابراین برای مثال:

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

همچنین داده های _trackTiming از 50 درصد بازدیدکنندگان جمع آوری می کند.

معمولاً وقتی پیاده‌سازی Google Analytics را آزمایش و تأیید می‌کنید، ترافیک بسیار کمی به سایتی که آزمایش می‌کنید دارید. بنابراین معمولاً افزایش نرخ نمونه‌برداری به 100٪ در حین آزمایش مفید است.

بازگشت به بالا

ردیابی سایر رویدادهای زمانی

در حالی که تمام مثال های بالا بر استفاده از روش _trackTiming برای پیگیری مدت زمان بارگیری منابع تمرکز دارند، این روش همچنین می تواند برای ردیابی مدت زمان کلی استفاده شود. به عنوان مثال می توانید ردیابی کنید:

  • زمانی که یک بازدیدکننده صرف تماشای یک ویدیو می کند.
  • زمان لازم برای تکمیل یک سطح در یک بازی.
  • زمانی که یک بازدیدکننده صرف خواندن بخشی از یک وب سایت می کند.

در هر یک از این موارد، می‌توانید از همان شی جاوا اسکریپت TimeTracker که در بالا ارائه شد برای ساده‌سازی جمع‌آوری و ارسال زمان صرف شده به Google Analytics استفاده کنید.