विज्ञापन की मेट्रिक की मदद से, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाले फ़ील्ड के डेटा का आकलन करना

1. शुरू करने से पहले

इस कोडलैब में, पहले से बने Google Tag Manager (GTM) टैग टेंप्लेट की मदद से, कोर वेब वाइटल को मेज़र करने का तरीका बताया गया है. साथ ही, डेटा को Google Analytics 4 (GA4) प्रॉपर्टी में भेजने का तरीका भी बताया गया है. आपको यह भी पता चलेगा कि GA4 में Google Ad Manager और Google AdSense से डेटा कैसे इंपोर्ट किया जाता है. इससे, पहले से बने Looker Studio डैशबोर्ड में, कोर वेब वाइटल के फ़ील्ड डेटा और विज्ञापन की परफ़ॉर्मेंस मेट्रिक को एक-दूसरे से जोड़ा जा सकता है.

आपको क्या करना होगा

• अपने Google Tag Manager कंटेनर में टैग इंपोर्ट और सेट अप करें.
• GA4 में वेब पेज की परफ़ॉर्मेंस की मेट्रिक मेज़र करें.
• Google Tag Manager में GA4 इवेंट टैग सेट अप करें.
• dataLayer और GA4 रिपोर्टिंग में, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी का डेटा एक्सप्लोर करें.
• अपनी GA4 प्रॉपर्टी को Google Ad Manager और Google AdSense खाते से लिंक करें.
• Looker Studio डैशबोर्ड की मदद से, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी और विज्ञापन से मिलने वाले रेवेन्यू के बीच संबंध का पता लगाएं.

आपको किन चीज़ों की ज़रूरत होगी

• Google Analytics खाता और GA4 वेब प्रॉपर्टी, जिसमें एडिटर का ऐक्सेस हो.
• Google Tag Manager खाता और वेब कंटेनर, जिसके पास पब्लिश करने के अधिकार हों.
• आपके पास एडमिन के तौर पर Google Ad Manager नेटवर्क और/या Google AdSense खाते का ऐक्सेस होना चाहिए.
• Looker Studio खाता.

2. GitHub से टैग टेंप्लेट को GTM में जोड़ना

GTM टैग टेंप्लेट की मदद से वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी को मेज़र करना, web-vitals लाइब्रेरी पर आधारित होता है. सबसे पहले, हम GTM टैग टेंप्लेट डाउनलोड करेंगे.

1. template.tpl फ़ाइल खोलें
2. अपने कंप्यूटर पर फ़ाइल डाउनलोड करना

अब, अपने Google Tag Manager खाते पर जाएं.

1. अपना वेब कंटेनर खोलें.
2. नया फ़ाइल फ़ोल्डर बनाएं और उसका नाम डालें. उदाहरण के लिए, "वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी मेज़रमेंट".
3. "टेंप्लेट" पर जाएं.
4. "टैग टेंप्लेट" सेक्शन में, "नया" बटन पर क्लिक करें.

5. ज़्यादा कार्रवाइयां मेन्यू पर क्लिक करें और इंपोर्ट करें चुनें.

6. अपने कंप्यूटर से, पहले डाउनलोड की गई टीपीएल फ़ाइल चुनें.
7. "सहेजें" बटन पर क्लिक करें.

आपने टैग टेंप्लेट को अपने Google Tag Manager कंटेनर में जोड़ा हो.

3. वेबसाइट की परफ़ॉर्मेंस के बारे में अहम जानकारी देने वाला टैग सेट अप करना

1. Google Tag Manager के फ़ाइल फ़ोल्डर में, "टैग" पर जाएं.
2. "नया" पर क्लिक करके, Web Vitals टैग जोड़ें. इसके बाद, "टैग कॉन्फ़िगरेशन" पर क्लिक करें और "कस्टम" सेक्शन से "Web Vitals" टैग चुनें.
3. अगला चरण, अलग-अलग सेटिंग कॉन्फ़िगर करना है. सभी सेटिंग के बारे में GitHub रिपॉज़िटरी में बताया गया है. इस कोडलैब और फ़ाइनल डैशबोर्ड के काम करने के लिए, यहां दी गई सेटिंग काफ़ी हैं.

