इस पेज का अनुवाद Cloud Translation API से किया गया है.

web-ytals.js, Google Analytics, और BigQuery की मदद से परफ़ॉर्मेंस का आकलन करना

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

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

इस कोडलैब में, ये काम किए जा रहे हैं:

अपनी Google Analytics 4 प्रॉपर्टी को BigQuery से लिंक करें.
किसी वेब पेज में web-vitals लाइब्रेरी जोड़ें.
web-vitals का डेटा तैयार करें और उसे Google Analytics को भेजें.
BigQuery में, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी के डेटा की क्वेरी करें.
वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाले डेटा को विज़ुअलाइज़ करने के लिए, Google Data Studio में एक डैशबोर्ड बनाएं.

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

GA4 प्रॉपर्टी वाला Google Analytics खाता.
Google Cloud खाता.
Chromium पर आधारित वेब ब्राउज़र, जैसे कि Google Chrome या Microsoft Edge. (इस बारे में ज़्यादा जानकारी के लिए कि आपको Chromium-आधारित वेब ब्राउज़र की ज़रूरत क्यों है, ब्राउज़र सहायता देखें.)
आपकी पसंद का टेक्स्ट एडिटर, जैसे कि सबलाइम टेक्स्ट या विज़ुअल स्टूडियो कोड.
यह देखने के लिए कि web-vitals लाइब्रेरी कैसे काम करती है, अपने टेस्ट पेजों को होस्ट करें. स्टैटिक वेब पेजों को डिलीवर करने के लिए, लोकल सर्वर का इस्तेमाल किया जा सकता है या GitHub पर अपने टेस्ट पेज होस्ट किए जा सकते हैं.
एक सार्वजनिक साइट, जहां आप अपना Analytics कोड लागू कर सकते हैं. (अपना कोड प्रोडक्शन में डालने से, इस कोडलैब के आखिर में BigQuery और Data Studio के उदाहरण आसानी से समझ में आ जाते हैं.)
एचटीएमएल, सीएसएस, JavaScript, और Chrome DevTools के बारे में जानकारी.

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

सबसे पहले, Google Analytics 4 को BigQuery से लिंक करें, ताकि कोड लाइव होते ही परफ़ॉर्मेंस का विश्लेषण शुरू किया जा सके.

अपनी GA4 प्रॉपर्टी को BigQuery से लिंक करने के लिए, Google Analytics सहायता केंद्र में दिया गया तरीका अपनाएं.

अब आपकी Google Analytics प्रॉपर्टी, इवेंट डेटा को BigQuery में एक्सपोर्ट करने के लिए तैयार है. इसलिए, अपनी साइट पर web-vitals लाइब्रेरी इंटिग्रेट करें.

2. किसी वेब पेज में वेब-वाइटल लाइब्रेरी और gtag जोड़ना

सबसे पहले, किसी वेब पेज में web-vitals लाइब्रेरी जोड़ें.

वह पेज टेंप्लेट खोलें जिसमें web-vitals लाइब्रेरी जोड़ना है. उदाहरण के लिए, हम आसान पेज का इस्तेमाल करेंगे:

basic.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Web Vitals Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <p><img style="max-width: 360px" src="https://placekitten.com/g/3840/2160" alt="Kitten" /></p>
  <p>Text below image</p>
</body>
</html>

सोर्स कोड को अपने टेक्स्ट एडिटर की खाली फ़ाइल में चिपकाएं.
फ़ाइल को स्थानीय तौर पर basic.html के रूप में सेव करें.
इस मॉड्यूल स्क्रिप्ट को कॉपी करें और इसे </body> टैग को बंद करने से ठीक पहले चिपकाएं. यह स्क्रिप्ट, कॉन्टेंट डिलीवरी नेटवर्क से web-vitals लाइब्रेरी को लोड करती है.

basic.html

<script type="module">
  import {onCLS, onINP, onLCP} from 'https://unpkg.com/web-vitals@4/dist/web-vitals.attribution.js?module';

  onCLS(console.log);
  onINP(console.log);
  onLCP(console.log);
</script>

ध्यान दें: मॉड्यूल स्क्रिप्ट ऐसी सुविधा है जो सभी मॉडर्न ब्राउज़र पर काम करती है. साथ ही, यह ऐसे कोड के लिए सही है जो सिर्फ़ नए एपीआई का इस्तेमाल करता है. जैसे, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी को मापने के लिए ज़रूरी कोड. जिन ब्राउज़र पर मॉड्यूल या Core Web Vitals API काम नहीं करते वे इस स्क्रिप्ट को लोड करने की कोशिश नहीं करेंगे.

मिलने वाला कोड कुछ ऐसा दिखना चाहिए.

basic.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Web Vitals Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <p><img style="max-width: 360px" src="https://placekitten.com/g/3840/2160" alt="Kitten" /></p>
  <p>Text below image</p>

<script type="module">
  import {onCLS, onINP, onLCP} from 'https://unpkg.com/web-vitals@4/dist/web-vitals.attribution.js?module';

  onCLS(console.log);
  onINP(console.log);
  onLCP(console.log);
</script>
</body>
</html>

फ़ाइल सेव करें.

आपने वेब पेज पर web-vitals लाइब्रेरी जोड़ दी है.

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

वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी, असल उपयोगकर्ता के अनुभव का आकलन है. इसे Chrome या Chromium ब्राउज़र की web-vitals लाइब्रेरी से कैप्चर किया जाता है. जब web-vitals को प्रोडक्शन के लिए रिलीज़ किया जाता है, तो उपयोगकर्ताओं की गतिविधि के हिसाब से आपको कई तरह के नतीजे दिखते हैं कनेक्शन की स्पीड, डिवाइस की पावर, और वे आपकी साइट के साथ कैसे इंटरैक्ट करते हैं. web-vitals लाइब्रेरी की क्षमताओं को दिखाने के लिए, हम धीमे कनेक्शन वाले उपयोगकर्ता अनुभव को सिम्युलेट कर रहे हैं.

सेव की गई फ़ाइल को अपने वेब ब्राउज़र में खोलें.
वेब पेज पर राइट क्लिक करें.
Google Chrome डेवलपर टूल खोलने के लिए, जांच करें पर क्लिक करें.

कंसोल टैब पर क्लिक करें > कंसोल की सेटिंग .

वेब पेज को रीफ़्रेश करने पर लॉग सेव रखने के लिए, लॉग सेव करें चेकबॉक्स चुनें.

नेटवर्क टैब पर क्लिक करें > ऑनलाइन > धीमे नेटवर्क कनेक्शन को सिम्युलेट करने के लिए धीमा 3G.

कंसोल टैब पर क्लिक करें.
सबसे बड़े कॉन्टेंटफ़ुल पेंट (एलसीपी) की मेट्रिक को ज़बरदस्ती प्रिंट करने के लिए, वेब पेज पर कहीं भी क्लिक करें.
कुल लेआउट शिफ़्ट (सीएलएस) और इंटरैक्शन टू नेक्स्ट पेंट (आईएनपी) के मेट्रिक को प्रिंट करने के लिए, इस पेज को फिर से लोड करें पर क्लिक करें.

नेटवर्क टैब पर क्लिक करें > ऑनलाइन > तेज़ इंटरनेट कनेक्शन को सिम्युलेट करने के लिए तेज़ 3G.
कंसोल टैब पर क्लिक करें.
एलसीपी को मेट्रिक को फिर से प्रिंट करने के लिए, वेब पेज पर कहीं भी क्लिक करें.

सीएलएस और आईएनपी की मेट्रिक को फिर से प्रिंट करने के लिए, इस पेज को फिर से लोड करें पर क्लिक करें.

हो गया! आपने वेब पेज की Core Web Vitals मेट्रिक को मेज़र किया है.

4. वेब के डेटा की अहम जानकारी के बारे में ज़्यादा जानें

वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाले जिन इवेंट का आकलन किया जा रहा है उन सभी के लिए, डेटा में ऐसी कई जानकारी उपलब्ध है जिसका इस्तेमाल करके, परफ़ॉर्मेंस में आने वाली रुकावटों को डीबग किया जा सकता है. web-vitals के हर इवेंट में entries कलेक्शन होता है. इसमें उन इवेंट के बारे में जानकारी होती है जो मौजूदा मेट्रिक वैल्यू पर असर डालते हैं.

सीएलएस `entries`

ध्यान दें: onCLS(), डिफ़ॉल्ट रूप से हर लेआउट शिफ़्ट पर ट्रिगर नहीं होता. इसके अलावा, हो सकता है कि पेज को फिर से लोड करने के बाद, लॉग किए गए इवेंट के आउटपुट को बड़ा न किया जा सके. कोड को onCLS(console.log, true) में अपडेट करके, सीएलएस वैल्यू में हर बार बदलाव होने पर, onCLS() को हर बार रिपोर्ट करने के लिए कहा जा सकता है. ऐसा हर लेआउट शिफ़्ट पर नहीं होगा. ऐसा सिर्फ़ तब होगा, जब लेआउट शिफ़्ट की सीएलएस वैल्यू में बदलाव होगा.

onCLS() से लॉग किए गए ऑब्जेक्ट की entries प्रॉपर्टी को बड़ा करने पर, आपको LayoutShift एंट्री की सूची दिखती है. हर LayoutShift में एक value प्रॉपर्टी होती है, जो लेआउट शिफ़्ट स्कोर को दिखाती है. साथ ही, इसमें sources कलेक्शन होता है. इसकी मदद से, यह देखा जा सकता है कि कौनसे एलिमेंट शिफ़्ट किए गए हैं.

इस उदाहरण में, दो लेआउट शिफ़्ट हुए हैं. ये दोनों, पेज पर h1 एलिमेंट को मूव कर रहे हैं. currentRect प्रॉपर्टी से हमें पता चलता है कि एलिमेंट अब कहां है और previousRect एलिमेंट से हमें पता चलता है कि एलिमेंट पहले कहां था.

एलसीपी `entries`

onLCP() से लॉग किए गए ऑब्जेक्ट की एंट्री प्रॉपर्टी को बड़ा करने से, हमें पता चलता है कि फ़ाइनल वैल्यू रिपोर्ट किए जाने से पहले, किन एलिमेंट को सबसे बड़े कॉन्टेंटफ़ुल पेंट के लिए इस्तेमाल किया जा सकता था.

इस उदाहरण में, entries कलेक्शन में सभी एलसीपी उम्मीदवारों की सूची समय के हिसाब से दी गई है. इस मामले में, पहले h1 एलिमेंट को रेंडर किया गया और उसके बाद img एलिमेंट को रेंडर किया गया. img, सबसे बड़ा कॉन्टेंटफ़ुल पेंट था. रिपोर्ट किया गया एलसीपी एलिमेंट, कलेक्शन का आखिरी आइटम होता है.

आईएनपी `entries`

onINP(), से लॉग किए गए ऑब्जेक्ट की entries प्रॉपर्टी को बड़ा करने पर, एक अरे दिखता है. इसमें पेज पर अगले पेंट करने के लिए इंटरैक्शन के लिए PerformanceEventTiming एंट्री होती है.

