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

১. শুরু করার আগে

আপনি যা করবেন

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

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

আপনার যা যা লাগবে

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

শুরু করার আগে

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

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

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

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

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

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

বেসিক.এইচটিএমএল 

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

বেসিক.এইচটিএমএল 

<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>

চূড়ান্ত কোডটি দেখতে এইরকম হবে।

বেসিক.এইচটিএমএল 

<!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 লাইব্রেরিটি যুক্ত করেছেন।

৩. ওয়েব পেজের মূল ওয়েব উপাদানগুলো পরিমাপ করুন

কোর ওয়েব ভাইটালস হলো বাস্তব ব্যবহারকারীর অভিজ্ঞতার একটি পরিমাপ, যা ক্রোম অথবা ক্রোমিয়াম ব্রাউজারের 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 কিউমুলেটিভ লেআউট শিফট (CLS) এবং ইন্টারঅ্যাকশন টু নেক্সট পেইন্ট (INP)-এর মেট্রিকগুলো প্রিন্ট করতে বাধ্য করা।

e18b530e48108a4.png

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

e5d5ca555ded9f7a.png

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

e8bde4594a01021b.png

ব্যাস! আপনি ওয়েব পেজটির কোর ওয়েব ভাইটালস পরিমাপ করে ফেলেছেন।

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

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

সিএলএস entries

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

355f0ff58e735079.png

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

এলসিপি entries

onLCP() দ্বারা লগ করা অবজেক্টের entries প্রপার্টিটি এক্সপ্যান্ড করলে আমরা দেখতে পাই যে চূড়ান্ত মান রিপোর্ট করার আগে কোন এলিমেন্টগুলো Largest Contentful Paint-এর জন্য প্রার্থী ছিল।

737ebf826005dbe7.png

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

আইএনপি entries

যখন আপনি onINP(), দ্বারা লগ করা অবজেক্টের entries প্রপার্টিটি এক্সপ্যান্ড করেন, তখন এটি একটি অ্যারে দেখায়, যেটিতে পেজে পরবর্তী ইন্টারঅ্যাকশনটি পেইন্ট করার জন্য PerformanceEventTiming এন্ট্রিটি থাকে।

a63ef33575c3218d.png

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

৫. ওয়েব-ভাইটালস ডেটা প্রস্তুত করে গুগল অ্যানালিটিক্স ৪-এ পাঠান

Google Analytics 4-এ web-vitals ডেটা পাঠানোর আগে, সেটিকে এমন একটি ফরম্যাটে রূপান্তর করতে হবে যা GA4 গ্রহণ করতে পারে।

প্রতিটি CWV-এর জন্য ডিবাগ তথ্যের কাঠামো তৈরি করুন

গুগল অ্যানালিটিক্সে এই কোডটি পাঠানোর আগের শেষ ধাপটি হলো এন্ট্রিগুলো থেকে প্রাপ্ত তথ্যকে কাঠামোবদ্ধ করা, যার মধ্যে উপরোক্ত ফাংশনগুলো দ্বারা প্রাপ্ত তথ্যও অন্তর্ভুক্ত থাকবে।

ডায়াগনস্টিকস.এইচটিএমএল 

  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)
    });
  }

গুগল অ্যানালিটিক্সে ডেটা পাঠান

সবশেষে, এমন একটি ফাংশন তৈরি করুন যা web-vitals ইভেন্ট থেকে প্যারামিটার গ্রহণ করে এবং সেগুলোকে গুগল অ্যানালিটিক্সে পাঠায়।

ডায়াগনস্টিকস.এইচটিএমএল 

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 ফাংশনের সাথে ফাংশনটি নিবন্ধন করুন, যেটি ব্রাউজার প্রতিটি ইভেন্ট পরিমাপ করার জন্য প্রস্তুত হলে চালু হয়:

ডায়াগনস্টিকস.এইচটিএমএল 

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

খুব ভালো! আপনি এখন গুগল অ্যানালিটিক্স-এ web-vitals ইভেন্ট পাঠাচ্ছেন।

৬. গুগল অ্যানালিটিক্সে ওয়েব-ভাইটালস ডেটা আসছে কিনা তা যাচাই করুন।

আপনার ইভেন্টগুলো যেন আপনার গুগল অ্যানালিটিক্স ৪ প্রপার্টিতে রেকর্ড হয়, তা নিশ্চিত করতে:

  1. আপনার Google Analytics 4 প্রপার্টিটি খুলুন এবং Reports- এ যান।

