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

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

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

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

• अपने Google Tag Manager कंटेनर में टैग इंपोर्ट और सेटअप करें.
• GA4 में, वेब पेज की Core Web Vitals मेट्रिक का आकलन करें.
• 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. अपने कंप्यूटर से पहले से डाउनलोड की गई TPL फ़ाइल चुनें.
7. "सहेजें" बटन पर क्लिक करें.

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

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

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

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

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

टैग को काम करते देखने के लिए, 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 को, Web Vitals का डेटा भेजना

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: GA4 इवेंट" चुनें "Google Analytics" से मिला टैग सेक्शन में जाएं.
3. उससे जुड़े फ़ील्ड में अपना मेज़रमेंट आईडी डालें.

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

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

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

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

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

1. एलिमेंट या व्हाइट स्पेस पर स्क्रोल करके और क्लिक करके पेज पर आसानी से इंटरैक्ट करें.
2. इसके बाद, Tag Assistant और Google Tag Manager के झलक मोड की मदद से टैब पर वापस जाएं.
3. बाईं ओर, हर "web_vitals" पर क्लिक करें और पुष्टि करें कि GA4 की वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाला टैग ट्रिगर हुआ है.

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

5. अब अपनी GA4 प्रॉपर्टी पर स्विच करें और रीयलटाइम रिपोर्ट खोलें.
6. "इवेंट के नाम के हिसाब से इवेंट की संख्या" सेक्शन में कार्ड से यह पता किया जा सकता है कि आपकी वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी वाले इवेंट सही तरीके से इकट्ठा हो रहे हैं या नहीं.

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

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 की मदद से डेटा को विज़ुअलाइज़ करना

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

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

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

डैशबोर्ड के पहले पेज पर, आपको वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी मिलेगी:

दूसरे पेज पर बताया गया है कि वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली रिपोर्ट और Google Ad Manager और/या Google AdSense से मिलने वाले रेवेन्यू में क्या अंतर है:

तीसरे पेज की मदद से, विज्ञापन से जुड़ी मेट्रिक की मदद से पेज के पाथ लेवल पर, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी का विश्लेषण किया जा सकता है:

10. नतीजा

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

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

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