4. पेज व्यू वाले ट्रिगर में से किसी एक को लागू करें. उदाहरण के लिए, "सभी पेज" ट्रिगर.
5. अगर ज़रूरी हो, तो ट्रिगर रोकना ट्रिगर भी जोड़ें.
6. टैग को "वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी - सभी पेज" के तौर पर नाम दें और इसे सेव करें.

4. dataLayer में वेबसाइट की परफ़ॉर्मेंस से जुड़े डेटा को एक्सप्लोर करना

टैग को काम करते हुए देखने के लिए, Google Tag Manager के झलक मोड पर स्विच करें. Tag Assistant खुलेगा और आपसे अपने सेटअप की झलक देखने और उसे डीबग करने के लिए यूआरएल डालने के लिए कहा जाएगा. Google Tag Manager कंटेनर लागू किए गए पेज का यूआरएल डालें और "कनेक्ट करें" पर क्लिक करें. दिए गए यूआरएल के साथ एक नया टैब खुलेगा.

1. पेज पर स्क्रोल करके और एलिमेंट या खाली जगहों पर क्लिक करके, पेज का इस्तेमाल करें.
2. इसके बाद, Tag Assistant और Google Tag Manager के झलक मोड वाले टैब पर वापस जाएं.
3. बाईं ओर, आपको dataLayer में पुश किए गए अलग-अलग इवेंट दिखेंगे.
4. सबसे पहले, आपको यह देखना चाहिए कि वेब वाइटल्स टैग, चुने गए पेज व्यू ट्रिगर पर फ़ायर हुआ है या नहीं.

5. आपको तीन "web_vitals" इवेंट भी दिखेंगे. इनमें से हर इवेंट, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली एक मेट्रिक को दिखाता है: एलसीपी, आईएनपी, और सीएलएस.

6. पहले विकल्प पर क्लिक करें. इसके बाद, दाईं ओर "एपीआई कॉल" टैब खोलें. यहां आपको टैग टेंप्लेट से dataLayer में पुश किया गया डेटा दिखेगा.

7. "web_vitals" इवेंट की अन्य एंट्री भी देखें. अलग-अलग डेटा टाइप के बारे में जानने के लिए, web-vitals.js दस्तावेज़ देखें.

5. GA4 को वेब वाइटल्स का डेटा भेजना

dataLayer से वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी का डेटा पाने और उसे GA4 को भेजने के लिए, आपको यह करना होगा:

• GA4 टैग के लिए ट्रिगर बनाना
• dataLayer से डेटा पुल करने के लिए वैरिएबल बनाना
• GA4 इवेंट टैग बनाना

ट्रिगर बनाना

1. Google Tag Manager के फ़ाइल फ़ोल्डर में, "ट्रिगर" पर जाएं.
2. "नया" पर क्लिक करके, नया ट्रिगर जोड़ें. इसके बाद, "ट्रिगर कॉन्फ़िगरेशन" पर क्लिक करें. इसके बाद, "अन्य" सेक्शन में जाकर, "कस्टम इवेंट" चुनें.
3. इवेंट के नाम वाले फ़ील्ड में "web_vitals" सेट करें. इसके बाद, ट्रिगर को नाम दें और सेव करें.

dataLayer वैरिएबल बनाना

1. Google Tag Manager के फ़ाइल फ़ोल्डर में, "वैरिएबल" पर जाएं.
2. "डेटा लेयर वैरिएबल" टाइप का नया उपयोगकर्ता-परिभाषित वैरिएबल बनाएं.
3. डेटा लेयर वैरिएबल के नाम वाले फ़ील्ड में "webVitalsData.name" सेट करें. इसके बाद, वैरिएबल को नाम दें (जैसे, "DLV - webVitalsData.name") और सेव करें.

4. डेटा लेयर के ज़रूरी चार वैरिएबल के लिए, इन चरणों को दोहराएं. "webVitalsData.value" बनाएं.

5. "webVitalsData.id" फ़ील्ड के नाम वाला दूसरा वैरिएबल बनाएं.

6. "webVitalsData.rating" बनाएं.

7. "webVitalsData.delta" बनाएं.

8. आपको उपयोगकर्ता के तय किए गए ये dataLayer वैरिएबल मिलेंगे:

GA4 इवेंट टैग बनाना

GA4 इवेंट टैग बनाने से पहले, पक्का करें कि Google टैग पहले से ही सेट अप हो.

