web-vitals.js, Google Analytics এবং BigQuery দিয়ে পারফরম্যান্স পরিমাপ করুন

1. আপনি শুরু করার আগে

আপনি কি করবেন

এই কোডল্যাবে, আপনি যাচ্ছেন:

  • আপনার Google Analytics 4 প্রপার্টি BigQuery-এর সাথে লিঙ্ক করুন।
  • একটি ওয়েব পৃষ্ঠায় web-vitals লাইব্রেরি যোগ করুন।
  • Google Analytics-এ web-vitals ডেটা প্রস্তুত করুন এবং পাঠান।
  • BigQuery-এ আপনার কোর ওয়েব ভাইটাল ডেটা জিজ্ঞাসা করুন।
  • আপনার কোর ওয়েব ভাইটাল ডেটা কল্পনা করতে Google ডেটা স্টুডিওতে একটি ড্যাশবোর্ড তৈরি করুন৷

আপনি কি প্রয়োজন হবে

  • একটি GA4 প্রপার্টি সহ একটি Google Analytics অ্যাকাউন্ট।
  • একটি Google ক্লাউড অ্যাকাউন্ট।
  • একটি Chromium-ভিত্তিক ওয়েব ব্রাউজার, যেমন Google Chrome বা Microsoft Edge। (আপনার কেন একটি Chromium-ভিত্তিক ওয়েব ব্রাউজার প্রয়োজন সে সম্পর্কে আরও তথ্যের জন্য, ব্রাউজার সমর্থন দেখুন।)
  • আপনার পছন্দের একটি পাঠ্য সম্পাদক, যেমন সাবলাইম টেক্সট বা ভিজ্যুয়াল স্টুডিও কোড।
  • web-vitals লাইব্রেরি কীভাবে কাজ করে তা দেখতে আপনার পরীক্ষার পৃষ্ঠাগুলি হোস্ট করার জন্য কোথাও। (আপনি একটি স্থানীয় সার্ভার ব্যবহার করতে পারেন স্ট্যাটিক ওয়েব পৃষ্ঠাগুলি সরবরাহ করতে, বা GitHub-এ আপনার পরীক্ষার পৃষ্ঠাগুলি হোস্ট করতে পারেন ৷)
  • একটি সর্বজনীন সাইট যেখানে আপনি আপনার বিশ্লেষণ কোড স্থাপন করতে পারেন। (আপনার কোড প্রোডাকশনে আনার ফলে এই কোডল্যাবের শেষে BigQuery এবং ডেটা স্টুডিওর উদাহরণ আরও বোধগম্য হয়।)
  • HTML, CSS, JavaScript এবং Chrome DevTools এর জ্ঞান।

আপনি শুরু করার আগে

প্রথমে, Google Analytics 4 কে BigQuery-এর সাথে লিঙ্ক করুন, যাতে আপনি আপনার কোড লাইভ হওয়ার সাথে সাথে পারফরম্যান্স বিশ্লেষণ করা শুরু করতে পারেন।

আপনার GA4 প্রপার্টি BigQuery-এর সাথে লিঙ্ক করতে Google Analytics সহায়তা কেন্দ্রের ধাপগুলি অনুসরণ করুন।

এখন যেহেতু আপনার Google Analytics প্রপার্টি BigQuery-এ ইভেন্ট ডেটা এক্সপোর্ট করার জন্য প্রস্তুত, আপনার সাইটে web-vitals লাইব্রেরি একীভূত করুন।

2. একটি ওয়েব পেজে ওয়েব-ভাইটাল লাইব্রেরি এবং gtag যোগ করুন

প্রথমে, একটি ওয়েব পেজে web-vitals লাইব্রেরি যোগ করুন।

  1. একটি পৃষ্ঠা টেমপ্লেট খুলুন যেখানে আপনি web-vitals লাইব্রেরি যোগ করতে চান। এই উদাহরণের জন্য, আমরা একটি সাধারণ পৃষ্ঠা ব্যবহার করতে যাচ্ছি:

