বিশ্বাস ভালো, পর্যবেক্ষণই সবচেয়ে ভালো: ইন্টারসেকশন অবজারভার v2

Thomas Steiner

ইন্টারসেকশন অবজারভার হল সেই API গুলির মধ্যে একটি যা সম্ভবত সর্বজনীনভাবে জনপ্রিয়, এবং এটি সমস্ত প্রধান ব্রাউজারে ব্যবহারযোগ্য। ডেভেলপাররা এই API ব্যবহার করেছেন বিস্তৃত ব্যবহারের ক্ষেত্রে, যার মধ্যে রয়েছে অলস লোডিং ছবি এবং ভিডিও , উপাদানগুলি যখন position: sticky , ফায়ারিং অ্যানালিটিক্স ইভেন্ট এবং আরও অনেক কিছু।

সবচেয়ে মৌলিক আকারে, ইন্টারসেকশন অবজারভার v1 API দেখতে এরকম:

const onIntersection = (entries) => {
  for (const entry of entries) {
    if (entry.isIntersecting) {
      console.log(entry);
    }
  }
};

const observer = new IntersectionObserver(onIntersection);
observer.observe(document.querySelector('#some-target'));

ইন্টারসেকশন অবজারভার v1-এ দৃশ্যমানতার চ্যালেঞ্জ

Intersection Observer v1 API এর সাহায্যে, আপনি জানতে পারবেন কখন কোন উপাদান উইন্ডোর ভিউপোর্টে স্ক্রোল করা হয়। তবে, আপনি নির্ধারণ করতে পারবেন না যে উপাদানটি অন্য পৃষ্ঠার সামগ্রী দ্বারা আচ্ছাদিত কিনা, যা অক্লুশন নামে পরিচিত, অথবা উপাদানটি CSS দ্বারা পরিবর্তিত হয়েছে কিনা, যেমন transform , opacity , অথবা filter , যা উপাদানটিকে অদৃশ্য করে তুলতে পারে।

শীর্ষ-স্তরের ডকুমেন্টের একটি উপাদানের জন্য, এই তথ্যটি জাভাস্ক্রিপ্ট ব্যবহার করে DOM বিশ্লেষণ করে নির্ধারণ করা যেতে পারে, উদাহরণস্বরূপ DocumentOrShadowRoot.elementFromPoint() ব্যবহার করে। বিপরীতে, যদি প্রশ্নযুক্ত উপাদানটি তৃতীয়-পক্ষের আইফ্রেমে অবস্থিত থাকে তবে একই তথ্য পাওয়া যাবে না।

দৃশ্যমানতা কেন গুরুত্বপূর্ণ?

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

ব্যবহারকারীদের প্রতারণা করার জন্য, প্রকাশক CSS: iframe { opacity: 0; } ব্যবহার করে বিজ্ঞাপন আইফ্রেমগুলিকে সম্পূর্ণ স্বচ্ছ করে তুলতে পারে। তারপর, তারা এই স্বচ্ছ আইফ্রেমগুলিকে আকর্ষণীয় কন্টেন্টের উপরে রাখতে পারে, যেমন একটি সুন্দর বিড়ালের ভিডিও, যেখানে ব্যবহারকারীরা ক্লিক করতে চান। একে ক্লিকজ্যাকিং বলা হয়।

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

ইন্টারসেকশন অবজারভার v2-এর উন্নতি

Intersection Observer v2 একটি উপাদানের "দৃশ্যমানতা" ট্র্যাক করতে পারে যেমনটি একজন মানুষ এটিকে সংজ্ঞায়িত করে। যদি আপনি IntersectionObserver কনস্ট্রাক্টরে একটি বিকল্প সেট করেন, তাহলে IntersectionObserverEntry ইনস্ট্যান্সগুলিতে isVisible নামক একটি নতুন বুলিয়ান ক্ষেত্র অন্তর্ভুক্ত হয়। যখন isVisible true হয়, তখন ব্রাউজার নিশ্চিত করে যে উপাদানটি অন্যান্য সামগ্রী দ্বারা সম্পূর্ণরূপে আবরণ করা হয়েছে এবং এর প্রদর্শন লুকানো বা পরিবর্তন করার জন্য কোনও ভিজ্যুয়াল প্রভাব নেই। যদি isVisible false হয়, তাহলে ব্রাউজার সেই গ্যারান্টি দিতে পারে না।

এই স্পেকটি মিথ্যা নেতিবাচকতা অনুমোদন করে: উপাদানটি সত্যিকার অর্থে দৃশ্যমান এবং অপরিবর্তিত থাকলেও isVisible false হতে পারে। কর্মক্ষমতার জন্য, ব্রাউজারগুলি সহজ গণনা ব্যবহার করে, যেমন বাউন্ডিং বাক্স এবং আয়তক্ষেত্রাকার আকার, এবং border-radius মতো জটিল বিবরণের জন্য প্রতিটি পিক্সেল পরীক্ষা করে না।

তবে, কোনও অবস্থাতেই মিথ্যা পজিটিভ অনুমোদিত নয়। এর অর্থ হল যদি উপাদানটি সম্পূর্ণরূপে দৃশ্যমান না হয় এবং অপরিবর্তিত থাকে তবে isVisible true হবে না।

এই পরিবর্তনগুলি প্রয়োগ করুন

IntersectionObserver কনস্ট্রাক্টর এখন দুটি অতিরিক্ত কনফিগারেশন বৈশিষ্ট্য গ্রহণ করে:

• delay হলো এমন একটি সংখ্যা যা একটি নির্দিষ্ট লক্ষ্যের জন্য পর্যবেক্ষকের কাছ থেকে বিজ্ঞপ্তিগুলির মধ্যে মিলিসেকেন্ডে সর্বনিম্ন বিলম্ব নির্দেশ করে।
• trackVisibility হল একটি বুলিয়ান যা নির্দেশ করে যে পর্যবেক্ষক কোনও লক্ষ্যের দৃশ্যমানতার পরিবর্তনগুলি ট্র্যাক করবে কিনা।

যখন trackVisibility true হয়, তখন delay 100 বা তার বেশি মান নির্ধারণ করতে হবে (অর্থাৎ, প্রতি ১০০ মিলিসেকেন্ডে একটির বেশি বিজ্ঞপ্তি নয়)। যেহেতু দৃশ্যমানতা গণনা করা ব্যয়বহুল, তাই এটি কর্মক্ষমতা হ্রাস এবং ব্যাটারি খরচের বিরুদ্ধে একটি সতর্কতা। দায়িত্বশীল ডেভেলপারদের বিলম্বের জন্য সর্বোচ্চ সহনীয় মান ব্যবহার করা উচিত।

স্পেক , দৃশ্যমানতা গণনা করে। সংস্করণ ১ এর মতো, যখন পর্যবেক্ষকের trackVisibility অ্যাট্রিবিউট false হয়, তখন লক্ষ্যটি দৃশ্যমান বলে বিবেচিত হয়।

সংস্করণ ২-এ, লক্ষ্যবস্তু অদৃশ্য বলে বিবেচিত হবে যদি:

• এটিতে একটি কার্যকর রূপান্তর ম্যাট্রিক্স রয়েছে, একটি 2D অনুবাদ বা আনুপাতিক 2D আপস্কেলিং ছাড়া।

• লক্ষ্যবস্তু, অথবা এর ধারণকারী ব্লক শৃঙ্খলের যেকোনো উপাদানের কার্যকর অস্বচ্ছতা 1.0 এর চেয়ে কম।

• লক্ষ্যবস্তু, অথবা এর ব্লক চেইনের যেকোনো উপাদানে যেকোনো ফিল্টার প্রয়োগ করা হয়েছে।

• যদি বাস্তবায়ন নিশ্চিত করতে না পারে যে লক্ষ্যটি অন্যান্য পৃষ্ঠার সামগ্রী দ্বারা সম্পূর্ণরূপে অবাধ।

এর অর্থ হল বর্তমান বাস্তবায়নগুলি দৃশ্যমানতা নিশ্চিত করার ক্ষেত্রে বেশ রক্ষণশীল। উদাহরণস্বরূপ, প্রায় অলক্ষিত গ্রেস্কেল ফিল্টার ( filter: grayscale(0.01%) ) প্রয়োগ করলে অথবা সর্বনিম্ন স্বচ্ছতা ( opacity: 0.99 ) সেট করলে উপাদানটি অদৃশ্য হয়ে যাবে।

এখানে একটি কোড নমুনা দেওয়া হল যা নতুন API বৈশিষ্ট্যগুলি তুলে ধরে। ডেমোর দ্বিতীয় বিভাগে আপনি এর ক্লিক ট্র্যাকিং লজিকটি দেখতে পাবেন। কুকুরছানা ভিডিওটি "দেখা" চেষ্টা করুন। নিজেকে একজন খারাপ অভিনেতাতে রূপান্তরিত করতে ট্রিক মোড সক্রিয় করুন এবং দেখুন কিভাবে Intersection Observer v2 অ-বৈধ বিজ্ঞাপন ক্লিকগুলিকে ট্র্যাক করা থেকে বিরত রাখে। Intersection Observer v2 আমাদের রক্ষা করে।

<!DOCTYPE html>
<!-- This is the ad running in the iframe -->
<button id="callToActionButton">Buy now!</button>

// This is code running in the iframe.

// The iframe must be visible for at least 800ms prior to an input event
// for the input event to be considered valid.
const minimumVisibleDuration = 800;

// Keep track of when the button transitioned to a visible state.
let visibleSince = 0;

const button = document.querySelector('#callToActionButton');
button.addEventListener('click', (event) => {
  if ((visibleSince > 0) &&
      (performance.now() - visibleSince >= minimumVisibleDuration)) {
    trackAdClick();
  } else {
    rejectAdClick();
  }
});

const observer = new IntersectionObserver((changes) => {
  for (const change of changes) {
    // ⚠️ Feature detection
    if (typeof change.isVisible === 'undefined') {
      // The browser doesn't support v2, fallback to v1 behavior.
      change.isVisible = true;
    }
    if (change.isIntersecting && change.isVisible) {
      visibleSince = change.time;
    } else {
      visibleSince = 0;
    }
  }
}, {
  threshold: [1.0],
  // 🆕 Track the actual visibility of the element
  trackVisibility: true,
  // 🆕 Set a minimum delay between notifications
  delay: 100
}));

// Require that the entire iframe be visible.
observer.observe(document.querySelector('#ad'));

অতিরিক্ত সম্পদ

• ইন্টারসেকশন অবজারভারের কার্য খসড়া।
• ক্রোম প্ল্যাটফর্ম স্ট্যাটাসে ইন্টারসেকশন অবজারভার v2।

স্বীকৃতি

পর্যালোচনা করার জন্য সিমিওন ভিনসেন্ট , ইয়াভ ওয়েইস এবং ম্যাথিয়াস বাইনেন্সকে ধন্যবাদ, সেইসাথে ক্রোমে বৈশিষ্ট্যটি পর্যালোচনা এবং বাস্তবায়নের জন্য স্টেফান জাগারকে ধন্যবাদ।