1. Google Tag Manager के फ़ाइल फ़ोल्डर में, "टैग" पर जाएं.
2. "नया" पर क्लिक करके, GA4 इवेंट टैग जोड़ें. इसके बाद, "टैग कॉन्फ़िगरेशन" पर क्लिक करें. इसके बाद, "Google Analytics" सेक्शन से "Google Analytics: GA4 इवेंट" टैग चुनें.
3. मेज़रमेंट आईडी डालें.

4. "इवेंट का नाम" इनपुट फ़ील्ड के लिए, पहले बनाए गए चरण से dataLayer वैरिएबल "DLV - webVitalsData.name" चुनें.

5. स्क्रीनशॉट में दिखाए गए तरीके से, अन्य dataLayer वैरिएबल को इवेंट पैरामीटर के तौर पर जोड़ें. साथ ही, पक्का करें कि आपने "event_category" पैरामीटर जोड़ा हो. इसकी वैल्यू "Web Vitals" जैसी होनी चाहिए, ताकि Core Web Vitals इवेंट को ग्रुप किया जा सके.

6. GA4 के यूज़र इंटरफ़ेस (यूआई) में, इन इवेंट पैरामीटर को कस्टम डाइमेंशन के तौर पर रजिस्टर करें.
7. GA4 सेटअप करने की ज़रूरी शर्तों के आधार पर, अतिरिक्त सेटिंग लागू करें.
8. GA4 टैग के लिए, "web_vitals" कस्टम इवेंट को ट्रिगर के तौर पर सेट करें.
9. अगर ज़रूरी हो, तो ट्रिगर रोकना ट्रिगर भी जोड़ें.

6. GA4 में डेटा की जांच करना

GA4 में डेटा फ़्लो की पुष्टि करने के लिए, Google Tag Manager के झलक मोड पर फिर से स्विच करें. Tag Assistant को यूआरएल दें और "कनेक्ट करें" पर क्लिक करें.

1. पेज पर स्क्रोल करके और एलिमेंट या खाली जगहों पर क्लिक करके, पेज का इस्तेमाल करें.
2. इसके बाद, Tag Assistant और Google Tag Manager के झलक मोड वाले टैब पर वापस जाएं.
3. बाईं ओर, "web_vitals" की हर एंट्री पर क्लिक करें और पुष्टि करें कि GA4 Core Web Vitals टैग ट्रिगर हो रहा है.

4. पुष्टि करने के लिए, कार्ड पर क्लिक करके GA4 टैग खोलें. इससे यह पुष्टि की जा सकेगी कि dataLayer से डेटा सही तरीके से पुल किया गया है. वैरिएबल को वैल्यू के तौर पर दिखाएं.

5. अब अपनी GA4 प्रॉपर्टी पर जाएं और रीयलटाइम रिपोर्ट खोलें.
6. "इवेंट के नाम के हिसाब से इवेंट की संख्या" कार्ड में जाकर, यह पुष्टि की जा सकती है कि Core Web Vitals इवेंट को सही तरीके से इकट्ठा किया गया है या नहीं.

7. अगर रीयलटाइम रिपोर्ट में बड़ी मात्रा में डेटा प्रोसेस किया जाता है, तो हो सकता है कि इवेंट को आसानी से न पहचाना जा सके. ऐसे में, debugview रिपोर्ट का इस्तेमाल करें. इससे आपको किसी खास डिवाइस का डेटा देखने में मदद मिलती है.

7. अपना सेटअप पब्लिश करना

सेटअप की जांच करने के बाद, अब अपने वर्कस्पेस को पब्लिश करने का समय है.

1. अपना Google Tag Manager फ़ाइल फ़ोल्डर खोलें.
2. यूज़र इंटरफ़ेस (यूआई) में सबसे ऊपर दाईं ओर, "सबमिट करें" पर क्लिक करें.
3. वर्शन का नाम और वर्शन का ब्यौरा दें. इसके बाद, "पब्लिश करें" पर क्लिक करके, सेटअप को लाइव करें.

8. GA4 को Google Ad Manager या Google AdSense से कनेक्ट करना

GA4 में वेबसाइट की परफ़ॉर्मेंस की जानकारी का डेटा इकट्ठा करने के बाद, डैशबोर्ड के काम करने के लिए, विज्ञापन से जुड़ी मेट्रिक भी GA4 में उपलब्ध होनी चाहिए. Google Ad Manager और Google AdSense, दोनों को GA4 से लिंक करें या इनमें से किसी एक विज्ञापन समाधान को लिंक करें. कृपया ध्यान दें कि लिंक करने के लिए, आपके पास GA4 में एडिटर (या इससे ऊपर) की अनुमति होनी चाहिए. साथ ही, Google Ad Manager और Google AdSense में एडमिन की अनुमति होनी चाहिए.