name प्रॉपर्टी से आपको पता चलता है कि उपयोगकर्ता के किस तरह के इनपुट ने मुख्य थ्रेड की उपलब्धता के लिए टाइमर को ट्रिगर किया था. web-vitals, value की रिपोर्ट में जो देरी करता है वह PerformanceEventTiming एंट्री की duration प्रॉपर्टी के तौर पर हुई देरी होती है. इसे माइक्रोसेकंड से मिलीसेकंड में बदला जाता है. इस मामले में, आईएनपी 48 मिलीसेकंड है.

5. वेब के लिए अहम डेटा को Google Analytics 4 में तैयार करना और भेजना

web-vitals का डेटा Google Analytics 4 में भेजने से पहले, आपको इसे ऐसे फ़ॉर्मैट में बदलना होगा जो GA4 को मिल सके.

हर सीडब्ल्यूवी के लिए डीबग की जानकारी को स्ट्रक्चर करना

Google Analytics को यह कोड भेजने से पहले आखिरी कदम, एंट्री से मिली जानकारी को तैयार करना है. इसमें ऊपर दिए गए फ़ंक्शन से मिलने वाली जानकारी भी शामिल है.

diagnostics.html

  function getDebugInfo(name, attribution) {
    // In some cases there won't be any entries (e.g. if CLS is 0,
    // or for LCP after a bfcache restore), so we have to check first.
    if (attribution) {
      if (name === 'LCP') {
        return {
          debug_url: attribution.url,
          debug_time_to_first_byte: attribution.timeToFirstByte,
          debug_resource_load_delay: attribution.resourceLoadDelay,
          debug_resource_load_time: attribution.resourceLoadTime,
          debug_element_render_delay: attribution.elementRenderDelay,
          debug_target: attribution.element || '(not set)',
        };
      } else if (name === 'INP') {
        return {
          debug_event: attribution.interactionType,
          debug_time: Math.round(attribution.interactionTime),
          debug_load_state: attribution.loadState,
          debug_target: attribution.interactionTarget || '(not set)',
          debug_interaction_delay: Math.round(attribution.inputDelay),
          debug_processing_duration: Math.round(attribution.processingDuration),
          debug_presentation_delay:  Math.round(attribution.presentationDelay),
        };
      } else if (name === 'CLS') {
        return {
          debug_time: attribution.largestShiftTime,
          debug_load_state: attribution.loadState,
          debug_target: attribution.largestShiftTarget || '(not set)',
        }
      }
    }
    // Return default/empty params in case there is no attribution.
    return {
      debug_target: '(not set)',
    };
  }
  
  function sendToGoogleAnalytics({ name, delta, value, id, entries, attribution }) {
    gtag('event', name, {
      // Built-in params:
      value: delta, // Use `delta` so the value can be summed.
      // Custom params:
      metric_id: id, // Needed to aggregate events.
      metric_value: value, // Value for querying in BQ
      metric_delta: delta, // Delta for querying in BQ
      // Send the returned values from getDebugInfo() as custom parameters
        ...getDebugInfo(name, attribution)
    });
  }

Google Analytics को डेटा भेजना

आखिर में, एक ऐसा फ़ंक्शन बनाएं जो web-vitals इवेंट से पैरामीटर लेकर उन्हें Google Analytics में पास करे.

diagnostics.html

function sendToGoogleAnalytics({ name, delta, value, id, entries, attribution }) {
  gtag('event', name, {
    // Built-in params:
    value: delta, // Use `delta` so the value can be summed.
    // Custom params:
    metric_id: id, // Needed to aggregate events.
    metric_value: value, // Value for querying in BQ
    metric_delta: delta, // Delta for querying in BQ
    // Send the returned values from getDebugInfo() as custom parameters
      ...getDebugInfo(name, attribution)
  });
}

फ़ंक्शन को हर web-vitals फ़ंक्शन के साथ रजिस्टर करें, जो ब्राउज़र के हर इवेंट को मापने के लिए तैयार होने पर फ़ायर होता है:

diagnostics.html

onLCP(sendToGoogleAnalytics);
onINP(sendToGoogleAnalytics);
onCLS(sendToGoogleAnalytics);

बहुत खूब! अब Google Analytics को web-vitals इवेंट भेजे जा रहे हैं.

6. जांच करें कि Google Analytics में वेब के अहम डेटा की जानकारी अपने-आप भर जाती है या नहीं

यह पक्का करने के लिए कि आपके इवेंट, Google Analytics 4 प्रॉपर्टी से रिकॉर्ड किए जाएं:

अपनी Google Analytics 4 प्रॉपर्टी खोलें और रिपोर्ट पर जाएं.

रीयलटाइम चुनें.

अपने टेस्ट पेज को कुछ बार रीफ़्रेश करें. यह भी पक्का करें कि रीफ़्रेश के बीच पेज पर क्लिक किया जाए, ताकि आईएनपी इवेंट ट्रिगर किए जा सकें.
रीयलटाइम की खास जानकारी यूज़र इंटरफ़ेस (यूआई) में, इवेंट के नाम के हिसाब से इवेंट की संख्या सेक्शन देखें. आपको एलसीपी, आईएनपी, और सीएलएस इवेंट दिखेंगे.

किसी भी इवेंट के नाम पर क्लिक करके, उन इवेंट से पास किए गए पैरामीटर देखें.

Google Analytics को मिली वैल्यू की खास जानकारी देखने के लिए, पैरामीटर की उन कुंजियों पर क्लिक करें.

