इंटरसेक्शन ऑब्ज़र्वर v2, इंटरसेक्शन को सिर्फ़ देखने की सुविधा ही नहीं देता, बल्कि यह भी पता लगाता है कि इंटरसेक्शन के समय इंटरसेक्शन एलिमेंट दिख रहा था या नहीं.
Intersection Observer v1 उन एपीआई में से एक है जो शायद सभी को पसंद है. अब Safari पर भी इसका इस्तेमाल किया जा सकता है. इसलिए, अब इसे सभी मुख्य ब्राउज़र में इस्तेमाल किया जा सकता है. एपीआई के बारे में फिर से जानने के लिए, हमारा सुझाव है कि आप यहां एम्बेड किए गए IntersectionObserver v1 पर, Surma के सुपरचार्ज किए गए माइक्रोटिप देखें.
सुरमा का ज़्यादा जानकारी वाला लेख भी पढ़ा जा सकता है.
लोगों ने Intersection Observer v1 का इस्तेमाल, कई तरह के इस्तेमाल के उदाहरणों के लिए किया है. जैसे,
इमेज और वीडियो को धीरे-धीरे लोड करना,
एलिमेंट तक पहुंचने पर सूचना पाना,
Analytics इवेंट ट्रिगर करना वगैरह.position: sticky
पूरी जानकारी के लिए, MDN पर Intersection Observer के दस्तावेज़ देखें. हालांकि, आपको याद दिला दें कि सबसे बुनियादी मामले में Intersection Observer 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 में क्या समस्या है?
साफ़ तौर पर बताएं, इंटरसेक्शन ऑब्ज़र्वर v1 बहुत अच्छा है, लेकिन यह एकदम सही नहीं है. कुछ मामलों में, एपीआई काम नहीं करता. आइए, इस पर ज़्यादा ध्यान से नज़र डालते हैं!
Intersection Observer v1 API से यह पता चल सकता है कि कोई एलिमेंट, विंडो के व्यूपोर्ट में कब स्क्रोल किया गया. हालांकि, इससे यह पता नहीं चलता कि एलिमेंट को पेज के किसी दूसरे कॉन्टेंट से ढका गया है या नहीं (यानी, एलिमेंट को छिपाया गया है) या transform, opacity, filter वगैरह जैसे विज़ुअल इफ़ेक्ट की मदद से, एलिमेंट के विज़ुअल डिसप्ले में बदलाव किया गया है या नहीं. इन इफ़ेक्ट की वजह से, एलिमेंट असल में नहीं दिखता.
टॉप लेवल दस्तावेज़ के किसी एलिमेंट के लिए, इस जानकारी का पता लगाने के लिए, JavaScript की मदद से DOM का विश्लेषण किया जा सकता है. उदाहरण के लिए, DocumentOrShadowRoot.elementFromPoint() के ज़रिए और फिर ज़्यादा जानकारी हासिल की जा सकती है.
इसके उलट, अगर वह एलिमेंट तीसरे पक्ष के iframe में है, तो उससे यह जानकारी नहीं मिल सकती.
विज्ञापन दिखने की दर इतनी अहम क्यों है?
माफ़ करें, इंटरनेट पर बुरे मकसद से काम करने वाले लोग या ग्रुप मौजूद हैं.
उदाहरण के लिए, किसी कॉन्टेंट साइट पर हर क्लिक के हिसाब से पैसे चुकाने वाले विज्ञापन दिखाने वाले किसी धोखाधड़ी वाले पब्लिशर को, लोगों को अपने विज्ञापनों पर क्लिक करने के लिए गुमराह करने के लिए उकसाया जा सकता है. इससे पब्लिशर को विज्ञापन के पेआउट में बढ़ोतरी होती है. हालांकि, यह बढ़ोतरी कम समय के लिए ही होती है, जब तक विज्ञापन नेटवर्क उन्हें पकड़ नहीं लेता.
आम तौर पर, ऐसे विज्ञापन iframe में दिखाए जाते हैं.
अगर पब्लिशर को उपयोगकर्ताओं से ऐसे विज्ञापनों पर क्लिक कराना है, तो वह CSS नियम iframe { opacity: 0; } लागू करके, विज्ञापन के iframes को पूरी तरह से पारदर्शी बना सकता है. साथ ही, iframes को किसी आकर्षक चीज़ के ऊपर ओवरले कर सकता है. जैसे, बिल्ली का कोई प्यारा वीडियो, जिस पर उपयोगकर्ता ज़रूर क्लिक करेंगे.
इसे क्लिकजैकिंग कहा जाता है.
इस डेमो के ऊपरी सेक्शन में, क्लिक जैकिंग का ऐसा हमला देखा जा सकता है. इसके लिए, बिल्ली का वीडियो "देखें" और "ट्रिक मोड" चालू करें.
आपको पता चलेगा कि iframe में मौजूद विज्ञापन को "लगता है" कि उसे मान्य क्लिक मिले हैं. भले ही, आपने अनजाने में उस पर क्लिक किया हो, लेकिन वह पूरी तरह से पारदर्शी था.
इंटरसेक्शन ऑब्ज़र्वर v2 इस समस्या को कैसे ठीक करता है?
इंटरसेक्शन ऑब्ज़र्वर v2 में, टारगेट एलिमेंट की असल "देखी जा सकने की स्थिति" को ट्रैक करने का कॉन्सेप्ट शामिल किया गया है. इसे किसी इंसान की तरह ही ट्रैक किया जाता है.
IntersectionObserver कन्स्ट्रक्टर में कोई विकल्प सेट करने पर, इंटरसेक्शन वाले IntersectionObserverEntry इंस्टेंस में isVisible नाम का नया बूलियन फ़ील्ड होगा.
isVisible के लिए true वैल्यू, लागू किए गए तरीके से इस बात की पुष्टि करती है कि टारगेट एलिमेंट को किसी दूसरे कॉन्टेंट से पूरी तरह से नहीं छिपाया गया है और उस पर कोई ऐसा विज़ुअल इफ़ेक्ट नहीं लगाया गया है जिससे स्क्रीन पर उसके डिसप्ले में बदलाव या गड़बड़ी हो.
इसके उलट, false वैल्यू का मतलब है कि लागू करने से, यह गारंटी नहीं मिल सकती.
स्पेसिफ़िकेशन की एक अहम जानकारी यह है कि लागू करने की सुविधा को गलत नेगेटिव की रिपोर्ट करने की अनुमति है. इसका मतलब है कि टारगेट एलिमेंट पूरी तरह से दिखने और उसमें कोई बदलाव न होने पर भी, isVisible को false पर सेट किया जा सकता है.
परफ़ॉर्मेंस या अन्य वजहों से, ब्राउज़र सिर्फ़ बाउंडिंग बॉक्स और रेक्टिलिनियर ज्यामिति के साथ काम करते हैं. वे border-radius जैसे बदलावों के लिए, पिक्सल-परफ़ेक्ट नतीजे पाने की कोशिश नहीं करते.
हालांकि, किसी भी स्थिति में गलत तरीके से सही के तौर पर मार्क करने की अनुमति नहीं है. इसका मतलब है कि टारगेट एलिमेंट पूरी तरह से न दिखने और उसमें बदलाव न होने पर, isVisible को true पर सेट करना.
नए कोड का इस्तेमाल कैसे किया जाता है?
IntersectionObserver कन्स्ट्रक्टर में अब दो और कॉन्फ़िगरेशन प्रॉपर्टी शामिल की गई हैं: delay और trackVisibility.
delay एक संख्या है, जो किसी टारगेट के लिए, ऑब्ज़र्वर से मिली सूचनाओं के बीच के कम से कम समय को मिलीसेकंड में दिखाती है.
trackVisibility एक बूलियन है, जो यह बताता है कि ऑब्ज़र्वर, टारगेट के दिखने की स्थिति में हुए बदलावों को ट्रैक करेगा या नहीं.
यहां यह ध्यान रखना ज़रूरी है कि जब trackVisibility true हो, तो delay कम से कम 100 होना चाहिए. इसका मतलब है कि हर 100 मिलीसेकंड में एक से ज़्यादा सूचनाएं नहीं भेजी जा सकतीं.
जैसा कि पहले बताया गया है, विज़िबिलिटी का हिसाब लगाना महंगा होता है. इसलिए, यह ज़रूरी है कि आप इसकी जानकारी दें, ताकि परफ़ॉर्मेंस पर असर न पड़े और बैटरी की खपत कम हो. देरी के लिए, ज़िम्मेदार डेवलपर ज़्यादा से ज़्यादा सहन की जा सकने वाली वैल्यू का इस्तेमाल करेगा.
मौजूदा स्पेसिफ़िकेशन के मुताबिक, विज्ञापन दिखने की दर का हिसाब इस तरह लगाया जाता है:
अगर ऑब्ज़र्वर का
trackVisibilityएट्रिब्यूटfalseहै, तो टारगेट को दिखने वाला माना जाता है. यह मौजूदा v1 वर्शन के काम करने के तरीके से मेल खाता है.अगर टारगेट में 2D ट्रांसलेशन या प्रॉपोर्टional 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 Intersection Observer v2, falling back 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'));
इसी विषय से जुड़े कुछ लिंक
- इंटरसेक्शन ऑब्ज़र्वर स्पेसिफ़िकेशन का एडिटर का नया ड्राफ़्ट.
- Chrome Platform Status पर, इंटरसेक्शन ऑब्ज़र्वर v2.
- Intersection Observer v2 Chromium बग.
- Blink पोस्ट करने की सुविधा लागू करने का इंटेंट.
आभार
इस लेख की समीक्षा करने के लिए, Simeon Vincent, Yoav Weiss, और Mathias Bynens का धन्यवाद. साथ ही, Chrome में इस सुविधा को लागू करने और इसकी समीक्षा करने के लिए, Stefan Zager का भी धन्यवाद. Unsplash पर, सर्गेई सेमिन की हीरो इमेज.