भरोसा करना अच्छी बात है, लेकिन निगरानी करना सबसे अच्छा है: इंटरसेक्शन ऑब्ज़र्वर v2

Thomas Steiner

Intersection Observer एक ऐसा एपीआई है जिसे शायद सभी लोग पसंद करते हैं. साथ ही, इसका इस्तेमाल सभी मुख्य ब्राउज़र में किया जा सकता है. डेवलपर ने इस एपीआई का इस्तेमाल कई तरह के कामों के लिए किया है. जैसे, इमेज और वीडियो को लेज़ी लोड करना, जब एलिमेंट position: sticky पर पहुंच जाएं, तब सूचनाएं भेजना, Analytics इवेंट ट्रिगर करना वगैरह.

IntersectionObserver 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'));

Intersection Observer v1 में दिखने से जुड़ी समस्याएं

Intersection Observer v1 API की मदद से, यह पता लगाया जा सकता है कि कोई एलिमेंट, विंडो के व्यूपोर्ट में कब स्क्रोल किया जाता है. हालांकि, यह पता नहीं लगाया जा सकता कि वह एलिमेंट, पेज के अन्य कॉन्टेंट से ढका है या नहीं. इसे ओक्लूज़न कहा जाता है. यह भी पता नहीं लगाया जा सकता कि सीएसएस की वजह से एलिमेंट में बदलाव हुआ है या नहीं. जैसे, transform, opacity या filter. इससे एलिमेंट दिखना बंद हो सकता है.

टॉप-लेवल के दस्तावेज़ में मौजूद किसी एलिमेंट के लिए, इस जानकारी का पता JavaScript की मदद से DOM का विश्लेषण करके लगाया जा सकता है. उदाहरण के लिए, DocumentOrShadowRoot.elementFromPoint() का इस्तेमाल करके. इसके उलट, अगर सवाल में पूछा गया एलिमेंट किसी तीसरे पक्ष के iframe में मौजूद है, तो वही जानकारी नहीं मिल सकती.

विज्ञापन दिखने से जुड़े आंकड़े क्यों ज़रूरी हैं?

माफ़ करें, लेकिन इंटरनेट पर बुरे मकसद से काम करने वाले लोग मौजूद हैं. उदाहरण के लिए, बेईमान पब्लिशर किसी वेबसाइट पर पे-पर-क्लिक विज्ञापनों का इस्तेमाल कर सकता है. ये लोग, ज़्यादा पैसे कमाने के लिए उपयोगकर्ताओं को इन विज्ञापनों पर क्लिक करने के लिए गुमराह कर सकते हैं. ऐसा तब तक किया जा सकता है, जब तक विज्ञापन नेटवर्क को इनकी स्कीम के बारे में पता न चल जाए. आम तौर पर, इस तरह के विज्ञापन iframes में दिखाए जाते हैं.

उपयोगकर्ताओं को धोखा देने के लिए, पब्लिशर सीएसएस की मदद से विज्ञापन वाले iframe को पूरी तरह से पारदर्शी बना सकता है: iframe { opacity: 0; }. इसके बाद, वे इन पारदर्शी iframe को ऐसे दिलचस्प कॉन्टेंट पर रख सकते हैं जिस पर उपयोगकर्ता क्लिक करना चाहते हैं. जैसे, बिल्ली का कोई प्यारा वीडियो. इसे क्लिकजैकिंग कहा जाता है.

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

Intersection Observer v2 में सुधार

Intersection Observer v2, किसी एलिमेंट की "विज़िबिलिटी" को ट्रैक कर सकता है. इसे इंसान के हिसाब से तय किया जाता है. अगर आपने IntersectionObserver कंस्ट्रक्टर में कोई विकल्प सेट किया है, तो नतीजे के तौर पर मिलने वाले IntersectionObserverEntry इंस्टेंस में, isVisible नाम का एक नया बूलियन फ़ील्ड शामिल होता है. जब isVisible true होता है, तो ब्राउज़र यह पक्का करता है कि एलिमेंट को अन्य कॉन्टेंट से पूरी तरह से हटाया गया हो. साथ ही, उसमें ऐसे कोई विज़ुअल इफ़ेक्ट न हों जिनसे वह छिप जाए या उसका डिसप्ले बदल जाए. अगर isVisible false है, तो ब्राउज़र इस बात की गारंटी नहीं दे सकता.

