इस पेज पर, आपकी साइट से Google Analytics में डेटा भेजने के लिए, gtag.js निर्देशों का इस्तेमाल करने का तरीका बताया गया है.
event निर्देश की मदद से डेटा भेजें
किसी वेब पेज में ग्लोबल स्निपेट जोड़ने के बाद, Google Analytics को डेटा भेजने के लिए event कमांड का इस्तेमाल करें. उदाहरण के लिए, यहां दिए गए event कमांड का इस्तेमाल करके, यह बताएं कि उपयोगकर्ता ने अपने Google खाते से साइन इन किया है:
gtag('event', 'login', {'method': 'Google'});
एपीआई के रेफ़रंस में जाकर, event कमांड के बारे में ज़्यादा जानें.
डेटा को ग्रुप और प्रॉपर्टी पर रूट करें
एक या उससे ज़्यादा Google Analytics प्रॉपर्टी आईडी को, मेज़रमेंट की एक जानकारी भेजी जा सकती है. साथ ही, किसी दूसरे प्रॉपर्टी आईडी को जानकारी का दूसरा सेट भेजा जा सकता है. प्रॉपर्टी को ग्रुप में व्यवस्थित किया जा सकता है और डेटा को उनमें रूट किया जा सकता है.
उदाहरण के लिए, नीचे दिए गए कोड के उदाहरण में, sign_in इवेंट को दो Google Analytics प्रॉपर्टी वाले ग्रुप 'एजेंसी' पर रूट करने का तरीका बताया गया है.
// Configure a target
gtag('config', 'GA_MEASUREMENT_ID_1');
gtag('config', 'GA_MEASUREMENT_ID_2', { 'groups': 'agency' });
gtag('config', 'GA_MEASUREMENT_ID_3', { 'groups': 'agency' });
// Route this sign_in event to Analytics IDs in the 'agency' group:
gtag('event', 'sign_in', { 'send_to': 'agency' });
डेटा को ग्रुप और रूट करने के तरीके के बारे में ज़्यादा जानें.
इवेंट भेजे जाने की सूचना पाना
कुछ मामलों में, आपको यह जानने की ज़रूरत होती है कि कोई इवेंट Google Analytics को कब भेजा गया, ताकि आप उसके तुरंत बाद कार्रवाई कर सकें. यह आम बात है, जब आपको किसी ऐसे इंटरैक्शन को रिकॉर्ड करने की ज़रूरत होती है जो उपयोगकर्ता को मौजूदा पेज से दूर ले जाता है. अगला पेज लोड होते ही कई ब्राउज़र, JavaScript का इस्तेमाल करना बंद कर देते हैं. इसका मतलब है कि आपके gtag.js event निर्देश शायद कभी न चलें.
उदाहरण के लिए, हो सकता है कि आप Google Analytics को कोई इवेंट भेजना चाहें, ताकि यह रिकॉर्ड किया जा सके कि किसी उपयोगकर्ता ने फ़ॉर्म के 'सबमिट करें' बटन पर क्लिक किया है. ज़्यादातर मामलों में, किसी भी event कमांड को लागू करने से पहले, 'सबमिट करें' बटन पर क्लिक करने से अगला पेज तुरंत लोड होना शुरू हो जाएगा.
इसके लिए ज़रूरी है कि अगले पेज को लोड होने से रोकने के लिए इवेंट को रोका जाए, ताकि आप Google Analytics को इवेंट भेज सकें. इवेंट भेजने के बाद, फ़ॉर्म को प्रोग्राम के हिसाब से सबमिट करें.
इवेंट कॉलबैक फ़ंक्शन लागू करें
आपके पास इवेंट कॉलबैक फ़ंक्शन लागू करने का विकल्प होता है. इवेंट के भेजे जाने के बाद, उसे कॉल किया जाता है.
नीचे दिए गए उदाहरण में, फ़ॉर्म की डिफ़ॉल्ट सबमिट कार्रवाई को रद्द करने, Google Analytics को कोई इवेंट भेजने, और फिर इवेंट कॉलबैक फ़ंक्शन का इस्तेमाल करके फ़ॉर्म फिर से सबमिट करने का तरीका बताया गया है:
// Get a reference to the form element, assuming
// it contains the ID attribute "signup-form".
var form = document.getElementById('signup-form');
// Add a listener for the "submit" event.
form.addEventListener('submit', function(event) {
// Prevent the browser from submitting the form
// and thus unloading the current page.
event.preventDefault();
// Send the event to Google Analytics and
// resubmit the form once the hit is done.
gtag('event', 'signup_form_complete', {
'event_callback': function() {
form.submit();
}
});
});
टाइम आउट मैनेज करना
ऊपर दिए गए उदाहरण में एक कमी है: अगर gtag.js लाइब्रेरी लोड नहीं हो पाती है, तो इवेंट कॉलबैक फ़ंक्शन कभी नहीं चलेगा और उपयोगकर्ता कभी भी इस फ़ॉर्म को सबमिट नहीं कर पाएंगे.
इवेंट कॉलबैक फ़ंक्शन में, साइट के ज़रूरी फ़ंक्शन को शामिल करने पर, आपको हमेशा टाइम आउट फ़ंक्शन का इस्तेमाल करना चाहिए. इसकी मदद से, उन मामलों को हैंडल किया जा सकता है जहां gtag.js लाइब्रेरी लोड नहीं हो पाती.
नीचे दिया गया उदाहरण टाइम आउट का इस्तेमाल करने के लिए, ऊपर दिए गए कोड को बेहतर बनाता है. अगर उपयोगकर्ता के 'सबमिट करें' बटन पर क्लिक करने के एक सेकंड बाद भी इवेंट कॉलबैक फ़ंक्शन नहीं चलता है, तब भी फ़ॉर्म फिर से सबमिट हो जाता है.
// Gets a reference to the form element, assuming
// it contains the ID attribute "signup-form".
var form = document.getElementById('signup-form');
// Adds a listener for the "submit" event.
form.addEventListener('submit', function(event) {
// Prevents the browser from submitting the form
// and thus unloading the current page.
event.preventDefault();
// Creates a timeout to call submitForm after one second.
setTimeout(submitForm, 1000);
// Monitors whether or not the form has been submitted.
// This prevents the form from being submitted twice in cases
// where the event callback function fires normally.
var formSubmitted = false;
function submitForm() {
if (!formSubmitted) {
formSubmitted = true;
form.submit();
}
}
// Sends the event to Google Analytics and
// resubmits the form once the hit is done.
gtag('event', 'signup_form_complete', {
'event_callback': submitForm
});
});
अगर आपकी पूरी साइट में ऊपर दिए गए पैटर्न का इस्तेमाल किया जाता है, तो टाइम आउट मैनेज करने के लिए यूटिलिटी फ़ंक्शन बनाएं.
नीचे दिया गया यूटिलिटी फ़ंक्शन, किसी फ़ंक्शन को इनपुट के तौर पर स्वीकार करता है और नया फ़ंक्शन दिखाता है. अगर लौटाए गए फ़ंक्शन को टाइम आउट की अवधि (डिफ़ॉल्ट टाइम आउट एक सेकंड का समय) से पहले कॉल किया जाता है, तो यह टाइम आउट को हटा देता है और इनपुट फ़ंक्शन को कॉल करता है. अगर रिटर्न किए गए फ़ंक्शन को टाइम आउट की अवधि से पहले कॉल नहीं किया जाता, तो इनपुट फ़ंक्शन को इस बात पर ध्यान दिए बिना कॉल किया जाता है.
function createFunctionWithTimeout(callback, opt_timeout) {
var called = false;
function fn() {
if (!called) {
called = true;
callback();
}
}
setTimeout(fn, opt_timeout || 1000);
return fn;
}
अब सभी इवेंट कॉलबैक फ़ंक्शन को टाइम आउट के साथ रैप करें, ताकि आपकी साइट उम्मीद के मुताबिक काम करे. ऐसा उन मामलों में भी होता है जहां आपके इवेंट भेजे नहीं जा पाते या gtag.js लाइब्रेरी कभी लोड नहीं होती.
// Gets a reference to the form element, assuming
// it contains the ID attribute "signup-form".
var form = document.getElementById('signup-form');
// Adds a listener for the "submit" event.
form.addEventListener('submit', function(event) {
// Prevents the browser from submitting the form
// and thus unloading the current page.
event.preventDefault();
// Sends the event to Google Analytics and
// resubmits the form once the hit is done.
gtag('event', 'signup_form', { 'event_callback': {
createFunctionWithTimeout(function() {
form.submit();
})
}});
});
परिवहन के अलग-अलग तरीके बताएं
डिफ़ॉल्ट रूप से, gtag.js एचटीटीपीएस तरीका और परिवहन का वह तरीका चुनता है, जिसकी मदद से हिट को बेहतर तरीके से भेजा जाता है. ये तीन विकल्प हैं:
- 'इमेज' (
Imageऑब्जेक्ट का इस्तेमाल करके) - 'xhr' (
XMLHttpRequestऑब्जेक्ट का इस्तेमाल करके) - 'बीकन' (
navigator.sendBeaconतरीके का इस्तेमाल करके)
पहले दो तरीकों में पिछले सेक्शन में बताई गई समस्या के बारे में बताया गया है. यहां पेज अनलोड होने पर हिट नहीं भेजे जाते. navigator.sendBeacon वाला तरीका, हिट को एसिंक्रोनस तरीके से वेब सर्वर पर ट्रांसमिट करके, इस समस्या को हल करता है. इसके लिए, हिट कॉलबैक सेट करने की ज़रूरत नहीं होती.
यह कोड, उन ब्राउज़र के लिए 'beacon' पर ट्रांसपोर्ट करने का तरीका सेट करता है जो इसके साथ काम करते हैं:
gtag('config', 'GA_MEASUREMENT_ID', { 'transport_type': 'beacon'});