মৌলিক.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 লাইব্রেরি লোড করে।

মৌলিক.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>

ফলাফল কোড এই মত হওয়া উচিত.

মৌলিক.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. ওয়েব পৃষ্ঠার মূল ওয়েব ভাইটালগুলি পরিমাপ করুন৷

কোর ওয়েব ভাইটাল হল বাস্তব-ব্যবহারকারীর অভিজ্ঞতার একটি পরিমাপ, যেমনটি ক্রোম বা ক্রোমিয়াম ব্রাউজারে web-vitals লাইব্রেরির মাধ্যমে ক্যাপচার করা হয়। আপনি যখন প্রোডাকশনের জন্য web-vitals প্রকাশ করেন, আপনি ব্যবহারকারীদের সংযোগের গতি, ডিভাইসের শক্তি এবং তারা আপনার সাইটের সাথে কীভাবে ইন্টারঅ্যাক্ট করেন তার উপর ভিত্তি করে ফলাফলের বিস্তৃত পরিসর দেখতে পান। web-vitals লাইব্রেরির ক্ষমতা প্রদর্শন করতে, আমরা একটি ধীর সংযোগ সহ একটি ব্যবহারকারীর অভিজ্ঞতা অনুকরণ করতে যাচ্ছি।

  1. আপনার ওয়েব ব্রাউজারে সংরক্ষিত ফাইলটি খুলুন।
  2. ওয়েব পেজে রাইট ক্লিক করুন।
  3. গুগল ক্রোম ডেভেলপার টুল খুলতে পরিদর্শনে ক্লিক করুন।

1d60156133044215.png

  1. কনসোল ট্যাব > কনসোল সেটিংসে ক্লিক করুন b5c716ebfacfd86.png .

a310e2b6e03891a1.png

  1. আপনি যখন ওয়েব পৃষ্ঠা রিফ্রেশ করবেন তখন লগগুলিকে স্থায়ী করতে লগ সংরক্ষণ করুন চেকবক্সটি নির্বাচন করুন।

cdfbcd3315aa45cd.png

  1. একটি ধীর নেটওয়ার্ক সংযোগ অনুকরণ করতে নেটওয়ার্ক ট্যাব > অনলাইন > স্লো 3G এ ক্লিক করুন।

b1fab3d167d032f0.png

  1. কনসোল ট্যাবে ক্লিক করুন।
  2. প্রিন্ট করার জন্য সবচেয়ে বড় কন্টেন্টফুল পেইন্টের (LCP) মেট্রিককে জোর করতে ওয়েব পৃষ্ঠার যেকোনো জায়গায় ক্লিক করুন।
  3. এই পৃষ্ঠাটি পুনরায় লোড করুন ক্লিক করুন acaaa8c0fdd33b1.png ক্রমবর্ধমান লেআউট শিফট (সিএলএস) এবং ইন্টারঅ্যাকশন টু নেক্সট পেইন্ট (আইএনপি) এর মেট্রিক্সকে প্রিন্ট করতে বাধ্য করতে।

e18b530e48108a4.png

  1. একটি দ্রুত নেটওয়ার্ক সংযোগ অনুকরণ করতে নেটওয়ার্ক ট্যাব > অনলাইন > দ্রুত 3G এ ক্লিক করুন।
  2. কনসোল ট্যাবে ক্লিক করুন।
  3. LCP-এর মেট্রিক আবার প্রিন্ট করতে বাধ্য করতে ওয়েব পৃষ্ঠার যেকোনো জায়গায় ক্লিক করুন।

e5d5ca555ded9f7a.png

  1. এই পৃষ্ঠাটি পুনরায় লোড করুন ক্লিক করুন acaaa8c0fdd33b1.png CLS এবং INP-এর মেট্রিক্সকে আবার প্রিন্ট করতে বাধ্য করতে।

e8bde4594a01021b.png

তাই তো! আপনি ওয়েব পৃষ্ঠার মূল ওয়েব ভাইটালগুলি পরিমাপ করেছেন৷

