ट्यूटोरियल: Google Analytics

इस ट्यूटोरियल में आपके एक्सटेंशन के उपयोग को ट्रैक करने के लिए Google Analytics का उपयोग करने के बारे में बताया गया है. अगर आप प्लैटफ़ॉर्म ऐप्लिकेशन डेवलप करते समय, ऐप्लिकेशन के लिए Analytics देखें, क्योंकि ऐप्लिकेशन की पाबंदियां एक्सटेंशन.

ज़रूरी शर्तें

इस ट्यूटोरियल की उम्मीद है कि आपको Google Chrome के लिए एक्सटेंशन लिखने के बारे में कुछ जानकारी है. अगर आपको एक्सटेंशन लिखने के तरीके के बारे में जानकारी चाहिए, तो कृपया शुरू करने का ट्यूटोरियल पढ़ें.

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

Analytics का सेटअप, जिसमें Chrome एक्सटेंशन की जानकारी भरी गई हो

ट्रैकिंग कोड इंस्टॉल करना

मानक Google Analytics ट्रैकिंग कोड स्निपेट ga.js नाम की फ़ाइल को किसी SSL से फ़ेच करता है सुरक्षित यूआरएल, अगर मौजूदा पेज को https:// प्रोटोकॉल का इस्तेमाल करके लोड किया गया हो. Chrome एक्सटेंशन और ऐप्लिकेशन केवल ga.js के SSL-सुरक्षित वर्शन का उपयोग कर सकते हैं. ga.js ज़्यादा असुरक्षित लोड हो रहा है Chrome की डिफ़ॉल्ट कॉन्टेंट की सुरक्षा नीति के तहत एचटीटीपी को अस्वीकार किया जाता है. साथ ही, यह तथ्य भी कि Chrome एक्सटेंशन chrome-extension:// स्कीमा के तहत होस्ट किए जाते हैं. इसलिए, आपको सीधे https://ssl.google-analytics.com/ga.js से ga.js पाने के लिए सामान्य ट्रैकिंग स्निपेट पर क्लिक करें.

नीचे एसिंक्रोनस ट्रैकिंग API के लिए बदला गया स्निपेट दिया गया है (बदलाव करने वाली लाइन बोल्ड की गई है):

(function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = 'https://ssl.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

आपको यह भी सुनिश्चित करना होगा कि आपके एक्सटेंशन के पास डिफ़ॉल्ट सामग्री सुरक्षा नीति है. आपके manifest.json में नीति की परिभाषा ऐसी दिख सकती है:

{
  ...,
  "content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'",
  ...
}

यहां एक पॉप-अप पेज (popup.html) दिया गया है, जो किसी बाहरी डोमेन के ज़रिए एसिंक्रोनस ट्रैकिंग कोड लोड करता है JavaScript फ़ाइल (popup.js) और सिंगल पेज व्यू को ट्रैक करती है:

<!DOCTYPE html>
<html>
 <head>
   ...
  <script src="popup.js"></script>
 </head>
 <body>
   ...
 </body>
</html>

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
_gaq.push(['_trackPageview']);

(function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = 'https://ssl.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

ध्यान रखें कि UA-XXXXXXXX-X स्ट्रिंग की जगह आपके Google Analytics का इस्तेमाल करना चाहिए खाता नंबर डालें.

ट्रैकिंग पेज व्यू

_gaq.push(['_trackPageview']); कोड एक पेज व्यू को ट्रैक करेगा. इस कोड का इस्तेमाल इन चीज़ों के लिए किया जा सकता है अपने एक्सटेंशन के किसी भी पेज पर जाएं. अगर किसी व्यू को बैकग्राउंड पेज पर लगाया जाता है, तो उसे एक बार में एक बार ब्राउज़र सत्र. किसी पॉप-अप पर प्लेसमेंट जोड़ने पर, हर बार पॉप-अप होने पर, व्यू रजिस्टर होगा खोला गया.

अपने एक्सटेंशन में हर पेज के पेज व्यू डेटा को देखकर, आप यह अंदाज़ा लगा सकते हैं कि कितने कितनी बार आपके उपयोगकर्ता हर ब्राउज़र सत्र में आपके एक्सटेंशन के साथ इंटरैक्ट करते हैं:

किसी साइट के टॉप कॉन्टेंट का Analytics व्यू

आंकड़ों के अनुरोधों की निगरानी करना

यह पक्का करने के लिए कि आपके एक्सटेंशन से ट्रैकिंग डेटा Google Analytics को भेजा जा रहा है, डेवलपर टूल विंडो में अपने एक्सटेंशन के पेज (ज़्यादा जानकारी के लिए डीबग करने का ट्यूटोरियल देखें जानकारी). जैसा कि नीचे दिए गए डायग्राम में दिखाया गया है, आपको __utm.gif सबमिट करें.

डेवलपर टूल विंडो, जिसमें __utm.gif अनुरोध दिख रहा है

ट्रैकिंग इवेंट

इवेंट ट्रैकिंग को कॉन्फ़िगर करके, यह पता लगाया जा सकता है कि आपके उपयोगकर्ता एक्सटेंशन के किन हिस्सों से इंटरैक्ट करते हैं चुनें. उदाहरण के लिए, अगर आपके पास तीन बटन हैं, तो उपयोगकर्ता इन पर क्लिक कर सकते हैं:

<button id='button1'>Button 1</button>
<button id='button2'>Button 2</button>
<button id='button3'>Button 3</button>

Google Analytics को क्लिक इवेंट भेजने वाला फ़ंक्शन लिखें:

function trackButton(e) {
  _gaq.push(['_trackEvent', e.target.id, 'clicked']);
};

साथ ही, इसे हर बटन के क्लिक के लिए इवेंट हैंडलर के तौर पर इस्तेमाल करें:

var buttons = document.querySelectorAll('button');
for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', trackButtonClick);
}

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

किसी साइट के इवेंट ट्रैकिंग डेटा का Analytics व्यू

इस तरीके का इस्तेमाल करके, यह देखा जा सकता है कि आपके एक्सटेंशन के कौनसे हिस्से कम या ज़्यादा इस्तेमाल किए गए हैं. यह इस जानकारी की मदद से, यूज़र इंटरफ़ेस (यूआई) को फिर से डिज़ाइन करने या उसे लागू करने के लिए अतिरिक्त सुविधाओं के बारे में फ़ैसले लिए जा सकते हैं.

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

नमूना कोड

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