কিভাবে CrUX API ব্যবহার করবেন

লক্ষ লক্ষ ওয়েবসাইট জুড়ে বাস্তব-ব্যবহারকারীর অভিজ্ঞতা ডেটাতে অ্যাক্সেস পেতে Chrome UX রিপোর্ট API কীভাবে ব্যবহার করবেন তা শিখুন।

রিক ভিসকোমি
শেন এক্সটারক্যাম্প
Shane Exterkamp
X GitHub

Chrome UX রিপোর্ট (CrUX) ডেটাসেট প্রতিনিধিত্ব করে যে বাস্তব-বিশ্বের Chrome ব্যবহারকারীরা ওয়েবে জনপ্রিয় গন্তব্যগুলি কীভাবে অনুভব করে। 2017 সাল থেকে, যখন কোয়েরিযোগ্য ডেটাসেটটি BigQuery- এ প্রথম প্রকাশ করা হয়েছিল, তখন CrUX-এর ফিল্ড ডেটা পেজস্পিড ইনসাইটস এবং Search Console-এর Core Web Vitals রিপোর্টের মতো ডেভেলপার টুলগুলিতে একীভূত করা হয়েছে, যা ডেভেলপারদের প্রকৃত-ব্যবহারকারীর অভিজ্ঞতা পরিমাপ ও নিরীক্ষণ করতে সক্ষম করে। এই সমস্ত সময় যে অংশটি অনুপস্থিত তা হল একটি টুল যা CrUX ডেটা প্রোগ্রামগতভাবে বিনামূল্যে এবং আরামদায়ক অ্যাক্সেস প্রদান করে। সেই ব্যবধান পূরণে সাহায্য করার জন্য, আমরা সমস্ত নতুন Chrome UX Report API- এর প্রকাশ ঘোষণা করতে পেরে আনন্দিত!

এই APIটি বিকাশকারীদের CrUX ডেটাতে দ্রুত এবং ব্যাপক অ্যাক্সেস প্রদানের লক্ষ্যে তৈরি করা হয়েছে। CrUX API শুধুমাত্র ক্ষেত্র ব্যবহারকারীর অভিজ্ঞতার ডেটা রিপোর্ট করে, বিদ্যমান PageSpeed ​​Insights API থেকে ভিন্ন, যা Lighthouse পারফরম্যান্স অডিট থেকে ল্যাব ডেটাও রিপোর্ট করে। CrUX API স্ট্রিমলাইন করা হয়েছে এবং দ্রুত ব্যবহারকারীর অভিজ্ঞতার ডেটা পরিবেশন করতে পারে, এটিকে রিয়েল-টাইম অডিটিং অ্যাপ্লিকেশনের জন্য আদর্শভাবে উপযুক্ত করে তোলে।

ডেভেলপারদের কাছে সবচেয়ে গুরুত্বপূর্ণ সমস্ত মেট্রিক্সের অ্যাক্সেস আছে তা নিশ্চিত করতে - মূল ওয়েব ভাইটালগুলি - CrUX API অডিট করে এবং নিরীক্ষণ করে লার্জেস্ট কনটেন্টফুল পেইন্ট (LCP), ইন্টারঅ্যাকশন টু নেক্সট পেইন্ট (INP), এবং ক্রমবর্ধমান লেআউট শিফট (CLS) মূল এবং URL উভয় স্তরেই।

তো চলুন ডুব দিয়ে দেখি কিভাবে এটি ব্যবহার করতে হয়!

এই পৃষ্ঠায় API চেষ্টা করুন

এটা চেষ্টা করুন!

কোয়েরি মূল তথ্য

CrUX ডেটাসেটের উৎপত্তি সমস্ত অন্তর্নিহিত পৃষ্ঠা-স্তরের অভিজ্ঞতাকে অন্তর্ভুক্ত করে। কমান্ড লাইনে কার্ল ব্যবহার করে একটি অরিজিন ব্যবহারকারীর অভিজ্ঞতার ডেটার জন্য CrUX API-কে কীভাবে প্রশ্ন করতে হয় তা নিম্নলিখিত উদাহরণটি দেখায়।

