इस ट्यूटोरियल में, आपके एक्सटेंशन के इस्तेमाल को ट्रैक करने के लिए, Google Analytics के इस्तेमाल के बारे में बताया गया है. अगर आप कोई प्लैटफ़ॉर्म ऐप्लिकेशन बना रहे हैं, तो ऐप्लिकेशन के लिए Analytics देखें, क्योंकि ऐप्लिकेशन पर एक्सटेंशन की पाबंदियां अलग होती हैं.
ज़रूरी शर्तें
यह ट्यूटोरियल चाहता है कि आपको Google Chrome के एक्सटेंशन लिखने के बारे में कुछ पता हो. अगर आपको एक्सटेंशन लिखने के बारे में जानकारी चाहिए, तो कृपया शुरुआती निर्देश पढ़ें.
अपने एक्सटेंशन को ट्रैक करने के लिए, आपको Google Analytics खाता सेट अप करना होगा. ध्यान दें कि खाता सेट अप करते समय, वेबसाइट के यूआरएल फ़ील्ड में किसी भी वैल्यू का इस्तेमाल किया जा सकता है. ऐसा इसलिए, क्योंकि आपके एक्सटेंशन का अपना यूआरएल नहीं होगा.
ट्रैकिंग कोड इंस्टॉल करना
अगर मौजूदा पेज https:// प्रोटोकॉल का इस्तेमाल करके लोड किया गया था, तो स्टैंडर्ड Google Analytics ट्रैकिंग कोड स्निपेट, एसएसएल से सुरक्षित किए गए यूआरएल से ga.js नाम की फ़ाइल फ़ेच करता है. Chrome एक्सटेंशन और
ऐप्लिकेशन में सिर्फ़ ga.js के एसएसएल से सुरक्षित किए गए वर्शन का इस्तेमाल किया जा सकता है. असुरक्षित एचटीटीपी पर ga.js को लोड करने की अनुमति Chrome की डिफ़ॉल्ट कॉन्टेंट की सुरक्षा नीति में नहीं है. Chrome एक्सटेंशन को chrome-extension:// स्कीमा में होस्ट किया जाता है. इसलिए, सामान्य ट्रैकिंग स्निपेट में थोड़ा बदलाव करना पड़ता है, ताकि ga.js को डिफ़ॉल्ट जगह के बजाय https://ssl.google-analytics.com/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']); कोड किसी एक पेज व्यू को ट्रैक करेगा. इस कोड का इस्तेमाल आपके एक्सटेंशन के किसी भी पेज
पर किया जा सकता है. जब इसे किसी बैकग्राउंड पेज पर रखा जाता है, तब हर ब्राउज़र सेशन में एक बार व्यू रजिस्टर किया जाएगा. जब भी पॉप-अप को खोला जाता है, तो यह एक बार इसे एक व्यू के तौर पर रजिस्टर करता है.
अपने एक्सटेंशन में हर पेज के लिए पेज व्यू डेटा देखकर, यह अनुमान लगाया जा सकता है कि हर ब्राउज़र सेशन में आपके उपयोगकर्ता कितनी बार आपके एक्सटेंशन के साथ इंटरैक्ट करते हैं:
आंकड़ों के अनुरोधों पर नज़र रखना
यह पक्का करने के लिए कि आपके एक्सटेंशन से ट्रैकिंग डेटा Google Analytics को भेजा जा रहा है, आप डेवलपर टूल विंडो में अपने एक्सटेंशन के पेजों की जांच कर सकते हैं (ज़्यादा जानकारी के लिए डीबगिंग ट्यूटोरियल देखें). जैसा कि नीचे दिखाया गया है, अगर सब कुछ सही तरीके से सेट अप किया गया है, तो आपको __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 के इवेंट ट्रैकिंग की खास जानकारी देने वाले पेज पर, आपको यह मेट्रिक दिखेगी कि हर बटन को कितनी बार क्लिक किया गया है:
इस तरीके का इस्तेमाल करके, यह देखा जा सकता है कि आपके एक्सटेंशन के कौनसे हिस्से कम या ज़्यादा इस्तेमाल किए गए हैं. इस जानकारी से, यूज़र इंटरफ़ेस (यूआई) को फिर से डिज़ाइन करने या उसे लागू करने के लिए अतिरिक्त फ़ंक्शन तय करने में मदद मिल सकती है.
इवेंट ट्रैकिंग का इस्तेमाल करने के बारे में ज़्यादा जानकारी के लिए, Google Analytics डेवलपर दस्तावेज़ देखें.
नमूना कोड
इन तकनीकों का इस्तेमाल करने वाले एक्सटेंशन का उदाहरण, सैंपल डेटा स्टोर करने की जगह में उपलब्ध है.