इस ट्यूटोरियल में बताया गया है कि Google Analytics का इस्तेमाल करके, अपने एक्सटेंशन के इस्तेमाल को कैसे ट्रैक करें. GitHub पर Google Analytics 4 का काम करने वाला सैंपल देखा जा सकता है. इसमें, google-analytics.js में Google Analytics से जुड़े सभी कोड शामिल होते हैं.
ज़रूरी शर्तें
यह ट्यूटोरियल यह मानता है कि आपको Chrome एक्सटेंशन लिखने की जानकारी है. अगर आपको एक्सटेंशन लिखने का तरीका जानना है, तो कृपया शुरुआती निर्देश पढ़ें.
अपने एक्सटेंशन को ट्रैक करने के लिए, आपको Google Analytics 4 खाता भी सेट अप करना होगा. ध्यान दें कि खाता सेट अप करते समय, आपके पास वेबसाइट के यूआरएल फ़ील्ड में दी गई किसी भी वैल्यू का इस्तेमाल करने का विकल्प होगा. ऐसा इसलिए, क्योंकि आपके एक्सटेंशन का अपना कोई यूआरएल नहीं होगा.
Google Analytics मेज़रमेंट प्रोटोकॉल का इस्तेमाल करना
मेनिफ़ेस्ट V3 की वजह से, Chrome एक्सटेंशन को रिमोट से होस्ट किया गया कोड चलाने की अनुमति नहीं है. इसका मतलब है कि आपको ट्रैकिंग एक्सटेंशन इवेंट के लिए, Google Analytics मेज़रमेंट प्रोटोकॉल का इस्तेमाल करना होगा. मेज़रमेंट प्रोटोकॉल की मदद से, एचटीटीपी अनुरोधों के ज़रिए सीधे Google Analytics सर्वर पर इवेंट भेजे जा सकते हैं. इस तरीके का फ़ायदा यह है कि इसकी मदद से अपने एक्सटेंशन में हर जगह से Analytics इवेंट भेजे जा सकते हैं. इसमें सर्विस वर्कर भी शामिल है.
एपीआई क्रेडेंशियल सेट अप करना
सबसे पहले, api_secret और measurement_id पाएं. इन्हें अपने Analytics खाते में पाने का तरीका जानने के लिए, मेज़रमेंट प्रोटोकॉल दस्तावेज़ का पालन करें.
client_id जनरेट करें
दूसरा चरण, किसी खास डिवाइस/उपयोगकर्ता, client_id के लिए यूनीक आइडेंटिफ़ायर जनरेट करना होता है. आईडी तब तक वैसा ही रहना चाहिए, जब तक उपयोगकर्ता के ब्राउज़र पर एक्सटेंशन इंस्टॉल किया गया है. यह एक आर्बिट्रेरी स्ट्रिंग हो सकती है, लेकिन क्लाइंट के लिए यूनीक होनी चाहिए. self.crypto.randomUUID() पर कॉल करके कार्ड जनरेट किया जा सकता है. client_id को chrome.storage.local में सेव करें, ताकि यह पक्का हो सके कि जब तक एक्सटेंशन इंस्टॉल किया हुआ है, तब तक यह वही रहे.
chrome.storage.local का इस्तेमाल करने के लिए, आपकी मेनिफ़ेस्ट फ़ाइल में storage की अनुमति होना ज़रूरी है:
manifest.json:
{
…
"permissions": ["storage"],
…
}
इसके बाद, client_id को सेव करने के लिए chrome.storage.local का इस्तेमाल किया जा सकता है:
async function getOrCreateClientId() {
const result = await chrome.storage.local.get('clientId');
let clientId = result.clientId;
if (!clientId) {
// Generate a unique client ID, the actual value is not relevant
clientId = self.crypto.randomUUID();
await chrome.storage.local.set({clientId});
}
return clientId;
}
आंकड़े वाला इवेंट भेजता है
एपीआई क्रेडेंशियल और client_id की मदद से, fetch अनुरोध के ज़रिए Google Analytics को इवेंट भेजा जा सकता है:
const GA_ENDPOINT = 'https://www.google-analytics.com/mp/collect';
const MEASUREMENT_ID = `G-...`;
const API_SECRET = `...`;
fetch(
`${GA_ENDPOINT}?measurement_id=${MEASUREMENT_ID}&api_secret=${API_SECRET}`,
{
method: 'POST',
body: JSON.stringify({
client_id: await getOrCreateClientId(),
events: [
{
name: 'button_clicked',
params: {
id: 'my-button',
},
},
],
}),
}
);
इससे एक button_clicked इवेंट भेजा जाता है, जो आपकी Google Analytics इवेंट रिपोर्ट में दिखेगा. अगर आपको Google Analytics की रीयल टाइम रिपोर्ट में अपने इवेंट देखने हैं, तो आपको दो अतिरिक्त पैरामीटर देने होंगे: session_id और engagement_time_msec.
सुझाए गए पैरामीटर session_id और engagement_time_msec का इस्तेमाल करें
session_id और engagement_time_msec, Google Analytics मेज़रमेंट प्रोटोकॉल का इस्तेमाल करते समय सुझाए गए पैरामीटर होते हैं, क्योंकि ये रीयल टाइम जैसी स्टैंडर्ड रिपोर्ट में उपयोगकर्ता गतिविधि को दिखाने के लिए ज़रूरी होते हैं.
session_id उस समयावधि के बारे में बताता है जिसके दौरान, उपयोगकर्ता आपके एक्सटेंशन से लगातार इंटरैक्ट करता है. अगर उपयोगकर्ता 30 मिनट तक कोई गतिविधि नहीं करता है, तो सेशन डिफ़ॉल्ट रूप से खत्म हो जाता है. सेशन कितना भी लंबा हो सकता है. इसके लिए कोई सीमा तय नहीं है.
Chrome एक्सटेंशन में, सामान्य वेबसाइटों के उलट, इसमें उपयोगकर्ता सेशन के बारे में साफ़ तौर पर कोई जानकारी नहीं होती. इसलिए, आपको यह तय करना होगा कि आपके एक्सटेंशन में उपयोगकर्ता सेशन का क्या मतलब है. उदाहरण के लिए, हर नए उपयोगकर्ता का इंटरैक्शन एक नया सेशन हो सकता है. ऐसे मामले में, हर इवेंट के साथ एक नया सेशन आईडी जनरेट किया जा सकता है, जैसे कि टाइमस्टैंप का इस्तेमाल करके.
इस उदाहरण में एक तरीका दिखाया गया है, जो किसी भी इवेंट की रिपोर्ट न करने पर 30 मिनट के बाद नया सेशन खत्म कर देगा (इस समय को आपके एक्सटेंशन के उपयोगकर्ता व्यवहार के हिसाब से बेहतर बनाया जा सकता है). उदाहरण में, ब्राउज़र के चलने के दौरान ऐक्टिव सेशन को सेव करने के लिए, chrome.storage.session का इस्तेमाल किया गया है. उस सेशन के साथ जब हम पिछली बार कोई इवेंट ट्रिगर हुए थे. इस तरह, हम यह पता लगा सकते हैं कि ऐक्टिव सेशन की समयसीमा खत्म हो गई है या नहीं:
const SESSION_EXPIRATION_IN_MIN = 30;
async function getOrCreateSessionId() {
// Store session in memory storage
let {sessionData} = await chrome.storage.session.get('sessionData');
// Check if session exists and is still valid
const currentTimeInMs = Date.now();
if (sessionData && sessionData.timestamp) {
// Calculate how long ago the session was last updated
const durationInMin = (currentTimeInMs - sessionData.timestamp) / 60000;
// Check if last update lays past the session expiration threshold
if (durationInMin > SESSION_EXPIRATION_IN_MIN) {
// Delete old session id to start a new session
sessionData = null;
} else {
// Update timestamp to keep session alive
sessionData.timestamp = currentTimeInMs;
await chrome.storage.session.set({sessionData});
}
}
if (!sessionData) {
// Create and store a new session
sessionData = {
session_id: currentTimeInMs.toString(),
timestamp: currentTimeInMs.toString(),
};
await chrome.storage.session.set({sessionData});
}
return sessionData.session_id;
}
इस उदाहरण में, पिछले बटन क्लिक इवेंट के अनुरोध में session_id और engagement_time_msec को जोड़ा गया है. engagement_time_msec के लिए, 100 ms की डिफ़ॉल्ट वैल्यू दी जा सकती है.
const GA_ENDPOINT = "https://www.google-analytics.com/mp/collect";
const MEASUREMENT_ID = `G-...`;
const API_SECRET = `...`;
const DEFAULT_ENGAGEMENT_TIME_IN_MSEC = 100;
fetch(
`${GA_ENDPOINT}?measurement_id=${MEASUREMENT_ID}&api_secret=${API_SECRET}`,
{
method: "POST",
body: JSON.stringify({
client_id: await getOrCreateClientId(),
events: [
{
name: "button_clicked",
params: {
session_id: await this.getOrCreateSessionId(),
engagement_time_msec: DEFAULT_ENGAGEMENT_TIME_IN_MSEC,
id: "my-button",
},
},
],
}),
}
);
Google Analytics की रीयल टाइम रिपोर्ट में, इवेंट इस तरह दिखेगा.
पॉप-अप, साइड पैनल, और एक्सटेंशन पेजों में पेज व्यू को ट्रैक करना
Google Analytics मेज़रमेंट प्रोटोकॉल, पेज व्यू को ट्रैक करने के लिए एक खास page_view इवेंट के साथ काम करता है. इसका इस्तेमाल करके, नए टैब में आपके पॉप-अप पेजों, साइड पैनल या एक्सटेंशन पेज पर आने वाले लोगों को ट्रैक करें. page_view इवेंट के लिए, page_title और page_location पैरामीटर भी ज़रूरी होते हैं. नीचे दिए गए उदाहरण में, एक्सटेंशन पॉप-अप के लिए दस्तावेज़ load इवेंट में पेज व्यू इवेंट को सक्रिय किया गया है.:
popup.js:
window.addEventListener("load", async () => {
fetch(`${GA_ENDPOINT}?measurement_id=${MEASUREMENT_ID}&api_secret=${API_SECRET}`,
{
method: "POST",
body: JSON.stringify({
client_id: await getOrCreateClientId(),
events: [
{
name: "page_view",
params: {
session_id: await getOrCreateSessionId(),
engagement_time_msec: DEFAULT_ENGAGEMENT_TIME_IN_MSEC,
page_title: document.title,
page_location: document.location.href
},
},
],
}),
});
});
popup.js स्क्रिप्ट को आपके पॉप-अप की एचटीएमएल फ़ाइल में इंपोर्ट करना ज़रूरी है. साथ ही, कोई दूसरी स्क्रिप्ट चलाने से पहले इसे चलाया जाना चाहिए:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Analytics Demo Popup</title>
<script src="./popup.js" type="module"></script>
</head>
<body>
<h1>Analytics Demo</h1>
</body>
</html>
पॉप-अप व्यू, Google Analytics की रीयल टाइम रिपोर्ट में किसी दूसरे पेज व्यू की तरह ही दिखेगा:
सर्विस वर्कर के आंकड़ों से जुड़े इवेंट ट्रैक करना
Google Analytics मेज़रमेंट प्रोटोकॉल का इस्तेमाल करके, एक्सटेंशन सर्विस वर्कर में Analytics इवेंट ट्रैक किए जा सकते हैं. उदाहरण के लिए, अपने सर्विस वर्कर में unhandledrejection event को सुनकर, आप अपने सर्विस वर्कर के उन अपवाद को Google Analytics में लॉग कर सकते हैं जिनकी पहचान नहीं हुई है. इससे उपयोगकर्ताओं की रिपोर्ट की जाने वाली समस्याओं को डीबग करने में काफ़ी मदद मिल सकती है.
service-worker.js:
addEventListener("unhandledrejection", async (event) => {
`${GA_ENDPOINT}?measurement_id=${MEASUREMENT_ID}&api_secret=${API_SECRET}`,
{
method: "POST",
body: JSON.stringify({
client_id: getOrCreateClientId(),
events: [
{
// Note: 'error' is a reserved event name and cannot be used
// see https://developers.google.com/analytics/devguides/collection/protocol/ga4/reference?client_type=gtag#reserved_names
name: "extension_error",
params: {
session_id: await this.getOrCreateSessionId(),
engagement_time_msec: DEFAULT_ENGAGEMENT_TIME_IN_MSEC,
message: error.message,
stack: error.stack,
},
},
],
}),
}
});
अब आपको Google Analytics की रिपोर्ट में गड़बड़ी वाला इवेंट दिखेगा:
डीबग करना
Google Analytics, आपके एक्सटेंशन में Analytics इवेंट को डीबग करने के लिए दो मददगार सुविधाएं देता है:
- डीबग करने वाला खास एंडपॉइंट
https://www.google-analytics.com**/debug**/mp/collect, जो आपके इवेंट की परिभाषाओं में होने वाली किसी भी गड़बड़ी के बारे में रिपोर्ट करेगा. - Google Analytics की रीयल टाइम रिपोर्ट, जिसमें इवेंट के आते ही उनकी जानकारी दिखने लगेगी.