आपको डीबग की अपनी जानकारी में अन्य डेटा जोड़ना चाहिए. जैसे, पेज टेंप्लेट के नाम या आईएनपी से जुड़े दूसरे पेज के इवेंट के बारे में, जिनके बारे में इस कोडलैब में पहले चर्चा की गई थी. getDebugInfo() फ़ंक्शन में बस return स्टेटमेंट में बदलाव करें.

अगर आप टेस्ट पेजों से मिलने वाले डेटा से संतुष्ट हैं, तो अपने नए GA कोड को अपनी साइट पर प्रोडक्शन के लिए डिप्लॉय करें और अगले चरण पर जाएं.

7. BigQuery में अपने डेटा के लिए क्वेरी करें

जब आपका Google Analytics कोड कुछ दिनों तक लाइव हो, तब BigQuery में डेटा की क्वेरी की जा सकती है. सबसे पहले, देखें कि डेटा को BigQuery में ट्रांसफ़र किया जा रहा है या नहीं.

Google Cloud Console खोलें और स्क्रीन पर सबसे ऊपर मौजूद ड्रॉप-डाउन मेन्यू से अपना प्रोजेक्ट चुनें.
स्क्रीन के सबसे ऊपर बाईं ओर मौजूद नेविगेशन मेन्यू में जाकर, Analytics हेडर में BigQuery पर क्लिक करें.
Explorer पैनल में, अपना Google Analytics डेटासेट देखने के लिए अपने प्रोजेक्ट को बड़ा करें. डेटासेट का नाम analytics_ है. इसके बाद, आपकी Google Analytics 4 प्रॉपर्टी का आईडी होता है (उदाहरण के लिए, analytics_229787100).
डेटासेट को बड़ा करने पर, आपको events_ टेबल दिखेगी. ब्रैकेट में दी गई संख्या, क्वेरी के लिए उपलब्ध दिनों की संख्या होती है.

सिर्फ़ CWV इवेंट चुनने के लिए सबक्वेरी

अगर आपको किसी ऐसे डेटा सेट के लिए क्वेरी करनी है जिसमें सिर्फ़ हमारे CWV इवेंट शामिल हैं, तो एक ऐसी सबक्वेरी से शुरुआत करें जो पिछले 28 दिनों के एलसीपी, सीएलएस, और आईएनपी इवेंट को चुनती है. यह खास तौर पर metric_id कुंजी का इस्तेमाल करके, हर web-vitals इवेंट आईडी के लिए आखिरी बार रिपोर्ट की गई वैल्यू को ढूंढता है. इससे यह पक्का किया जा सकता है कि एक ही CWV इवेंट को एक से ज़्यादा बार नहीं गिना जा रहा है.

# Subquery all Web Vitals events from the last 28 days
WITH web_vitals_events AS (
 SELECT event_name as metric_name, * EXCEPT(event_name, is_last_received_value) FROM
 (
   SELECT *
   , IF (ROW_NUMBER() OVER (
     PARTITION BY (SELECT value.string_value FROM UNNEST(event_params) WHERE key = 'metric_id')
     ORDER BY (SELECT COALESCE(value.double_value, value.int_value) FROM UNNEST(event_params) WHERE key = 'metric_value') DESC
   ) = 1, true, false) AS is_last_received_value
   # Make sure to update your project ID and GA4 property ID here!
   FROM `YOUR_PROJECT_ID.analytics_YOUR_GA_PROPERTY_ID.events_*`
   WHERE event_name in ('CLS', 'INP', 'LCP') AND
     _TABLE_SUFFIX BETWEEN FORMAT_DATE('%Y%m%d', DATE_SUB(CURRENT_DATE, INTERVAL 28 DAY)) AND FORMAT_DATE('%Y%m%d', DATE_SUB(CURRENT_DATE, INTERVAL 1 DAY))
  )
  WHERE is_last_received_value
)

इस डेटासेट के लिए, आपकी सभी क्वेरी का आधार यही होगा. आपकी मुख्य क्वेरी, अस्थायी टेबल web_vitals_events पर चलेगी.

GA4 इवेंट को स्ट्रक्चर करने का तरीका

Google Analytics 4 के हर इवेंट का डेटा, STRUCT के event_params कॉलम में मौजूद होता है. आपकी साइट पर GA4 में पास किए जाने वाले हर इवेंट पैरामीटर को उसकी कुंजी से दिखाया जाता है. साथ ही, इसकी वैल्यू STRUCT होती है, जिसमें हर संभावित डेटा टाइप के लिए एक कुंजी होती है. ऊपर दिए गए उदाहरण में, metric_value कुंजी में int_value या double_value हो सकता है, इसलिए COALESCE() फ़ंक्शन का इस्तेमाल किया जाता है. पहले पास किया गया debug_target पाने के लिए, debug_target में string_value बटन चुनें.

...
(SELECT value.string_value FROM UNNEST(event_params) WHERE key = "debug_target") as debug_target
...

सबसे खराब परफ़ॉर्मेंस वाले पेजों और एलिमेंट का पता लगाना

debug_target, सीएसएस सिलेक्टर स्ट्रिंग है जो पेज पर मौजूद उस एलिमेंट के मुताबिक होती है जो मेट्रिक वैल्यू के लिए सबसे ज़्यादा काम की है.

सीएलएस का इस्तेमाल करने पर, debug_target सबसे बड़े लेआउट शिफ़्ट का वह एलिमेंट दिखाता है जो सीएलएस वैल्यू में योगदान देता है. अगर किसी भी एलिमेंट को शिफ़्ट नहीं किया जाता, तो debug_target की वैल्यू null होती है.

