उपयोगकर्ता समय - वेब ट्रैकिंग (ga.js)

इस दस्तावेज़ में, _trackTiming तरीके का इस्तेमाल करने के बारे में पूरी जानकारी दी गई है.

शुरुआती जानकारी

कई स्टडी से पता चला है कि पेज को लोड होने में कम समय लगता है. इससे, साइट इस्तेमाल करने वाले लोगों को बेहतर अनुभव मिलता है. Google Analytics में ऐसी कई बेहतरीन रिपोर्ट हैं जो पेज लोड होने के समय को अपने-आप ट्रैक करती हैं. हालांकि, अगर आपको किसी खास रिसॉर्स को लोड होने में लगने वाले समय को ट्रैक करना हो, तो क्या करना होगा?

उदाहरण के लिए, क्या किसी लोकप्रिय JavaScript लाइब्रेरी को लोड होने में बहुत ज़्यादा समय लगता है, जिससे कुछ उपयोगकर्ताओं का साइट अनुभव खराब हो जाता है?

उपयोगकर्ता समय की मदद से, इस सवाल का जवाब दिया जा सकता है. इससे आपको Google Analytics में किसी समयावधि को ट्रैक करने का स्थानीय तरीका मिलता है.

कामका उदाहरण देखने के लिए, उपयोगकर्ता समय का सैंपल कोड देखें.

उपयोगकर्ता समय सेट अप करना

उपयोगकर्ता समय से जुड़ा डेटा इकट्ठा करने के लिए, आपको _trackTiming तरीका इस्तेमाल करना होगा, जो Google Analytics को समय का डेटा भेजता है.

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

जहां पैरामीटर दिखाते हैं:

पैरामीटर वैल्यू ज़रूरी है खास जानकारी
category string हाँ रिपोर्टिंग को आसान बनाने के लिए, उपयोगकर्ता समय वाले सभी वैरिएबल को लॉजिकल ग्रुप में बांटने की स्ट्रिंग. उदाहरण के लिए, अगर किसी JavaScript लाइब्रेरी को लोड होने में लगे समय को ट्रैक किया जा रहा था, तो jQuery वैल्यू का इस्तेमाल किया जा सकता है.
variable string हाँ ट्रैक किए जा रहे रिसॉर्स की कार्रवाई का नाम दिखाने वाली स्ट्रिंग. उदाहरण के लिए, अगर jQuery JavaScript लाइब्रेरी को लोड होने में लगने वाले समय को ट्रैक करना है, तो JavaScript Load की वैल्यू का इस्तेमाल किया जा सकता है. ध्यान दें कि एक जैसे वैरिएबल का इस्तेमाल कई कैटगरी में किया जा सकता है. इससे किसी इवेंट के समय को ट्रैक किया जा सकता है. यह इवेंट इन कैटगरी, जैसे कि Javascript Load और Page Ready Time वगैरह में आम तौर पर इस्तेमाल होता है.
time number हाँ Google Analytics को रिपोर्ट करने में बीते मिलीसेकंड की संख्या. अगर jQuery लाइब्रेरी को लोड होने में 20 मिलीसेकंड लगे, तो आपको 20 की वैल्यू भेजनी होगी.
opt_label string no इस स्ट्रिंग का इस्तेमाल करके, रिपोर्ट में उपयोगकर्ता टाइम को आसानी से विज़ुअलाइज़ किया जा सकता है. लेबल का इस्तेमाल एक ही कैटगरी और वैरिएबल के कॉम्बिनेशन के लिए, अलग-अलग सब-एक्सपेरिमेंट पर फ़ोकस करने के लिए भी किया जा सकता है. उदाहरण के लिए, अगर हमने Google कॉन्टेंट डिलीवरी नेटवर्क से jQuery लोड किया है, तो हम Google CDN की वैल्यू का इस्तेमाल करेंगे.
opt_sampleRate number no यह संख्या, वेबसाइट पर आने वाले उन लोगों के प्रतिशत को मैन्युअल तरीके से बदल देती है जिनके टाइमिंग हिट 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 फ़ंक्शन का इस्तेमाल, myCallback फ़ंक्शन को 200 मिलीसेकंड में कॉल करने के लिए किया जाता है. कॉलबैक फ़ंक्शन लागू होने के बाद, नया Date ऑब्जेक्ट बनाकर, endTime टाइमस्टैंप वापस लाया जाता है. इसके बाद, खत्म होने और शुरू होने के समय के बीच के अंतर का हिसाब लगाकर, इसे कैलकुलेट किया जाता है. आखिर में बिताया गया समय Google Analytics को भेज दिया जाता है.

यह उदाहरण आसान है, लेकिन इसमें समय को ट्रैक करने का तरीका बताता है. आइए, एक वास्तविक उदाहरण पर नज़र डालते हैं.

वापस सबसे ऊपर जाएं

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 के संसाधनों को लोड करता है. फ़ंक्शन दो पैरामीटर स्वीकार करता है: यूआरएल को स्ट्रिंग के तौर पर स्वीकार किया जाता है. इसके अलावा, एक कॉलबैक फ़ंक्शन भी स्वीकार किया जाता है जो स्क्रिप्ट लोड होने पर लागू होता है.