4. আরও বিস্তারিতভাবে ওয়েব-ভাইটাল ডেটা অন্বেষণ করুন

আপনি যে সমস্ত কোর ওয়েব ভাইটাল ইভেন্টগুলি পরিমাপ করছেন তার প্রতিটির জন্য, প্রত্যাবর্তিত ডেটাতে প্রচুর তথ্য উপলব্ধ রয়েছে যা আপনি পারফরম্যান্সের বাধাগুলি ডিবাগ করতে ব্যবহার করতে পারেন৷ প্রতিটি web-vitals ইভেন্টে একটি entries অ্যারে থাকে, যেখানে বর্তমান মেট্রিক মানের অবদানকারী ইভেন্টগুলি সম্পর্কে তথ্য থাকে।

CLS entries

onCLS() দ্বারা লগ করা বস্তুর entries সম্পত্তি প্রসারিত করা আপনাকে LayoutShift এন্ট্রিগুলির একটি তালিকা দেখায়। প্রতিটি LayoutShift লেআউট শিফট স্কোর প্রতিফলিত করে একটি value বৈশিষ্ট্য রয়েছে এবং একটি sources অ্যারে যা আমরা দেখতে পারি কোন উপাদানগুলি স্থানান্তরিত হয়েছে তা দেখতে।

355f0ff58e735079.png

এই উদাহরণে, দুটি লেআউট স্থানান্তর ঘটেছে, উভয়ই পৃষ্ঠায় একটি h1 উপাদানকে সরিয়ে দিচ্ছে। currentRect প্রপার্টি আমাদের বলে যে এলিমেন্টটি এখন কোথায় আছে এবং previousRect এলিমেন্ট আমাদের বলে যে এটি আগে কোথায় ছিল।

LCP entries

onLCP() দ্বারা লগ করা বস্তুর এন্ট্রি সম্পত্তি প্রসারিত করা আমাদের দেখায় যে কোন উপাদানগুলি চূড়ান্ত মান রিপোর্ট করার আগে সবচেয়ে বড় বিষয়বস্তুর পেইন্টের প্রার্থী ছিল।

737ebf826005dbe7.png

এই উদাহরণে, entries অ্যারেতে কালানুক্রমিক ক্রমে সমস্ত LCP প্রার্থীদের একটি তালিকা রয়েছে। এই ক্ষেত্রে, একটি h1 উপাদান প্রথমে রেন্ডার করা হয়েছিল, একটি img উপাদান দ্বারা অনুসরণ করা হয়েছিল। img ছিল সবচেয়ে বড় কন্টেন্টফুল পেইন্ট। রিপোর্ট করা এলসিপি উপাদান সবসময় অ্যারের শেষ আইটেম।

INP entries

আপনি যখন onINP(), দ্বারা লগ করা বস্তুর entries বৈশিষ্ট্য প্রসারিত করেন, তখন এটি পৃষ্ঠার পরবর্তী পেইন্টে ইন্টারঅ্যাকশনের জন্য PerformanceEventTiming এন্ট্রি ধারণকারী একটি অ্যারে দেখায়।

a63ef33575c3218d.png

name বৈশিষ্ট্যটি আপনাকে বলে যে কোন ধরনের ব্যবহারকারীর ইনপুট প্রধান থ্রেড উপলব্ধতার জন্য টাইমারটিকে ট্রিগার করেছে। web-vitals যে value রিপোর্ট করে তা হল PerformanceEventTiming এন্ট্রির duration বৈশিষ্ট্য হিসাবে প্রদত্ত বিলম্ব, যা মাইক্রোসেকেন্ড থেকে মিলিসেকেন্ডে রূপান্তরিত হয়৷ এই ক্ষেত্রে, পরিমাপ করা INP হল 48 মিলিসেকেন্ড।

5. Google Analytics 4-এ ওয়েব-ভাইটাল ডেটা প্রস্তুত করুন এবং পাঠান