GA4 को Google Ad Manager से कनेक्ट करना

1. अपने Google Ad Manager नेटवर्क पर जाएं.
2. "एडमिन" -> "ग्लोबल सेटिंग" -> "नेटवर्क सेटिंग" पर क्लिक करें.
3. "रिपोर्ट की सेटिंग" सेक्शन में जाकर, "Ad Manager रिपोर्टिंग में Google Analytics 4 प्रॉपर्टी की रिपोर्ट" को चालू करें.

4. नियम और शर्तें पढ़ें. इसके बाद, "पुष्टि करें" पर क्लिक करें.
5. अपडेट को सेव करें.
6. "एडमिन" -> "लिंक किए गए खाते" -> "Google Analytics 4" पर जाएं.
7. "नई Google Analytics 4 प्रॉपर्टी लिंक करें" पर क्लिक करें.
8. उस GA4 प्रॉपर्टी को ढूंढें और चुनें जिसे आपको लिंक करना है.
9. 'सेव करें' पर क्लिक करें.

GA4 को Google AdSense से कनेक्ट करना

1. अपने Google AdSense खाते पर जाएं.
2. "खाता" -> "ऐक्सेस और अनुमति" -> "Google Analytics इंटिग्रेशन" पर क्लिक करें.
3. "+नया लिंक" पर क्लिक करें.

4. उस GA4 प्रॉपर्टी को ढूंढें और चुनें जिसे आपको लिंक करना है.
5. "लिंक बनाएं" पर क्लिक करें.

9. Looker Studio की मदद से, डेटा को विज़ुअलाइज़ करना

विज्ञापन मेट्रिक के साथ-साथ Core Web Vitals के डेटा को विज़ुअल तरीके से दिखाने के लिए, Looker Studio डैशबोर्ड सेट अप करना ज़रूरी है. कृपया कोर वेब वाइटल और विज्ञापन से मिलने वाले रेवेन्यू के बीच संबंध जानने के लिए, यह तरीका अपनाएं.

1. यह Looker Studio डैशबोर्ड टेंप्लेट खोलें
2. डैशबोर्ड कॉपी करें.
3. ड्रॉपडाउन सूची से अपनी GA4 प्रॉपर्टी चुनकर, डेटा सोर्स को अपडेट करें.
4. हो गया

कृपया ध्यान दें कि डैशबोर्ड के काम करने और डेटा को सही तरीके से दिखाने के लिए, डेटा इस कोडलैब के सिंटैक्स और नाम रखने के तरीके पर निर्भर करता है.

डैशबोर्ड के पहले पेज पर, आपको Core Web Vitals की परफ़ॉर्मेंस का पुराना डेटा दिखेगा:

दूसरे पेज पर, Google Ad Manager और/या Google AdSense से मिलने वाले विज्ञापन रेवेन्यू के साथ कोर वेब वाइटल को कोरिलेट किया जा सकता है:

तीसरे पेज पर, आपको विज्ञापन से जुड़ी मेट्रिक के साथ-साथ, पेज पाथ लेवल पर Core Web Vitals की परफ़ॉर्मेंस का विश्लेषण करने की सुविधा मिलती है:

10. नतीजा

बधाई हो! आपने GA4 की मदद से, कोर वेब वाइटल और Google Ad Manager और Google AdSense से विज्ञापन की परफ़ॉर्मेंस मेट्रिक को मेज़र और रिपोर्ट करने का तरीका सीखा.

ज़्यादा जानें

• Google टूल की मदद से, वेबसाइट की परफ़ॉर्मेंस की जानकारी और विज्ञापन से मिलने वाले रेवेन्यू के बीच संबंध का पता लगाना
• पेज लोड होने की स्पीड पर असर डाले बिना, विज्ञापनों को असरदार तरीके से लोड करना
• सबसे बड़े एलिमेंट को रेंडर करने में लगने वाले समय को ऑप्टिमाइज़ करना
• लेआउट शिफ़्ट होने में लगने वाले समय को ऑप्टिमाइज़ करना
• पेज के रिस्पॉन्स में लगने वाले समय को ऑप्टिमाइज़ करना