loadJs के अंदर, शुरू होने का टाइमस्टैंप startTime में सेव है. संसाधन लोड होने के बाद, कॉलबैक फ़ंक्शन शुरू हो जाता है. कॉलबैक फ़ंक्शन में, खत्म होने के टाइमस्टैंप को वापस लाया जाता है. साथ ही, इसका इस्तेमाल JavaScript संसाधन को लोड करने में लगे समय का हिसाब लगाने के लिए किया जाता है. Google Analytics को भेजा गया यह समय, _trackTiming तरीके का इस्तेमाल करके भेजा जाता है.

इसलिए, कॉल करने पर:

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

Google कॉन्टेंट डिलीवरी नेटवर्क से jQuery लाइब्रेरी को एसिंक्रोनस रूप से लोड करेगा. इसके पूरा होने पर, कॉलबैक फ़ंक्शन चलाएगा. इससे Google Analytics को रिसॉर्स के लोड होने में लगने वाला समय पता चल जाएगा.

वापस सबसे ऊपर जाएं

कई उपयोगकर्ता समय के साथ काम करना

मान लें कि आपको ऊपर दिए गए कोड का इस्तेमाल करके, कई JavaScript संसाधन लोड करने हैं. startTime वैरिएबल ग्लोबल होता है. इसलिए, जब भी किसी समयावधि की शुरुआत को ट्रैक किया जाएगा, तब startTime वैरिएबल ओवरराइट हो जाएगा और गलत समय जनरेट होगा.

इसलिए, सबसे सही तरीका यह है कि आपको हर उस संसाधन के शुरू और खत्म होने के समय का एक खास इंस्टेंस मैनेज करना होगा जिसे आपको ट्रैक करना है.

यह भी ध्यान रखें कि _trackTiming के लिए कैटगरी और वैरिएबल पैरामीटर हार्ड कोड किए गए हैं. इसलिए, अगर एक से ज़्यादा संसाधन लोड करने के लिए loadJs का इस्तेमाल किया जाता है, तो Google Analytics की रिपोर्ट में हर संसाधन को अलग नहीं किया जा सकेगा.

JavaScript ऑब्जेक्ट में समय और _trackTiming पैरामीटर को स्टोर करके, दोनों सवालों को हल किया जा सकता है.

उपयोगकर्ता समय सेव करने के लिए 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 ऑब्जेक्ट का हिस्सा है. इसलिए, हमें इस ऑब्जेक्ट को loadJs फ़ंक्शन से कॉलबैक फ़ंक्शन में पास करने के लिए, एक तरीका चाहिए.

इस समस्या को हल करने के लिए एक रणनीति यह है कि TrackTiming ऑब्जेक्ट को स्क्रिप्ट एलिमेंट में प्रॉपर्टी के तौर पर जोड़ा जाए. कॉलबैक फ़ंक्शन को स्क्रिप्ट onload तरीके से चलाया जाता है, इसलिए कॉलबैक, इवेंट ऑब्जेक्ट को पैरामीटर के तौर पर पास करता है. इसके बाद, इस इवेंट ऑब्जेक्ट का इस्तेमाल करके, इवेंट को ट्रिगर करने वाले ओरिजनल स्क्रिप्ट ऑब्जेक्ट को वापस पाया जा सकता है. साथ ही, उस स्क्रिप्ट ऑब्जेक्ट का इस्तेमाल करके, हमारे 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]);

वेबसाइट पर आने वाले 50% लोगों से _trackTiming डेटा इकट्ठा किया जाएगा.

इसके अलावा, _setSiteSpeedSampleRate तरीके को भी सेट किया जा सकता है, ताकि साइट की सभी स्पीड के लिए सैंपल रेट सेट किया जा सके. इसमें _trackTiming वाला तरीका भी शामिल है. उदाहरण के लिए:

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

वेबसाइट पर आने वाले 50% लोगों से भी _trackTiming का डेटा इकट्ठा किया जाएगा.

आम तौर पर, जब Google Analytics के लागू होने की जांच और पुष्टि की जाती है, तो उस साइट पर बहुत कम ट्रैफ़िक होता है जिसकी आपको जांच करनी है. इसलिए, आम तौर पर जांच के दौरान सैंपल रेट को 100% तक बढ़ाना मददगार होता है.

वापस सबसे ऊपर जाएं

अन्य इवेंट की ट्रैकिंग

ऊपर दिए गए सभी उदाहरण में, _trackTiming तरीके का इस्तेमाल करके यह ट्रैक करने पर फ़ोकस किया गया है कि संसाधन लोड होने में कितना समय लगता है. हालांकि, इस तरीके से, किसी सामान्य समयसीमा को भी ट्रैक किया जा सकता है. उदाहरण के लिए, इन्हें ट्रैक किया जा सकता है:

  • किसी विज़िटर द्वारा कोई वीडियो देखने में बिताया गया समय.
  • किसी गेम के किसी लेवल को पूरा करने में लगने वाला समय.
  • वेबसाइट पर आने वाला व्यक्ति, किसी वेबसाइट के किसी सेक्शन को पढ़ने में कितना समय बिताता है.

इन सभी मामलों में, ऊपर दिए गए TimeTracker JavaScript ऑब्जेक्ट का फिर से इस्तेमाल किया जा सकता है. इससे, डेटा को इकट्ठा करने और उसे Google Analytics को भेजने में आसानी होती है.