আপনি Google Analytics 4-এ web-vitals ডেটা পাঠাতে পারার আগে, এটিকে একটি ফর্ম্যাটে রূপান্তর করতে হবে যা 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 4 সম্পত্তি দ্বারা রেকর্ড করা হয়েছে তা নিশ্চিত করতে:

  1. আপনার Google Analytics 4 প্রপার্টি খুলুন এবং রিপোর্টে নেভিগেট করুন।

ab1bf51ba70f3609.png

  1. রিয়েলটাইম নির্বাচন করুন।

65a5b8087b09b2a.png

  1. আপনার পরীক্ষার পৃষ্ঠাটি কয়েকবার রিফ্রেশ করুন এবং INP ইভেন্টগুলি ট্রিগার করতে রিফ্রেশের মধ্যে পৃষ্ঠাটিতে ক্লিক করা নিশ্চিত করুন৷
  2. রিয়েলটাইম ওভারভিউ UI এর ইভেন্টের নাম বিভাগ দ্বারা ইভেন্ট গণনা খুঁজুন। আপনি LCP, INP, এবং CLS ইভেন্ট দেখতে হবে.

f92b276df1c2f6ce.png

  1. সেই ইভেন্টগুলির সাথে পাস করা পরামিতিগুলি দেখতে ইভেন্টের নামগুলির যেকোনো একটিতে ক্লিক করুন৷

8529bd743f121dd9.png

  1. Google Analytics প্রাপ্ত মানগুলির সারসংক্ষেপ দেখতে সেই প্যারামিটার কীগুলিতে ক্লিক করুন৷

f0cf6a3dd607d533.png

আপনি আপনার ডিবাগ তথ্যে অন্যান্য ডেটা যোগ করতে চাইতে পারেন, যেমন পৃষ্ঠার টেমপ্লেট নাম বা INP-এর সাথে প্রাসঙ্গিক অন্যান্য পৃষ্ঠা ইভেন্ট যা এই কোডল্যাবে আগে আলোচনা করা হয়েছে। getDebugInfo() ফাংশনে শুধু return স্টেটমেন্টগুলি পরিবর্তন করুন।

একবার আপনি আপনার পরীক্ষার পৃষ্ঠাগুলি থেকে আসা ডেটা নিয়ে খুশি হলে, আপনার সাইটের উৎপাদনে আপনার নতুন GA কোড স্থাপন করুন এবং পরবর্তী ধাপে যান৷

7. BigQuery-এ আপনার ডেটা জিজ্ঞাসা করুন

আপনার Google Analytics কোড কয়েক দিনের জন্য লাইভ হয়ে গেলে, আপনি BigQuery-এ ডেটা অনুসন্ধান করা শুরু করতে পারেন। প্রথমে, ডেটা BigQuery-এ ট্রান্সফার করা হচ্ছে কিনা দেখে নিন।

  1. Google ক্লাউড কনসোল খুলুন এবং স্ক্রিনের শীর্ষে ড্রপ ডাউন মেনু থেকে আপনার প্রকল্পটি নির্বাচন করুন।
  2. নেভিগেশন মেনু থেকে 3cbb0e5fcc230aef.png স্ক্রিনের উপরের বাম দিকে, অ্যানালিটিক্স হেডারের অধীনে BigQuery- এ ক্লিক করুন।
  3. এক্সপ্লোরার ফলকে, আপনার Google Analytics ডেটাসেট দেখতে আপনার প্রকল্পটি প্রসারিত করুন। ডেটাসেটের নাম হল analytics_ এর পরে আপনার Google Analytics 4 প্রপার্টি ID (যেমন, analytics_229787100) ।
  4. ডেটাসেট প্রসারিত করুন এবং আপনার একটি events_ টেবিল দেখতে হবে। বন্ধনীর সংখ্যা হল প্রশ্নের জন্য উপলব্ধ দিনের সংখ্যা।

শুধুমাত্র CWV ইভেন্ট নির্বাচন করতে সাবকোয়েরি