ab1bf51ba70f3609.png

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

65a5b8087b09b2a.png

  1. আপনার টেস্ট পেজটি কয়েকবার রিফ্রেশ করুন এবং INP ইভেন্টগুলো ট্রিগার করার জন্য রিফ্রেশগুলোর মাঝে পেজটিতে ক্লিক করতে ভুলবেন না।
  2. রিয়েলটাইম ওভারভিউ UI-এর ' ইভেন্টের নাম অনুসারে ইভেন্টের সংখ্যা' অংশটি দেখুন। আপনি LCP, INP, এবং CLS ইভেন্টগুলো দেখতে পাবেন।

f92b276df1c2f6ce.png

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

8529bd743f121dd9.png

  1. গুগল অ্যানালিটিক্স দ্বারা প্রাপ্ত মানগুলির সারাংশ দেখতে ওই প্যারামিটার কীগুলিতে ক্লিক করুন।

f0cf6a3dd607d533.png

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

আপনার টেস্ট পেজগুলো থেকে প্রাপ্ত ডেটা নিয়ে আপনি সন্তুষ্ট হলে, আপনার সাইটের প্রোডাকশনে নতুন GA কোডটি ডেপ্লয় করুন এবং পরবর্তী ধাপে এগিয়ে যান।

৭. BigQuery-তে আপনার ডেটা কোয়েরি করুন।

আপনার গুগল অ্যানালিটিক্স কোডটি চালু হওয়ার কয়েকদিন পর, আপনি BigQuery-তে ডেটা কোয়েরি করা শুরু করতে পারেন। প্রথমে, ডেটা BigQuery-তে স্থানান্তরিত হচ্ছে কিনা তা যাচাই করে নিন।

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

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

শুধুমাত্র আমাদের CWV ইভেন্টগুলো অন্তর্ভুক্ত এমন একটি ডেটা সেট কোয়েরি করতে, একটি সাবকোয়েরি দিয়ে শুরু করুন যা গত ২৮ দিনের LCP, CLS এবং INP ইভেন্টগুলো নির্বাচন করে। এটি বিশেষভাবে 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 ইভেন্ট ডেটা event_params কলামের একটি STRUCT এ সংরক্ষিত থাকে। আপনার সাইটে GA4-এ পাঠানো প্রতিটি ইভেন্ট প্যারামিটার তার key দ্বারা উপস্থাপিত হয়, এবং এর ভ্যালুটি হলো একটি STRUCT যেখানে প্রতিটি সম্ভাব্য ডেটা টাইপের জন্য একটি করে key থাকে। উপরের উদাহরণে, metric_value key-টির int_value বা double_value থাকতে পারে, তাই COALESCE() ফাংশনটি ব্যবহার করা হয়েছে। আপনার আগে পাঠানো debug_target পেতে, আপনাকে debug_target মধ্যে string_value key-টি সিলেক্ট করতে হবে।