नीचे दी गई क्वेरी की सूची में पेजों को सबसे खराब से सबसे अच्छे सीएलएस के हिसाब से, 75वें पर्सेंटाइल पर रखा गया है. इस डेटा को debug_target के हिसाब से ग्रुप में रखा गया है:

# Main query logic
SELECT
  page_path,
  debug_target,
  APPROX_QUANTILES(metric_value, 100)[OFFSET(75)] AS metric_p75,
  COUNT(1) as page_views
FROM (
  SELECT
    REGEXP_SUBSTR((SELECT value.string_value FROM UNNEST(event_params) WHERE key = "page_location"), r'\.com(\/[^?]*)') AS page_path,
    (SELECT value.string_value FROM UNNEST(event_params) WHERE key = "debug_target") as debug_target,
    ROUND((SELECT COALESCE(value.double_value, value.int_value) FROM UNNEST(event_params) WHERE key = "metric_value"), 3) AS metric_value,
    *
  FROM web_vitals_events
  WHERE metric_name = 'CLS'
)
GROUP BY 1, 2
# OPTIONAL: You may want to limit your calculations to pages with a 
# minimum number of pageviews to reduce noise in your reports. 
# HAVING page_views > 50
ORDER BY metric_p75 DESC

अगर आपको पता है कि पेज पर कौनसे एलिमेंट शिफ़्ट हो रहे हैं, तो समस्या की असल वजह को पहचानने और उसे ठीक करने में आसानी होगी.

ध्यान रखें कि हो सकता है कि यहां रिपोर्ट किए गए एलिमेंट वे एलिमेंट न हों जो स्थानीय तौर पर पेजों को डीबग करते समय आपको बदलते हुए दिखते हैं. इसलिए, इस डेटा को सबसे पहले कैप्चर करना ज़रूरी है. जिन चीज़ों को आप समस्याओं के बारे में नहीं जानते उन्हें ठीक करना बहुत मुश्किल है!

अन्य मेट्रिक डीबग करना

ऊपर दी गई क्वेरी, सीएलएस मेट्रिक के नतीजे दिखाती है. हालांकि, एलसीपी और आईएनपी के लिए डीबग टारगेट को रिपोर्ट करने के लिए, इसी तकनीक का इस्तेमाल किया जा सकता है. डीबग करने के लिए, WHERE क्लॉज़ को सही मेट्रिक से बदलें:

# Replace:
# WHERE metric_name = 'CLS'
# With:
WHERE metric_name = 'LCP'

8. Data Studio में क्वेरी के नतीजों को विज़ुअलाइज़ करना

BigQuery की मदद से, Data Studio की मदद से किसी क्वेरी के नतीजों को तेज़ी से विज़ुअलाइज़ किया जा सकता है. Data Studio, डेटा विज़ुअलाइज़ेशन और डैशबोर्डिंग टूल है. इसका इस्तेमाल मुफ़्त में किया जा सकता है. BigQuery यूज़र इंटरफ़ेस (यूआई) में अपनी क्वेरी चलाने के बाद, क्वेरी के नतीजों को विज़ुअलाइज़ करने के लिए, डेटा एक्सप्लोर करें पर क्लिक करें और Data Studio की मदद से एक्सप्लोर करें चुनें.

BigQuery में Data Studio विकल्प की मदद से एक्सप्लोर करें

इससे एक्सप्लोरेशन व्यू में, BigQuery से Data Studio में डायरेक्ट लिंक बन जाता है. इस व्यू में, उन फ़ील्ड को चुना जा सकता है जिन्हें आपको विज़ुअलाइज़ करना है, चार्ट के टाइप चुनें, फ़िल्टर सेट अप करें, और ज़रूरत के हिसाब से चार्ट बनाएं. ऊपर दी गई क्वेरी के नतीजों से, यह लाइन चार्ट बनाया जा सकता है. इससे समय के साथ एलसीपी वैल्यू के रुझान देखे जा सकते हैं:

Data Studio में हर दिन की एलसीपी वैल्यू का लाइन चार्ट

BigQuery और Data Studio को आपस में जोड़ने के बाद, अपनी किसी भी क्वेरी से क्विक चार्ट बनाए जा सकते हैं. साथ ही, विज़ुअल विश्लेषण किया जा सकता है. हालांकि, अगर आपको ज़्यादा विश्लेषण करना है, तो बेहतर तरीके से जानकारी पाने या डेटा में ड्रिल-डाउन करने के लिए, इंटरैक्टिव डैशबोर्ड में कई चार्ट देखे जा सकते हैं. एक आसान डैशबोर्ड होने का मतलब है कि आपको क्वेरी लिखने और हर बार अपनी मेट्रिक का विश्लेषण करने के लिए मैन्युअल रूप से चार्ट जनरेट करने की ज़रूरत नहीं है.

आप नेटिव BigQuery कनेक्टर का इस्तेमाल करके Data Studio में एक डैशबोर्ड बना सकते हैं. ऐसा करने के लिए, datastudio.google.com पर जाएं. इसके बाद, एक नया डेटा सोर्स बनाएं, BigQuery कनेक्टर चुनें, और वह डेटासेट चुनें जिसके साथ आपको काम करना है:

Data Studio में BigQuery के नेटिव कनेक्टर का इस्तेमाल करना

9. वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी का डेटा तैयार करें