শুধুমাত্র আমাদের CWV ইভেন্টগুলি অন্তর্ভুক্ত করে এমন একটি ডেটা সেট জিজ্ঞাসা করতে, একটি সাবকোয়েরি দিয়ে শুরু করুন যা LCP, CLS এবং INP ইভেন্টগুলির শেষ 28 দিনের নির্বাচন করে৷ আপনি একই CWV ইভেন্টকে একাধিকবার গণনা করছেন না তা নিশ্চিত করতে metric_id কী ব্যবহার করে এটি বিশেষভাবে প্রতিটি web-vitals ইভেন্ট আইডির জন্য শেষ রিপোর্ট করা মান খোঁজে।

# 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 the 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 হল একটি CSS নির্বাচক স্ট্রিং যা মেট্রিক মানের সাথে সবচেয়ে প্রাসঙ্গিক পৃষ্ঠার উপাদানের সাথে মিলে যায়।

CLS-এর সাথে, debug_target বৃহত্তম লেআউট শিফট থেকে সবচেয়ে বড় উপাদানের প্রতিনিধিত্ব করে যা CLS মানতে অবদান রাখে। যদি কোনো উপাদান স্থানান্তরিত না হয় তাহলে debug_target মান null হয়।

নিম্নোক্ত ক্যোয়ারী তালিকার পৃষ্ঠাগুলি সবচেয়ে খারাপ থেকে সেরা পর্যন্ত তাদের CLS দ্বারা 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

আপনি যদি জানেন যে পৃষ্ঠার কোন উপাদানগুলি স্থানান্তরিত হচ্ছে, তাহলে এটি সমস্যার মূল কারণ সনাক্ত করা এবং সমাধান করা আরও সহজ করে তুলবে৷

মনে রাখবেন যে এখানে রিপোর্ট করা উপাদানগুলি একই উপাদান নাও হতে পারে যা আপনি স্থানীয়ভাবে আপনার পৃষ্ঠাগুলি ডিবাগ করার সময় স্থানান্তরিত হতে দেখেন, এই কারণেই প্রথম স্থানে এই ডেটা ক্যাপচার করা খুবই গুরুত্বপূর্ণ৷ আপনি যে সমস্যাগুলি বুঝতে পারেন না তা ঠিক করা খুব কঠিন!

অন্যান্য মেট্রিক্স ডিবাগ করুন

উপরের ক্যোয়ারীটি CLS মেট্রিকের ফলাফল দেখায়, কিন্তু LCP এবং INP-এর জন্য ডিবাগ টার্গেট রিপোর্ট করতে ঠিক একই কৌশল ব্যবহার করা যেতে পারে। ডিবাগ করতে প্রাসঙ্গিক মেট্রিক দিয়ে শুধু WHERE ক্লজটি প্রতিস্থাপন করুন: 

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

8. ডেটা স্টুডিওতে ক্যোয়ারী ফলাফল ভিজ্যুয়ালাইজ করুন

BigQuery ডেটা স্টুডিওর মাধ্যমে যেকোন প্রশ্নের ফলাফল কল্পনা করার একটি দ্রুত উপায় প্রদান করে। ডেটা স্টুডিও হল একটি ডেটা ভিজ্যুয়ালাইজেশন এবং ড্যাশবোর্ডিং টুল যা বিনামূল্যে ব্যবহার করা যায়। BigQuery UI-তে আপনার ক্যোয়ারী চালানোর পরে আপনার কোয়েরির ফলাফলগুলি কল্পনা করতে, ডেটা এক্সপ্লোর করুন ক্লিক করুন এবং ডেটা স্টুডিও দিয়ে এক্সপ্লোর করুন নির্বাচন করুন।

BigQuery-এ ডেটা স্টুডিও বিকল্পের মাধ্যমে অন্বেষণ করুন

