এই নথিটি _trackTiming
পদ্ধতিটি কীভাবে ব্যবহার করতে হয় তার একটি ব্যাপক নির্দেশিকা প্রদান করে।
ভূমিকা
গবেষণায় দেখা গেছে যে একটি পৃষ্ঠা লোড হতে সময় কমানো একটি সাইটের সামগ্রিক ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে। গুগল অ্যানালিটিক্সের বেশ কয়েকটি শক্তিশালী প্রতিবেদন রয়েছে যা স্বয়ংক্রিয়ভাবে পৃষ্ঠা লোডের সময় ট্র্যাক করে। কিন্তু আপনি যদি একটি নির্দিষ্ট সংস্থান লোড হতে সময় লাগে তা ট্র্যাক করতে চান?
উদাহরণস্বরূপ, একটি জনপ্রিয় জাভাস্ক্রিপ্ট লাইব্রেরি লোড করা কি খুব বেশি সময় নেয়, নির্দিষ্ট ব্যবহারকারীদের জন্য সাইটের অভিজ্ঞতা হ্রাস করে?
ব্যবহারকারীর সময়গুলি আপনাকে Google Analytics-এ সময়কাল ট্র্যাক করার একটি নেটিভ উপায় প্রদান করে এই প্রশ্নের উত্তর দিতে দেয়৷
একটি কাজের উদাহরণ দেখতে ব্যবহারকারীর সময় নমুনা কোড দেখুন।
ব্যবহারকারীর সময় সেট আপ করা হচ্ছে
ব্যবহারকারীর টাইমিং ডেটা সংগ্রহ করতে, আপনাকে _trackTiming
পদ্ধতি ব্যবহার করতে হবে, যা Google Analytics-এ সময় ডেটা পাঠায়।
_gaq.push([‘_trackTiming’, category, variable, time, opt_label, opt_sample]);
যেখানে পরামিতি প্রতিনিধিত্ব করে:
প্যারামিটার | মান | প্রয়োজন | সারসংক্ষেপ |
---|---|---|---|
category | string | হ্যাঁ | সহজ রিপোর্টিং উদ্দেশ্যে লজিক্যাল গ্রুপে সমস্ত ব্যবহারকারীর সময় ভেরিয়েবলকে শ্রেণীবদ্ধ করার জন্য একটি স্ট্রিং। উদাহরণস্বরূপ, আপনি jQuery এর মান ব্যবহার করতে পারেন যদি আপনি সেই নির্দিষ্ট জাভাস্ক্রিপ্ট লাইব্রেরি লোড করার সময় ট্র্যাক করেন। |
variable | string | হ্যাঁ | ট্র্যাক করা সম্পদের কর্মের নাম নির্দেশ করার জন্য একটি স্ট্রিং। উদাহরণস্বরূপ আপনি JavaScript Load মান ব্যবহার করতে পারেন যদি আপনি jQuery জাভাস্ক্রিপ্ট লাইব্রেরি লোড করতে সময় ট্র্যাক করতে চান। মনে রাখবেন যে Javascript Load এবং Page Ready Time ইত্যাদির মতো এই বিভাগে সাধারণ ইভেন্টের সময় ট্র্যাক করতে একই ভেরিয়েবলগুলি একাধিক বিভাগে ব্যবহার করা যেতে পারে। |
time | number | হ্যাঁ | Google Analytics-এ রিপোর্ট করার জন্য অতিবাহিত সময়ের মধ্যে মিলিসেকেন্ডের সংখ্যা। যদি jQuery লাইব্রেরি লোড হতে 20 মিলিসেকেন্ড সময় নেয়, তাহলে আপনি 20 এর মান পাঠাবেন। |
opt_label | string | না | একটি স্ট্রিং যা প্রতিবেদনগুলিতে ব্যবহারকারীর সময়গুলি কল্পনা করার ক্ষেত্রে নমনীয়তা যোগ করতে ব্যবহার করা যেতে পারে। একই বিভাগ এবং পরিবর্তনশীল সমন্বয়ের জন্য বিভিন্ন উপ-পরীক্ষায় ফোকাস করতেও লেবেল ব্যবহার করা যেতে পারে। উদাহরণস্বরূপ, যদি আমরা Google সামগ্রী বিতরণ নেটওয়ার্ক থেকে jQuery লোড করি, তাহলে আমরা Google CDN এর মান ব্যবহার করব। |
opt_sampleRate | number | না | ম্যানুয়ালি শতকরা ভিজিটর ওভাররাইড করার জন্য একটি সংখ্যা যাদের টাইমিং হিট Google Analytics-এ পাঠানো হয়। ডিফল্টটি সাধারণ সাইটের গতির ডেটা সংগ্রহের মতো একই নম্বরে সেট করা হয় এবং দর্শকদের শতাংশের উপর ভিত্তি করে। তাই আপনি যদি 100% দর্শকদের জন্য _trackTiming হিট ট্র্যাক করতে চান, তাহলে আপনি মান 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
ফাংশনটি 200 মিলিসেকেন্ডে myCallback
ফাংশন কল করতে ব্যবহৃত হয়। একবার কলব্যাক ফাংশনটি কার্যকর করা হলে, একটি নতুন Date
অবজেক্ট তৈরি করে endTime
টাইমস্ট্যাম্প পুনরুদ্ধার করা হয়। তারপর শেষ এবং শুরুর সময়ের পার্থক্য গণনা করা হয় সময় কাটানোর জন্য। অবশেষে ব্যয় করা সময় Google Analytics-এ পাঠানো হয়।
এই উদাহরণটি তুচ্ছ, কিন্তু কীভাবে সময় ট্র্যাক করতে হয় তার ধারণাটি ব্যাখ্যা করে। আরো বাস্তবসম্মত উদাহরণ দেখা যাক.
জাভাস্ক্রিপ্ট রিসোর্স লোড করার সময় ট্র্যাকিং করা
আজ, অনেক সাইট 3য় পক্ষের জাভাস্ক্রিপ্ট লাইব্রেরি বা 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-এ সংযুক্ত করে JavaScript সংস্থানগুলিকে লোড করে। ফাংশন দুটি পরামিতি গ্রহণ করে: একটি স্ট্রিং হিসাবে একটি URL, এবং একটি কলব্যাক ফাংশন যা স্ক্রিপ্ট লোড হয়ে গেলে কার্যকর করা হবে৷
loadJs
ভিতরে, একটি শুরুর টাইমস্ট্যাম্প startTime
এ সংরক্ষণ করা হয়। সম্পদ লোড হয়ে গেলে, কলব্যাক ফাংশনটি কার্যকর করা হয়। কলব্যাক ফাংশনে, শেষ টাইমস্ট্যাম্প পুনরুদ্ধার করা হয় এবং জাভাস্ক্রিপ্ট রিসোর্স লোড করতে সময় নিরূপণ করতে ব্যবহৃত হয়। এই সময় ব্যয় করা _trackTiming
পদ্ধতি ব্যবহার করে Google Analytics-এ পাঠানো হয়।
তাই কল করে:
loadJs(‘//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js’, callback);
Google কন্টেন্ট ডেলিভারি নেটওয়ার্ক থেকে অ্যাসিঙ্ক্রোনাসভাবে jQuery লাইব্রেরি লোড করবে এবং একবার সম্পূর্ণ হয়ে গেলে, কলব্যাক ফাংশনটি চালাবে, যা ঘুরে ঘুরে 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
পদ্ধতিটি শুরুর টাইমস্ট্যাম্প পেতে এবং সংরক্ষণ করতে বলা হয়।
আগের উদাহরণে, কলব্যাক ফাংশন সহজে startTime
ভেরিয়েবল অ্যাক্সেস করতে পারে কারণ এটি বিশ্বব্যাপী ছিল। এখন startTime
TrackTiming
অবজেক্টের অংশ, আমাদের লোডজেস ফাংশন থেকে কলব্যাক ফাংশনে এই অবজেক্টটি পাস করার একটি উপায় প্রয়োজন।
এই সমস্যাটি সমাধান করার জন্য একটি কৌশল হল স্ক্রিপ্ট উপাদানটিতে TrackTiming
অবজেক্টটিকে একটি সম্পত্তি হিসাবে যুক্ত করা। যেহেতু কলব্যাক ফাংশনটি স্ক্রিপ্ট onload
পদ্ধতি থেকে কার্যকর করা হয়, তাই কলব্যাক একটি ইভেন্ট অবজেক্টকে প্যারামিটার হিসাবে পাস করা হয়। এই ইভেন্ট অবজেক্টটি তখন আসল স্ক্রিপ্ট অবজেক্টটি পুনরুদ্ধার করতে ব্যবহার করা যেতে পারে যা ইভেন্টটি ফায়ার করেছে এবং সেই স্ক্রিপ্ট অবজেক্টটি আমাদের 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]);
50% দর্শকদের কাছ থেকে _trackTiming ডেটা সংগ্রহ করবে।
বিকল্পভাবে, আপনি _trackTiming
পদ্ধতি সহ সমস্ত সাইটের গতির সময়ের জন্য নমুনা হার সেট করতে _setSiteSpeedSampleRate
পদ্ধতি সেট করতে পারেন। সুতরাং উদাহরণস্বরূপ:
_gaq.push([‘_setSiteSpeedSampleRate’, 50]);
এছাড়াও 50% দর্শকদের কাছ থেকে _trackTiming
ডেটা সংগ্রহ করবে।
সাধারণত আপনি যখন একটি Google Analytics বাস্তবায়ন পরীক্ষা করেন এবং যাচাই করেন তখন আপনি যে সাইটটি পরীক্ষা করছেন সেখানে খুব কম ট্রাফিক থাকে। তাই পরীক্ষার সময় নমুনার হার 100% বৃদ্ধি করা সাধারণত কার্যকর।
অন্যান্য সময় ঘটনা ট্র্যাকিং
যদিও উপরের সমস্ত উদাহরণগুলি _trackTiming
পদ্ধতি ব্যবহার করে সংস্থানগুলি লোড করতে কতক্ষণ সময় নেয় তা ট্র্যাক করার উপর ফোকাস করে, এই পদ্ধতিটি সাধারণ সময়কাল ট্র্যাক করতেও ব্যবহার করা যেতে পারে। উদাহরণস্বরূপ আপনি ট্র্যাক করতে পারেন:
- একজন দর্শক ভিডিও দেখার জন্য যে সময় ব্যয় করেন।
- একটি গেমের একটি স্তর সম্পূর্ণ করতে যে সময় লাগে৷
- একটি ওয়েবসাইটের একটি অংশ পড়ার সময় একজন দর্শক ব্যয় করে।
এই প্রতিটি ক্ষেত্রে আপনি Google Analytics-এ অতিবাহিত ডেটা সংগ্রহ এবং পাঠানো সহজ করতে উপরে উপস্থাপিত একই TimeTracker
JavaScript অবজেক্ট পুনরায় ব্যবহার করতে পারেন।