ऊपर बताए गए तरीके से, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाले इवेंट डेटा के डैशबोर्ड बनाते समय, Google Analytics 4 के एक्सपोर्ट डेटासेट का सीधे तौर पर इस्तेमाल करना सही नहीं है. GA4 डेटा के स्ट्रक्चर और वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक के लिए प्री-प्रोसेसिंग ज़रूरी होने की वजह से, आपकी क्वेरी के कुछ हिस्से कई बार चलते हैं. इससे दो समस्याएं पैदा होती हैं: डैशबोर्ड परफ़ॉर्मेंस और BigQuery की लागतें.

BigQuery सैंडबॉक्स मोड का इस्तेमाल बिना किसी शुल्क के किया जा सकता है. BigQuery के मुफ़्त इस्तेमाल के टीयर की मदद से, हर महीने प्रोसेस किया जाने वाला क्वेरी डेटा का पहला 1 टीबी मुफ़्त है. इस पोस्ट में बताए गए विश्लेषण के तरीकों के हिसाब से, अगर किसी बड़े डेटासेट का इस्तेमाल किया जा रहा है या नियमित तौर पर डेटासेट के बारे में बहुत ज़्यादा क्वेरी की जा रही है, तो आपको हर महीने इस सीमा के अंदर रहना चाहिए. हालांकि, अगर आपकी वेबसाइट पर ज़्यादा ट्रैफ़िक आता है और आपको तेज़ इंटरैक्टिव डैशबोर्ड का इस्तेमाल करके, समय-समय पर अलग-अलग मेट्रिक को मॉनिटर करना है, तो हमारा सुझाव है कि आप अपनी वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी से जुड़े डेटा को प्री-प्रोसेस करें. साथ ही, डेटा इकट्ठा करने के साथ-साथ, BigQuery की परफ़ॉर्मेंस से जुड़ी सुविधाओं का इस्तेमाल करें. इन सुविधाओं में पार्टीशन, क्लस्टरिंग, और कैश मेमोरी जैसी सुविधाएं शामिल हैं.

नीचे दी गई स्क्रिप्ट आपके BigQuery डेटा (सोर्स टेबल) को पहले से प्रोसेस करती है और मटेरियलाइज़्ड टेबल (टारगेट टेबल) बनाती है.

# Materialize Web Vitals metrics from GA4 event export data

# Replace target table name
CREATE OR REPLACE TABLE YOUR_PROJECT_ID.analytics_YOUR_GA_PROPERTY_ID.web_vitals_summary
  PARTITION BY DATE(event_timestamp)
AS
SELECT
  ga_session_id,
  IF(
    EXISTS(SELECT 1 FROM UNNEST(events) AS e WHERE e.event_name = 'first_visit'),
    'New user',
    'Returning user') AS user_type,
  IF(
    (SELECT MAX(session_engaged) FROM UNNEST(events)) > 0, 'Engaged', 'Not engaged')
    AS session_engagement,
  evt.* EXCEPT (session_engaged, event_name),
  event_name AS metric_name,
  FORMAT_TIMESTAMP('%Y%m%d', event_timestamp) AS event_date
FROM
  (
    SELECT
      ga_session_id,
      ARRAY_AGG(custom_event) AS events
    FROM
      (
        SELECT
          ga_session_id,
          STRUCT(
            country,
            device_category,
            device_os,
            traffic_medium,
            traffic_name,
            traffic_source,
            page_path,
            debug_target,
            event_timestamp,
            event_name,
            metric_id,
            IF(event_name = 'LCP', metric_value / 1000, metric_value) AS metric_value,
            user_pseudo_id,
            session_engaged,
            session_revenue) AS custom_event
        FROM
          (
            SELECT
              (SELECT value.int_value FROM UNNEST(event_params) WHERE key = 'ga_session_id')
                AS ga_session_id,
              (SELECT value.string_value FROM UNNEST(event_params) WHERE key = 'metric_id')
                AS metric_id,
              ANY_VALUE(device.category) AS device_category,
              ANY_VALUE(device.operating_system) AS device_os,
              ANY_VALUE(traffic_source.medium) AS traffic_medium,
              ANY_VALUE(traffic_source.name) AS traffic_name,
              ANY_VALUE(traffic_source.source) AS traffic_source,
              ANY_VALUE(
                REGEXP_SUBSTR(
                  (SELECT value.string_value FROM UNNEST(event_params) WHERE key = 'page_location'),
                  r'^[^?]+')) AS page_path,
              ANY_VALUE(
                (SELECT value.string_value FROM UNNEST(event_params) WHERE key = 'debug_target'))
                AS debug_target,
              ANY_VALUE(user_pseudo_id) AS user_pseudo_id,
              ANY_VALUE(geo.country) AS country,
              ANY_VALUE(event_name) AS event_name,
              SUM(ecommerce.purchase_revenue) AS session_revenue,
              MAX(
                (
                  SELECT
                    COALESCE(
                      value.double_value, value.int_value, CAST(value.string_value AS NUMERIC))
                  FROM UNNEST(event_params)
                  WHERE key = 'session_engaged'
                )) AS session_engaged,
              TIMESTAMP_MICROS(MAX(event_timestamp)) AS event_timestamp,
              MAX(
                (
                  SELECT COALESCE(value.double_value, value.int_value)
                  FROM UNNEST(event_params)
                  WHERE key = 'metric_value'
                )) AS metric_value,
            FROM
              # Replace source table name
              `YOUR_PROJECT_ID.analytics_YOUR_GA_PROPERTY_ID.events_*`
            WHERE
              event_name IN ('LCP', 'INP', 'CLS', 'first_visit', 'purchase')
            GROUP BY
              1, 2
          )
      )
    WHERE
      ga_session_id IS NOT NULL
    GROUP BY ga_session_id
  )
