این سند یک راهنمای جامع در مورد نحوه استفاده از روش _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 استفاده کنید.