API_KEY="[YOUR_API_KEY]"
curl "https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=$API_KEY" \
  --header 'Content-Type: application/json' \
  --data '{"origin": "https://web.dev"}'

curl কমান্ড তিনটি অংশ নিয়ে গঠিত:

  1. API এর URL এন্ডপয়েন্ট, কলারের ব্যক্তিগত API কী সহ।
  2. Content-Type: application/json শিরোনাম, নির্দেশ করে যে অনুরোধের বডিতে JSON রয়েছে।
  3. JSON-এনকোডেড রিকোয়েস্ট বডি , https://web.dev উৎস উল্লেখ করে।

জাভাস্ক্রিপ্টে একই জিনিস করতে, CrUXApiUtil ইউটিলিটি ব্যবহার করুন, যা API কল করে এবং ডিকোডড প্রতিক্রিয়া প্রদান করে (ইতিহাস এবং ব্যাচ সমর্থন সহ আরও বৈশিষ্ট্যের জন্য আমাদের Github ভেরিয়েন্ট দেখুন)।

const CrUXApiUtil = {};
// Get your CrUX API key at https://goo.gle/crux-api-key.
CrUXApiUtil.API_KEY = '[YOUR_API_KEY]';
CrUXApiUtil.API_ENDPOINT = `https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=${CrUXApiUtil.API_KEY}`;
CrUXApiUtil.query = function (requestBody) {
  if (CrUXApiUtil.API_KEY == '[YOUR_API_KEY]') {
    throw 'Replace "YOUR_API_KEY" with your private CrUX API key. Get a key at https://goo.gle/crux-api-key.';
  }
  return fetch(CrUXApiUtil.API_ENDPOINT, {
    method: 'POST',
    body: JSON.stringify(requestBody)
  }).then(response => response.json()).then(response => {
    if (response.error) {
      return Promise.reject(response);
    }
    return response;
  });
};

আপনার কী দিয়ে [YOUR_API_KEY] প্রতিস্থাপন করুন। এরপরে, CrUXApiUtil.query ফাংশনে কল করুন এবং রিকোয়েস্ট বডি অবজেক্টে পাস করুন।

CrUXApiUtil.query({
  origin: 'https://web.dev'
}).then(response => {
  console.log(response);
}).catch(response => {
  console.error(response);
});

যদি এই উৎপত্তির জন্য ডেটা বিদ্যমান থাকে, তাহলে API প্রতিক্রিয়া হল একটি JSON-এনকোডেড অবজেক্ট যা ব্যবহারকারীর অভিজ্ঞতার বিতরণের প্রতিনিধিত্বকারী মেট্রিক্স ধারণকারী। বন্টন মেট্রিক্স হল হিস্টোগ্রাম বিন এবং পার্সেন্টাইল।

{
  "record": {
    "key": {
      "origin": "https://web.dev"
    },
    "metrics": {
      "largest_contentful_paint": {
        "histogram": [
          {
            "start": 0,
            "end": 2500,
            "density": 0.7925068547983514
          },
          {
            "start": 2500,
            "end": 4000,
            "density": 0.1317422195536863
          },
          {
            "start": 4000,
            "density": 0.07575092564795324
          }
        ],
        "percentiles": {
          "p75": 2216
        }
      },
      // ...
    }
  }
}

histogram অবজেক্টের start এবং end বৈশিষ্ট্যগুলি প্রদত্ত মেট্রিকের জন্য ব্যবহারকারীদের অভিজ্ঞতার মানের পরিসীমা উপস্থাপন করে। density বৈশিষ্ট্য সেই পরিসরের মধ্যে ব্যবহারকারীর অভিজ্ঞতার অনুপাতকে উপস্থাপন করে। এই উদাহরণে, সমস্ত web.dev পৃষ্ঠা জুড়ে LCP ব্যবহারকারীর অভিজ্ঞতার 79% হল 2,500 মিলিসেকেন্ডের কম, যা " ভাল " LCP থ্রেশহোল্ড৷ percentiles.p75 মান মানে এই ডিস্ট্রিবিউশনে 75% ব্যবহারকারীর অভিজ্ঞতা 2,216 মিলিসেকেন্ডের কম। প্রতিক্রিয়া বডি ডকুমেন্টেশনে প্রতিক্রিয়া গঠন সম্পর্কে আরও জানুন।