CROSS JOIN UNNEST(events) AS evt
WHERE evt.event_name NOT IN ('first_visit', 'purchase');

इस मटेरियलाइज़्ड डेटासेट के कई फ़ायदे हैं:

डेटा स्ट्रक्चर को फ़्लैट किया गया है और क्वेरी करने में यह आसान है.
इसमें, सिर्फ़ GA4 के ओरिजनल डेटासेट से जुड़ी, Web Vitals से जुड़े इवेंट सेव किए जाते हैं.
सेशन आईडी, उपयोगकर्ता टाइप (नए बनाम लौटने वाले) और सेशन के जुड़ाव की जानकारी सीधे कॉलम में उपलब्ध होती है.
टेबल को तारीख के हिसाब से सेगमेंट में बांटा गया है और इसे मेट्रिक के नाम के हिसाब से अलग-अलग ग्रुप में बांटा गया है. आम तौर पर, इससे हर क्वेरी के लिए प्रोसेस किए गए डेटा की संख्या कम हो जाती है.
इस टेबल पर क्वेरी करने के लिए, आपको वाइल्डकार्ड का इस्तेमाल करने की ज़रूरत नहीं है. इसलिए, क्वेरी के नतीजों को 24 घंटे तक कैश मेमोरी में सेव किया जा सकता है. इससे एक ही क्वेरी दोहराने से होने वाला खर्च कम हो जाता है.
BigQuery बीआई इंजन का इस्तेमाल करने पर, इस टेबल पर ऑप्टिमाइज़ किए गए एसक्यूएल फ़ंक्शन और ऑपरेटर चलाए जा सकते हैं.

आप BigQuery यूज़र इंटरफ़ेस (यूआई) से इस मटेरियलाइज़्ड टेबल के लिए सीधे क्वेरी कर सकते हैं या BigQuery कनेक्टर का इस्तेमाल करके, Data Studio में इसका इस्तेमाल कर सकते हैं.

नियमित रूप से मटेरियलाइज़ जॉब चलाएं

अगर ऊपर दी गई क्वेरी को तारीख की सीमा के बिना चलाया जाता है, तो यह आपके पूरे Google Analytics डेटासेट पर चलती है. बड़ी मात्रा में पुराना डेटा फिर से प्रोसेस करने की वजह से, आपको हर दिन ऐसा नहीं करना चाहिए. आप क्वेरी की शुरुआत में CREATE or REPLACE TABLE स्टेटमेंट को हटाकर और सबक्वेरी में WHERE क्लॉज़ में एक अतिरिक्त मानदंड जोड़कर, अपनी क्वेरी में सिर्फ़ पिछले दिन का डेटा शामिल कर सकते हैं. इसके लिए, events_intraday_ टेबल का इस्तेमाल करें:

FROM
  # Replace source table name
  `YOUR_PROJECT_ID.analytics_YOUR_GA_PROPERTY_ID.events_intraday_*`