spec में झूठी नकारात्मकता की अनुमति है: isVisible, false हो सकता है. भले ही, एलिमेंट सही तरीके से दिख रहा हो और उसमें कोई बदलाव न हुआ हो. परफ़ॉर्मेंस के लिए, ब्राउज़र आसान कैलकुलेशन का इस्तेमाल करते हैं. जैसे, बाउंडिंग बॉक्स और आयताकार शेप. साथ ही, वे हर पिक्सल की जांच नहीं करते हैं. जैसे, border-radius जैसी जटिल जानकारी.

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

ये बदलाव लागू करें

IntersectionObserver कंस्ट्रक्टर अब दो और कॉन्फ़िगरेशन प्रॉपर्टी लेता है:

• delay एक संख्या है. यह किसी टारगेट के लिए, ऑब्ज़र्वर से मिलने वाली सूचनाओं के बीच कम से कम देरी को मिलीसेकंड में दिखाती है.
• trackVisibility एक बूलियन है. इससे यह पता चलता है कि ऑब्ज़र्वर, टारगेट की दृश्यता में होने वाले बदलावों को ट्रैक करेगा या नहीं.

जब trackVisibility की वैल्यू true हो, तब delay की वैल्यू 100 या इससे ज़्यादा होनी चाहिए (यानी, हर 100 मि॰से॰ में एक से ज़्यादा सूचनाएं नहीं मिलनी चाहिए). विज़िबिलिटी का हिसाब लगाना महंगा होता है. इसलिए, परफ़ॉर्मेंस में गिरावट और बैटरी की खपत को कम करने के लिए यह सावधानी बरती जाती है. ज़िम्मेदार डेवलपर को, देरी के लिए सबसे ज़्यादा स्वीकार्य वैल्यू का इस्तेमाल करना चाहिए.

spec, की मदद से यह पता लगाया जाता है कि कितने लोगों को वीडियो दिखेगा. पहले वर्शन की तरह, जब ऑब्ज़र्वर का trackVisibility एट्रिब्यूट false होता है, तब टारगेट को दिखने वाला माना जाता है

वर्शन 2 में, टारगेट को तब तक नहीं देखा जा सकता, जब तक:

• इसमें एक असरदार ट्रांसफ़ॉर्मेशन मैट्रिक्स है. हालांकि, इसमें 2D ट्रांसलेशन या प्रोपोर्शनल 2D अपस्केलिंग शामिल नहीं है.

• टारगेट या उसके कंटेनिंग ब्लॉक चेन में मौजूद किसी भी एलिमेंट की ओपैसिटी 1.0 से कम है.

• टारगेट या उसके कंटेनिंग ब्लॉक चेन में मौजूद किसी भी एलिमेंट पर फ़िल्टर लागू किए गए हों.

• अगर लागू करने से यह पक्का नहीं होता कि टारगेट, पेज के दूसरे कॉन्टेंट से पूरी तरह से ढका हुआ नहीं है.

इसका मतलब है कि फ़िलहाल लागू किए गए तरीके, विज़िबिलिटी की गारंटी देने के मामले में काफ़ी हद तक सुरक्षित हैं. उदाहरण के लिए, अगर किसी एलिमेंट पर ऐसा ग्रेस्केल फ़िल्टर (filter: grayscale(0.01%)) लगाया जाता है जो लगभग दिखता ही नहीं है या सबसे कम पारदर्शिता (opacity: 0.99) सेट की जाती है, तो वह एलिमेंट नहीं दिखेगा.

यहां कोड का एक सैंपल दिया गया है, जिसमें नए एपीआई की सुविधाओं के बारे में बताया गया है. डेमो के दूसरे सेक्शन में, क्लिक ट्रैकिंग के लॉजिक को काम करते हुए देखा जा सकता है. पपी वाले वीडियो को "देखने" की कोशिश करें. ट्रिक मोड चालू करके, खुद को एक बुरे ऐक्टर में बदलें. साथ ही, देखें कि 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'));

अन्य संसाधन

• Intersection Observer का वर्किंग ड्राफ़्ट.
• Chrome Platform Status पर Intersection Observer v2.

Acknowledgements

समीक्षा करने के लिए सिमियन विंसेंट, योआव वेइस, और मैथियास बायनेंस का धन्यवाद. साथ ही, समीक्षा करने और Chrome में सुविधा लागू करने के लिए स्टेफ़ान ज़ैगर का धन्यवाद.