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

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

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

इस कोडलैब में, आपको ये काम करने हैं:

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

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

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

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

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

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

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

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

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

  1. वह पेज टेंप्लेट खोलें जिसमें आपको 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>
  1. सोर्स कोड को टेक्स्ट एडिटर में मौजूद किसी खाली फ़ाइल में चिपकाएं.
  2. फ़ाइल को डिवाइस पर basic.html के तौर पर सेव करें.
  3. इस मॉड्यूल स्क्रिप्ट को कॉपी करें और इसे बंद होने वाले </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>

इससे मिलने वाला कोड कुछ ऐसा दिखेगा.

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>
  1. फ़ाइल सेव करें.

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

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

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

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

1d60156133044215.png

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

a310e2b6e03891a1.png

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

cdfbcd3315aa45cd.png

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

b1fab3d167d032f0.png

  1. कंसोल टैब पर क्लिक करें.
  2. सबसे बड़े एलिमेंट को रेंडर करने में लगने वाले समय (एलसीपी) की मेट्रिक को प्रिंट करने के लिए, वेब पेज पर कहीं भी क्लिक करें.
  3. कुल लेआउट शिफ़्ट (सीएलएस) और पेज के रिस्पॉन्स में लगने वाला समय (आईएनपी) की मेट्रिक को प्रिंट करने के लिए, इस पेज को फिर से लोड करें acaaa8c0fdd33b1.png पर क्लिक करें.

e18b530e48108a4.png

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

e5d5ca555ded9f7a.png

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

e8bde4594a01021b.png

हो गया! आपने वेब पेज की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक मेज़र की हों.

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

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

सीएलएस entries

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

355f0ff58e735079.png

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

एलसीपी entries

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

737ebf826005dbe7.png

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

आईएनपी entries

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

a63ef33575c3218d.png

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

5. Google Analytics 4 में वेब-वाइटल का डेटा तैयार करना और भेजना

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

हर CWV के लिए डीबग करने से जुड़ी जानकारी को व्यवस्थित करें

इस कोड को 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 प्रॉपर्टी, आपके इवेंट रिकॉर्ड कर रही है:

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

ab1bf51ba70f3609.png

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

65a5b8087b09b2a.png

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

f92b276df1c2f6ce.png

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

8529bd743f121dd9.png

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

f0cf6a3dd607d533.png

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

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

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

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

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

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

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

1bbbd957b4292ced.png

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

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

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

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

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

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

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

BigQuery में &#39;Data Studio की मदद से एक्सप्लोर करें&#39; विकल्प का इस्तेमाल करना

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

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

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

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

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

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

ऊपर बताए गए तरीके से, वेबसाइट की परफ़ॉर्मेंस से जुड़े इवेंट डेटा के डैशबोर्ड बनाते समय, Google Analytics 4 के एक्सपोर्ट किए गए डेटासेट का सीधे तौर पर इस्तेमाल करना सही नहीं है. GA4 डेटा के स्ट्रक्चर और Web Vitals मेट्रिक के लिए ज़रूरी प्रीप्रोसेसिंग की वजह से, आपकी क्वेरी के कुछ हिस्से कई बार चलते हैं. इससे दो समस्याएं होती हैं: डैशबोर्ड की परफ़ॉर्मेंस और 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 डेटासेट से सिर्फ़ वेब वाइटल्स इवेंट बनाए रखता है.
  • सेशन आईडी, उपयोगकर्ता का टाइप (नया बनाम लौटने वाला), और सेशन में जुड़ाव की जानकारी सीधे तौर पर कॉलम में उपलब्ध होती है.
  • टेबल को तारीख के हिसाब से पार्टिशन किया गया है और मेट्रिक के नाम के हिसाब से क्लस्टर किया गया है. इससे आम तौर पर, हर क्वेरी के लिए प्रोसेस किए जाने वाले डेटा की मात्रा कम हो जाती है.
  • इस टेबल को क्वेरी करने के लिए, वाइल्डकार्ड का इस्तेमाल करने की ज़रूरत नहीं होती. इसलिए, क्वेरी के नतीजों को 24 घंटे तक कैश मेमोरी में सेव किया जा सकता है. इससे एक ही क्वेरी को बार-बार दोहराने की लागत कम हो जाती है.
  • BigQuery BI Engine का इस्तेमाल करने पर, इस टेबल पर ऑप्टिमाइज़ किए गए एसक्यूएल फ़ंक्शन और ऑपरेटर इस्तेमाल किए जा सकते हैं.

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

नियमित तौर पर मटीरियलाइज़ेशन की प्रोसेस को चालू करना

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

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 Console का इस्तेमाल करके, क्वेरी को हर दिन चलाने के लिए शेड्यूल किया जा सकता है.

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

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

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

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

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

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

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

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

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

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

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

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

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

इस बारे में और पढ़ें

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

रेफ़रंस दस्तावेज़