...
(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 হয়।

নিম্নলিখিত কোয়েরিটি debug_target অনুযায়ী গ্রুপ করে, ৭৫তম পার্সেন্টাইলে থাকা CLS অনুসারে পেজগুলোকে খারাপ থেকে ভালো ক্রমে তালিকাভুক্ত করে:

# 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'

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

BigQuery, Data Studio-এর মাধ্যমে যেকোনো কোয়েরির ফলাফল দ্রুত দেখার একটি উপায় প্রদান করে। Data Studio হলো একটি ডেটা ভিজ্যুয়ালাইজেশন এবং ড্যাশবোর্ডিং টুল যা বিনামূল্যে ব্যবহার করা যায়। BigQuery UI-তে আপনার কোয়েরি চালানোর পর তার ফলাফল দেখতে, 'Explore Data'-তে ক্লিক করুন এবং 'Explore with Data Studio' নির্বাচন করুন।

BigQuery-তে Data Studio বিকল্পের সাথে অন্বেষণ করুন

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

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

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

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

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

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

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

আপনি বিনামূল্যে BigQuery স্যান্ডবক্স মোড ব্যবহার করতে পারেন। BigQuery-এর ফ্রি ইউসেজ টিয়ারে , প্রতি মাসে প্রসেস করা প্রথম ১ টেরাবাইট (TB) কোয়েরি ডেটা বিনামূল্যে পাওয়া যায়। এই পোস্টে আলোচিত বিশ্লেষণ পদ্ধতিগুলোর জন্য, যদি না আপনি উল্লেখযোগ্যভাবে বড় কোনো ডেটাসেট ব্যবহার করেন বা নিয়মিতভাবে ডেটাসেটটি থেকে প্রচুর পরিমাণে কোয়েরি চালান, তাহলে আপনি প্রতি মাসে এই বিনামূল্যের সীমার মধ্যেই থাকতে পারবেন। কিন্তু যদি আপনার একটি হাই-ট্র্যাফিক ওয়েবসাইট থাকে এবং আপনি একটি দ্রুত ইন্টারেক্টিভ ড্যাশবোর্ড ব্যবহার করে নিয়মিত বিভিন্ন মেট্রিক্স নিরীক্ষণ করতে চান, তাহলে আমরা 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 ডেটাসেট থেকে শুধুমাত্র ওয়েব ভাইটালস ইভেন্টগুলো ধরে রাখে।
  • সেশন আইডি, ব্যবহারকারীর ধরন (নতুন বনাম পুরাতন) এবং সেশনে অংশগ্রহণের তথ্য সরাসরি কলামগুলোতে পাওয়া যায়।
  • টেবিলটি তারিখ অনুসারে পার্টিশন করা এবং মেট্রিকের নাম অনুসারে ক্লাস্টার করা হয়েছে । এর ফলে সাধারণত প্রতিটি কোয়েরির জন্য প্রক্রিয়াকৃত ডেটার পরিমাণ কমে যায়।
  • যেহেতু এই টেবিলটি কোয়েরি করার জন্য ওয়াইল্ডকার্ড ব্যবহার করার প্রয়োজন নেই, তাই কোয়েরির ফলাফল ২৪ ঘন্টা পর্যন্ত ক্যাশ করে রাখা যায়। এর ফলে একই কোয়েরি বারবার চালানোর খরচ কমে যায়।
  • আপনি যদি BigQuery BI Engine ব্যবহার করেন, তাহলে এই টেবিলে অপ্টিমাইজ করা SQL ফাংশন এবং অপারেটর চালাতে পারবেন।

আপনি BigQuery UI-এর ভেতর থেকে সরাসরি এই ম্যাটেরিয়ালাইজড টেবিলটি কোয়েরি করতে পারেন, অথবা BigQuery কানেক্টর ব্যবহার করে ডেটা স্টুডিওতে এটি ব্যবহার করতে পারেন।

নিয়মিত মেটেরিয়ালাইজ জব চালান

আপনি যদি উপরের কোয়েরিটি কোনো তারিখের পরিসর ছাড়া চালান, তাহলে এটি আপনার সম্পূর্ণ গুগল অ্যানালিটিক্স ডেটাসেটের উপর চলে। প্রতিদিন এটি করা এড়ানো উচিত, কারণ এতে বিপুল পরিমাণ পুরোনো ডেটা পুনরায় প্রসেস করতে হয়। কোয়েরির শুরুতে থাকা 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 কনসোল ব্যবহার করে আপনার কোয়েরিটি দৈনিক ভিত্তিতে চালানোর জন্য শিডিউল করতে পারেন।

১০. গুগল ডেটা স্টুডিও-তে ডেটা ভিজ্যুয়ালাইজ করুন।

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

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

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

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

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

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

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

ইউজার অ্যানালাইসিস ট্যাবে, আপনি একটি মেট্রিক নির্বাচন করে বিভিন্ন ব্যবহার ও ব্যবসায়িক মেট্রিক অনুযায়ী সেই মেট্রিকের পার্সেন্টাইল এবং ব্যবহারকারীর সংখ্যার বিস্তারিত বিবরণ পেতে পারেন।

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

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

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

এই কোডল্যাবটি সম্পন্ন করার জন্য আপনাকে অভিনন্দন! এখন আপনি আপনার সাইট জুড়ে কোর ওয়েব ভাইটালস (Core Web Vitals) পারফরম্যান্স অত্যন্ত সূক্ষ্মভাবে ট্র্যাক করতে পারবেন। এছাড়াও, আপনি আপনার সাইটের নির্দিষ্ট পেজ টাইপ এবং এলিমেন্টগুলো শনাক্ত করতে পারবেন যেগুলো উচ্চ CWV-এর কারণ, যাতে আপনি আপনার অপটিমাইজেশনকে সেই অনুযায়ী কেন্দ্রীভূত করতে পারেন।

আরও পড়ুন

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

রেফারেন্স নথি