WHERE
  event_name IN ('LCP', 'INP', 'CLS', 'first_visit', 'purchase')
  # The _TABLE_SUFFIX replaces the asterisk (*) in the table name
  # 
  AND _TABLE_SUFFIX = FORMAT_DATE('%Y%m%d', DATE_SUB(CURRENT_DATE, INTERVAL 1 DAY)

यह क्वेरी सिर्फ़ बीते हुए कल का डेटा दिखाती है. इसके बाद, BigQuery कंसोल का इस्तेमाल करके अपनी क्वेरी को हर दिन चलाने के लिए शेड्यूल करें.

10. Google Data Studio में डेटा को विज़ुअलाइज़ करना

Google डेटा स्टूडियो मूल रूप से Google BigQuery के डेटा को पढ़ने की सुविधा देता है. अब आपके पास BigQuery में, Google Analytics 4 से web-vitals डेटा अपने-आप भरने की सुविधा है. इसलिए, अब आपके पास मटीरियलाइज़ की गई टेबल को सीधे पढ़ने के लिए, Data Studio BigQuery कनेक्टर का इस्तेमाल करने का विकल्प है.

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

डैशबोर्ड को शुरुआत से बनाने में बहुत समय लगता है. इसलिए, हमने एक ऐसा पैकेज तैयार किया है जो आपके लिए टेंप्लेट डैशबोर्ड बनाता है. सबसे पहले, पक्का करें कि आपने ऊपर दी गई क्वेरी का इस्तेमाल करके, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली टेबल तैयार कर ली है. इसके बाद, इस लिंक का इस्तेमाल करके Data Studio के लिए, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी वाले कनेक्टर को ऐक्सेस करें: goo.gle/web-vitals-connector

एक बार अनुमति देने के बाद, आपको यह कॉन्फ़िगरेशन स्क्रीन दिखेगी:

Web Vitals कनेक्टर की अनुमति वाली स्क्रीन

मटेरियलाइज़्ड BigQuery टेबल आईडी (यानी कि टारगेट टेबल) और अपना BigQuery बिलिंग प्रोजेक्ट आईडी दें. कनेक्ट करें पर क्लिक करने के बाद, Data Studio टेंप्लेट वाला एक नया डैशबोर्ड बनाता है और आपके डेटा को उसके साथ जोड़ता है. आपके पास डैशबोर्ड में अपने हिसाब से बदलाव करने, उन्हें शेयर करने, और उनमें बदलाव करने का विकल्प होता है. अगर एक बार डैशबोर्ड बना लिया जाता है, तो आपको कनेक्टर लिंक पर दोबारा जाने की ज़रूरत तब तक नहीं होगी, जब तक कि आपको अलग-अलग डेटासेट से कई डैशबोर्ड न बनाने हों.

डैशबोर्ड पर नेविगेट करना

डैशबोर्ड पर नेविगेट करने पर, आपको खास जानकारी वाले टैब में, वेबसाइट की परफ़ॉर्मेंस से जुड़ी अहम जानकारी की मेट्रिक के रोज़ के रुझानों के साथ-साथ, उपयोगकर्ताओं और सेशन जैसी वेबसाइट के इस्तेमाल से जुड़ी कुछ जानकारी भी दिखेगी.

उपयोगकर्ता विश्लेषण टैब में, कोई मेट्रिक चुनकर मेट्रिक के पर्सेंटाइल की जानकारी मिलती है. साथ ही, इस्तेमाल और कारोबार की अलग-अलग मेट्रिक के हिसाब से उपयोगकर्ताओं की संख्या भी देखी जा सकती है.

पेज पाथ विश्लेषण टैब की मदद से, अपनी वेबसाइट में समस्या वाले हिस्सों की पहचान की जा सकती है. यहां, खास जानकारी देखने के लिए एक मेट्रिक चुनी जा सकती है. साथ ही, आपको y-ऐक्सिस पर पर्सेंटाइल वैल्यू और x-ऐक्सिस पर रिकॉर्ड की संख्या के साथ सभी पेज पाथ का स्कैटर-मैप भी दिखता है. स्कैटर मैप से उन पेजों को पहचानने में मदद मिल सकती है जिनकी मेट्रिक वैल्यू उम्मीद से कम हैं. पेज चुनने के बाद, पेज पाथ टेबल के स्कैटर चार्ट की मदद से या डीबग टारगेट टेबल देखकर, समस्या वाली जगह पर ड्रिल-डाउन किया जा सकता है.

आय विश्लेषण टैब इसका उदाहरण है कि एक ही जगह पर अपने कारोबार और परफ़ॉर्मेंस मेट्रिक की निगरानी कैसे की जा सकती है. इस सेक्शन में वे सभी सेशन दिखाए जाते हैं जिनमें उपयोगकर्ता ने खरीदारी की है. किसी खास सेशन के दौरान हुई आय और उपयोगकर्ता अनुभव की तुलना की जा सकती है.

11. अन्य संसाधन

इस कोडलैब (कोड बनाना सीखना) को पूरा करने के लिए बहुत अच्छे! अब अपनी वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी का बारीकी से आकलन किया जा सकता है. आपको अपनी साइट के उन पेजों टाइप और एलिमेंट की पहचान भी होनी चाहिए जिनकी वजह से ज़्यादा CWV हो रहे हैं, ताकि आप अपने ऑप्टिमाइज़ेशन पर ध्यान दे सकें.

आगे पढ़ें

web.dev में कई लेख और केस स्टडी मौजूद हैं. इनमें वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक को बेहतर बनाने की रणनीतियां भी शामिल हैं. हर मेट्रिक के लिए ऑप्टिमाइज़ किए गए लेखों से शुरुआत करें:

पहचान फ़ाइलें

इस कोडलैब में Web.dev के दो लेखों का बहुत ज़्यादा हिस्सा लिया जाता है:
फ़ील्ड में वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाला लेख.
BigQuery में, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाले GA4 के डेटा का इस्तेमाल करने के बारे में लेख. इसमें, क्वेरी के ऐसे कई उदाहरण दिए गए हैं जिनका इस्तेमाल किया जा सकता है.
अगर आपको GA4 के बारे में ज़्यादा जानकारी चाहिए > BigQuery Export इंटिग्रेशन के लिए, कृपया Google Analytics सहायता केंद्र पर जाएं.

web-ytals.js, Google Analytics, और BigQuery की मदद से परफ़ॉर्मेंस का आकलन करना

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

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

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

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

2. किसी वेब पेज में वेब-वाइटल लाइब्रेरी और gtag जोड़ना

basic.html

basic.html

basic.html

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

4. वेब के डेटा की अहम जानकारी के बारे में ज़्यादा जानें

सीएलएस entries

एलसीपी entries

आईएनपी entries

5. वेब के लिए अहम डेटा को Google Analytics 4 में तैयार करना और भेजना

हर सीडब्ल्यूवी के लिए डीबग की जानकारी को स्ट्रक्चर करना

diagnostics.html

Google Analytics को डेटा भेजना

diagnostics.html

diagnostics.html

6. जांच करें कि Google Analytics में वेब के अहम डेटा की जानकारी अपने-आप भर जाती है या नहीं

7. BigQuery में अपने डेटा के लिए क्वेरी करें

सिर्फ़ CWV इवेंट चुनने के लिए सबक्वेरी

GA4 इवेंट को स्ट्रक्चर करने का तरीका

सबसे खराब परफ़ॉर्मेंस वाले पेजों और एलिमेंट का पता लगाना

अन्य मेट्रिक डीबग करना

8. Data Studio में क्वेरी के नतीजों को विज़ुअलाइज़ करना

9. वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी का डेटा तैयार करें

नियमित रूप से मटेरियलाइज़ जॉब चलाएं

10. Google Data Studio में डेटा को विज़ुअलाइज़ करना

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

डैशबोर्ड पर नेविगेट करना

11. अन्य संसाधन

आगे पढ़ें

पहचान फ़ाइलें

सीएलएस `entries`

एलसीपी `entries`

आईएनपी `entries`