এটি এক্সপ্লোর ভিউতে BigQuery থেকে ডেটা স্টুডিওতে একটি সরাসরি লিঙ্ক তৈরি করে। এই দৃশ্যে, আপনি যে ক্ষেত্রগুলিকে কল্পনা করতে চান তা নির্বাচন করতে পারেন, চার্টের ধরনগুলি বেছে নিতে পারেন, ফিল্টারগুলি সেট আপ করতে এবং দ্রুত ভিজ্যুয়াল বিশ্লেষণের জন্য অ্যাডহক চার্ট তৈরি করতে পারেন৷ উপরের ক্যোয়ারী ফলাফল থেকে, আপনি সময়ের সাথে LCP মানগুলির প্রবণতা দেখতে এই লাইন চার্ট তৈরি করতে পারেন:

ডেটা স্টুডিওতে দৈনিক LCP মানগুলির লাইন চার্ট

BigQuery এবং ডেটা স্টুডিওর মধ্যে এই সরাসরি লিঙ্কের সাহায্যে, আপনি আপনার যেকোনো প্রশ্ন থেকে দ্রুত চার্ট তৈরি করতে এবং ভিজ্যুয়াল বিশ্লেষণ করতে পারেন। যাইহোক, আপনি যদি অতিরিক্ত বিশ্লেষণ করতে চান, তাহলে আপনি একটি ইন্টারেক্টিভ ড্যাশবোর্ডে আরও সামগ্রিক দৃশ্য পেতে বা ডেটাতে ড্রিল ডাউন করতে সক্ষম হওয়ার জন্য বেশ কয়েকটি চার্ট দেখতে চাইতে পারেন। একটি সহজ ড্যাশবোর্ড থাকার অর্থ হল আপনি যখনই আপনার মেট্রিক্স বিশ্লেষণ করতে চান তখন আপনাকে প্রশ্নগুলি লিখতে এবং ম্যানুয়ালি চার্ট তৈরি করতে হবে না।

আপনি নেটিভ BigQuery সংযোগকারী ব্যবহার করে ডেটা স্টুডিওতে একটি ড্যাশবোর্ড তৈরি করতে পারেন। এটি করতে, datastudio.google.com- এ নেভিগেট করুন, একটি নতুন ডেটা উত্স তৈরি করুন, BigQuery সংযোগকারী নির্বাচন করুন এবং আপনি যে ডেটাসেটটির সাথে কাজ করতে চান তা চয়ন করুন:

ডেটা স্টুডিওতে BigQuery নেটিভ কানেক্টর ব্যবহার করা

9. ওয়েব ভাইটাল ডেটা বস্তুগত করুন

উপরে বর্ণিত ওয়েব ভাইটাল ইভেন্ট ডেটার ড্যাশবোর্ড তৈরি করার সময়, Google Analytics 4 এক্সপোর্ট ডেটাসেট সরাসরি ব্যবহার করা কার্যকর নয়। GA4 ডেটার গঠন এবং ওয়েব ভাইটাল মেট্রিক্সের জন্য প্রয়োজনীয় প্রি-প্রসেসিংয়ের কারণে, আপনার ক্যোয়ারীটির কিছু অংশ একাধিকবার চলে। এটি দুটি সমস্যা তৈরি করে: ড্যাশবোর্ডের কার্যক্ষমতা এবং BigQuery খরচ।

আপনি বিনামূল্যে BigQuery স্যান্ডবক্স মোড ব্যবহার করতে পারেন৷ BigQuery-এর বিনামূল্যে ব্যবহারের স্তরের সাথে, প্রতি মাসে প্রক্রিয়া করা প্রথম 1 TB কোয়েরি ডেটা বিনামূল্যে। এই পোস্টে আলোচনা করা বিশ্লেষণ পদ্ধতির জন্য, যদি না আপনি একটি উল্লেখযোগ্যভাবে বড় ডেটাসেট ব্যবহার করছেন বা নিয়মিতভাবে ডেটাসেট নিয়ে অনুসন্ধান করছেন, আপনি প্রতি মাসে এই বিনামূল্যের সীমার মধ্যে থাকতে পারবেন। কিন্তু যদি আপনার একটি উচ্চ ট্রাফিক ওয়েবসাইট থাকে এবং আপনি একটি দ্রুত ইন্টারেক্টিভ ড্যাশবোর্ড ব্যবহার করে নিয়মিতভাবে বিভিন্ন মেট্রিক নিরীক্ষণ করতে চান, তাহলে আমরা বিগকুয়েরি কার্যকারিতা বৈশিষ্ট্য যেমন পার্টিশনিং, ক্লাস্টারিং এবং ক্যাশিং ব্যবহার করার সময় আপনার ওয়েব ভিটালস ডেটা প্রিপ্রসেসিং এবং বাস্তবায়িত করার পরামর্শ দিই।