ত্রুটি

যখন CrUX API-এর প্রদত্ত উত্সের জন্য কোনও ডেটা থাকে না, তখন এটি একটি JSON-এনকোড করা ত্রুটি বার্তার সাথে প্রতিক্রিয়া জানায়:

{
  "error": {
    "code": 404,
    "message": "chrome ux report data not found",
    "status": "NOT_FOUND"
  }
}

এই ত্রুটিটি ডিবাগ করতে, প্রথমে চেক করুন যে অনুরোধ করা মূলটি সর্বজনীনভাবে নেভিগেবল। আপনি আপনার ব্রাউজারের ঠিকানা বারে মূল প্রবেশ করে এবং যেকোনো পুনঃনির্দেশের পরে চূড়ান্ত URL এর সাথে তুলনা করে এটি পরীক্ষা করতে পারেন। সাধারণ সমস্যাগুলির মধ্যে অপ্রয়োজনীয়ভাবে সাবডোমেন যোগ করা বা বাদ দেওয়া এবং ভুল HTTP প্রোটোকল ব্যবহার করা অন্তর্ভুক্ত।

ত্রুটি 
{"origin": "http://www.web.dev"}

এই উত্সটি ভুলভাবে http:// প্রোটোকল এবং www. সাবডোমেন

সফলতা 
{"origin": "https://web.dev"}

এই উত্স সর্বজনীনভাবে নেভিগেবল.

যদি অনুরোধ করা মূলটি ন্যাভিগেবল সংস্করণ হয় , তাহলে এই ত্রুটিটিও ঘটতে পারে যদি মূলটির নমুনার অপর্যাপ্ত সংখ্যক থাকে। ডেটাসেটে অন্তর্ভুক্ত সমস্ত উত্স এবং ইউআরএলে স্বতন্ত্র ব্যবহারকারীদের বেনামী করার জন্য পর্যাপ্ত সংখ্যক নমুনা থাকতে হবে। উপরন্তু, উত্স এবং URLগুলি অবশ্যই সর্বজনীনভাবে সূচীযোগ্য হতে হবে৷ ওয়েবসাইটগুলি কীভাবে ডেটাসেটে অন্তর্ভুক্ত করা হয় সে সম্পর্কে আরও জানতে CrUX পদ্ধতি পড়ুন।

URL ডেটা কোয়েরি করুন

আপনি দেখেছেন কিভাবে একটি মূলের উপর সামগ্রিক ব্যবহারকারীর অভিজ্ঞতার জন্য CrUX API-কে প্রশ্ন করতে হয়। একটি নির্দিষ্ট পৃষ্ঠায় ফলাফল সীমাবদ্ধ করতে, url অনুরোধ প্যারামিটার ব্যবহার করুন।

API_KEY="[YOUR_API_KEY]"
curl "https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=$API_KEY" \
  --header 'Content-Type: application/json' \
  --data '{"url": "https://web.dev/fast/"}'

এই কার্ল কমান্ডটি অরিজিন উদাহরণের অনুরূপ, ব্যতীত যে অনুরোধের অংশটি দেখতে পৃষ্ঠাটি নির্দিষ্ট করতে url প্যারামিটার ব্যবহার করে।

JavaScript-এ CrUX API থেকে URL ডেটা জিজ্ঞাসা করতে, অনুরোধের বডিতে url প্যারামিটার ব্যবহার করে CrUXApiUtil.query ফাংশনটিতে কল করুন।

CrUXApiUtil.query({
  url: 'https://web.dev/fast/'
}).then(response => {
  console.log(response);
}).catch(response => {
  console.error(response);
});

এই URL-এর ডেটা CrUX ডেটাসেটে বিদ্যমান থাকলে, API একটি JSON-এনকোডেড প্রতিক্রিয়া প্রদান করবে। যেমন 

{
  "record": {
    "key": {
      "url": "https://web.dev/fast/"
    },
    "metrics": {
      "largest_contentful_paint": {
        "histogram":