নিম্নলিখিত স্ক্রিপ্টটি আপনার 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 ইঞ্জিন ব্যবহার করলে, আপনি এই টেবিলে অপ্টিমাইজ করা SQL ফাংশন এবং অপারেটর চালাতে পারেন।

আপনি BigQuery UI এর মধ্যে থেকে সরাসরি এই বস্তুগত সারণীটি অনুসন্ধান করতে পারেন, অথবা BigQuery সংযোগকারী ব্যবহার করে ডেটা স্টুডিওতে এটি ব্যবহার করতে পারেন।

নিয়মিত বাস্তবায়িত চাকরি চালান

আপনি যদি তারিখের ব্যাপ্তি ছাড়া উপরের ক্যোয়ারীটি চালান, তাহলে এটি আপনার সমগ্র 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 কনসোল ব্যবহার করে আপনার ক্যোয়ারীকে প্রতিদিন চলার জন্য নির্ধারিত করতে পারেন।

10. Google ডেটা স্টুডিওতে ডেটা ভিজ্যুয়ালাইজ করুন

Google Data Studio নেটিভভাবে Google BigQuery থেকে ডেটা পড়া সমর্থন করে। এখন যেহেতু আপনার কাছে BigQuery-এ Google Analytics 4-এর web-vitals ডেটা রয়েছে, আপনি ডেটা স্টুডিও BigQuery সংযোগকারী ব্যবহার করে সরাসরি আপনার বস্তুগত সারণী পড়তে পারেন।

ওয়েব ভাইটালস কানেক্টর ব্যবহার করুন

যেহেতু স্ক্র্যাচ থেকে একটি ড্যাশবোর্ড তৈরি করা সময়সাপেক্ষ, তাই আমরা একটি প্যাকেজড সমাধান তৈরি করেছি যা আপনার জন্য একটি টেমপ্লেট ড্যাশবোর্ড তৈরি করে৷ প্রথমে, নিশ্চিত করুন যে আপনি উপরের ক্যোয়ারীটি ব্যবহার করে আপনার ওয়েব ভাইটাল টেবিলটি বাস্তবায়িত করেছেন। তারপরে এই লিঙ্কটি ব্যবহার করে ডেটা স্টুডিওর জন্য ওয়েব ভাইটালস সংযোগকারী অ্যাক্সেস করুন: goo.gle/web-vitals-connector

একবার অনুমোদন দেওয়ার পরে, আপনাকে নিম্নলিখিত কনফিগারেশন স্ক্রীনটি দেখতে হবে:

ওয়েব ভাইটালস সংযোগকারী অনুমোদন স্ক্রীন

বাস্তবায়িত BigQuery টেবিল আইডি (যেমন, টার্গেট টেবিল) এবং আপনার BigQuery বিলিং প্রোজেক্ট আইডি প্রদান করুন। আপনি কানেক্ট ক্লিক করার পরে, ডেটা স্টুডিও একটি নতুন টেমপ্লেটেড ড্যাশবোর্ড তৈরি করে এবং এটির সাথে আপনার ডেটা যুক্ত করে। আপনি আপনার পছন্দ মতো ড্যাশবোর্ড সম্পাদনা, পরিবর্তন এবং ভাগ করতে পারেন। আপনি যদি একবার একটি ড্যাশবোর্ড তৈরি করেন, তাহলে আপনাকে আবার সংযোগকারী লিঙ্কটিতে যেতে হবে না যদি না আপনি বিভিন্ন ডেটাসেট থেকে একাধিক ড্যাশবোর্ড তৈরি করতে চান।

আপনি ড্যাশবোর্ডে নেভিগেট করার সাথে সাথে, আপনি সারাংশ ট্যাবে ওয়েব ভাইটাল মেট্রিক্সের দৈনিক প্রবণতা এবং আপনার ওয়েবসাইটের ব্যবহারকারী এবং সেশনের মতো কিছু ব্যবহারের তথ্য দেখতে পাবেন।

ব্যবহারকারী বিশ্লেষণ ট্যাবে, আপনি একটি মেট্রিক নির্বাচন করতে পারেন এবং বিভিন্ন ব্যবহার এবং ব্যবসায়িক মেট্রিক্স দ্বারা মেট্রিক্স শতাংশের পাশাপাশি ব্যবহারকারীর সংখ্যার ভাঙ্গন পেতে পারেন।

পৃষ্ঠা পাথ বিশ্লেষণ ট্যাব আপনাকে আপনার ওয়েবসাইটে সমস্যা ক্ষেত্র চিহ্নিত করতে সাহায্য করে। এখানে, আপনি ওভারভিউ দেখতে একটি মেট্রিক বাছাই করতে পারেন, তবে আপনি y-অক্ষের শতকরা মান সহ সমস্ত পৃষ্ঠার পথের স্ক্যাটার-ম্যাপ এবং x-অক্ষে রেকর্ড গণনাও দেখতে পারেন। স্ক্যাটার ম্যাপ প্রত্যাশিত মেট্রিক মানগুলির চেয়ে কম পৃষ্ঠাগুলি সনাক্ত করতে সাহায্য করতে পারে। একবার আপনি পৃষ্ঠাগুলি নির্বাচন করলে, আপনি পৃষ্ঠার পথ টেবিলের স্ক্যাটার চার্টের সাহায্যে বা ডিবাগ টার্গেট টেবিলটি দেখার মাধ্যমে সমস্যা এলাকায় আরও ড্রিল করতে পারেন।

আপনি কিভাবে একই জায়গায় আপনার ব্যবসা এবং কর্মক্ষমতা মেট্রিক্স নিরীক্ষণ করতে পারেন তার একটি উদাহরণ হল রাজস্ব বিশ্লেষণ ট্যাব। এই বিভাগটি সমস্ত সেশন প্লট করে যেখানে ব্যবহারকারী একটি ক্রয় করেছেন৷ আপনি একটি নির্দিষ্ট সেশন চলাকালীন ব্যবহারকারীর অভিজ্ঞতার সাথে অর্জিত আয়ের তুলনা করতে পারেন।

11. অন্যান্য সম্পদ

এই কোডল্যাব সম্পূর্ণ করার জন্য ভাল! আপনি এখন উচ্চ স্তরের গ্রানুলিটি সহ আপনার সাইট জুড়ে আপনার কোর ওয়েব ভাইটাল কর্মক্ষমতা ট্র্যাক রাখতে সক্ষম হবেন। এছাড়াও আপনি আপনার সাইটের নির্দিষ্ট পৃষ্ঠার ধরন এবং উপাদানগুলি সনাক্ত করতে সক্ষম হবেন যা উচ্চ CWV সৃষ্টি করছে যাতে আপনি আপনার অপ্টিমাইজেশানগুলিতে ফোকাস করতে পারেন।

আরও পড়া

web.dev-এর কোর ওয়েব ভাইটাল উন্নত করার কৌশল সহ প্রচুর নিবন্ধ এবং কেস স্টাডি রয়েছে। প্রতিটি মেট্রিকের জন্য অপ্টিমাইজ নিবন্ধ দিয়ে শুরু করুন:

রেফারেন্স ডক্স