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

इंटरसेक्शन ऑब्ज़र्वर v2 की मदद से न सिर्फ़ हर चौराहों का पता लगाया जा सकता है, बल्कि पता लगाएं कि क्या प्रतिच्छेदन के समय इंटरसेक्ट करने वाला तत्व दिखाई दे रहा था.

Thomas Steiner

इंटरसेक्शन ऑब्ज़र्वर v1 उन एपीआई में से एक है जिन्हें शायद दुनिया भर में पसंद किया जाता है और अब Safari भी इसका इस्तेमाल करता है, अब यह सभी प्रमुख ब्राउज़र में सार्वभौमिक रूप से उपयोग करने योग्य भी है. API के बारे में कम शब्दों में जानकारी पाने के लिए, मेरा सुझाव है कि आप Surma की इंटरसेक्शन पर सुपरचार्ज्ड माइक्रोटिप ऑब्ज़र्वर v1, जिसे नीचे एम्बेड किया गया है. आप सूरमा लेख. लोगों ने कई तरह के इस्तेमाल के उदाहरणों के लिए, इंटरसेक्शन ऑब्ज़र्वर v1 का इस्तेमाल किया है, जैसे कि इमेज और वीडियो को लेज़ी लोडिंग के दौरान, एलिमेंट के position: sticky तक पहुंचने की सूचना मिलना, आंकड़ों की जानकारी देना, और भी बहुत कुछ.

पूरी जानकारी के लिए, यहां जाएं: एमडीएन पर इंटरसेक्शन ऑब्ज़र्वर दस्तावेज़, याद रखें कि 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'));

इंटरसेक्शन ऑब्ज़र्वर v1 में क्या चुनौती भरा है?

साफ़ तौर पर कहा जाए, तो इंटरसेक्शन ऑब्ज़र्वर v1 बेहतरीन है, लेकिन यह बिलकुल सटीक नहीं है. यहां हैं कुछ ऐसे कोने होते हैं जिनमें एपीआई की जानकारी कम हो जाती है. आइए, इस पर गौर करते हैं! इंटरसेक्शन ऑब्ज़र्वर v1 एपीआई आपको बता सकता है कि किसी एलिमेंट को का इस्तेमाल कर सकती है, लेकिन यह आपको यह नहीं बताती कि एलिमेंट को कवर किया गया है या नहीं किसी अन्य पेज के कॉन्टेंट से (यानी, जब एलिमेंट रोक दिया गया हो) या एलिमेंट के विज़ुअल डिसप्ले में विज़ुअल इफ़ेक्ट की मदद से बदलाव किया गया है. जैसे, transform, opacity, filter वगैरह के साथ काम करता है. यह एक्सपेरिमेंट के ज़रिए दिखना बंद हो सकता है.

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

असल में प्रॉडक्ट दिखाना क्यों ज़रूरी है?

दुर्भाग्य से, इंटरनेट एक ऐसी जगह है जो बुरे मकसद से बुरे मकसद से काम करने वाले लोगों या ग्रुप को आकर्षित करती है. उदाहरण के लिए, किसी कॉन्टेंट साइट पर हर क्लिक का पेमेंट (पीपीसी) करने वाले विज्ञापन दिखाने वाले किसी संदिग्ध पब्लिशर को इंसेंटिव दिया जा सकता है लोगों से धोखे से उनके विज्ञापनों पर क्लिक करवाकर, पब्लिशर के विज्ञापन का पेआउट (कम से कम थोड़े समय के लिए तक सीमित रखें, जब तक कि विज्ञापन नेटवर्क उन्हें पहचान न ले. आम तौर पर, ऐसे विज्ञापन iframe में दिखाए जाते हैं. अब अगर पब्लिशर चाहता था कि उपयोगकर्ता ऐसे विज्ञापनों पर क्लिक करें, तो वह विज्ञापन iframe बना सकता था पूरी तरह पारदर्शी होने के लिए, सीएसएस नियम iframe { opacity: 0; } लागू करें और iframe को ओवरले करें किसी आकर्षक चीज़ के शीर्ष पर हो, जैसे कि बिल्लियों का कोई प्यारा वीडियो जिसे लोग वाकई क्लिक करना चाहें. इसे क्लिकजैकिंग कहा जाता है. क्लिकजैकिंग हमले को इसके ऊपरी सेक्शन में देखा जा सकता है डेमो (बिल्ली का वीडियो "देखकर" देखें और "ट्रिक मोड" चालू करें). आपको दिखेगा कि iframe में मौजूद विज्ञापन "सोचता है" उसे वैध क्लिक मिले, भले ही वह वह पूरी तरह पारदर्शी हो सकती है.

विज्ञापन की स्टाइल को पारदर्शी बनाकर और उसे किसी आकर्षक चीज़ के ऊपर रखकर, उपयोगकर्ता को उस पर क्लिक करने के लिए बहकाना.

इंटरसेक्शन ऑब्ज़र्वर v2 को कैसे ठीक करता है?

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

हमारी एक अहम जानकारी है, खास जानकारी क्या लागू करने की की अनुमति है को गलत नेगेटिव की रिपोर्ट करने (यानी, isVisible false तक तब भी किया जा सकता है, जब टारगेट एलिमेंट पूरी तरह दिख रहा हो और उसमें कोई बदलाव न किया गया हो). प्रदर्शन या अन्य कारणों से, ब्राउज़र खुद को एक ऐसी सीमा के साथ काम करने तक सीमित करते हैं बॉक्स और रेक्टिलिनियर जियॉमेट्री; वे इस काम के लिए Pixel-परफ़ेक्ट नतीजे पाने की कोशिश नहीं करते border-radius जैसे बदलाव.

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

नया कोड कैसा दिख रहा है?

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

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

मौजूदा समय के हिसाब से spec, दृश्यता है की गणना इस तरह से की जाती है:

  • अगर ऑब्ज़र्वर का trackVisibility एट्रिब्यूट false है, तो टारगेट को दिखने वाला माना जाता है. यह मौजूदा v1 व्यवहार से मेल खाता है.

  • अगर टारगेट में 2D अनुवाद के अलावा कोई असरदार ट्रांसफ़ॉर्मेशन मैट्रिक्स है या अनुपात के आधार पर 2D अपस्केलिंग करते हैं, तो टारगेट को न दिखने वाला माना जाता है.

  • अगर टारगेट या उसकी ब्लॉक चेन के किसी भी एलिमेंट में, अपारदर्शिता (ओपैसिटी) है, तो 1.0 है, तो टारगेट को दिखाई न देने वाला मान लिया जाता है.

  • अगर टारगेट या इसकी ब्लॉक चेन के किसी एलिमेंट पर कोई फ़िल्टर लागू किया गया है, तो उस टारगेट को गायब कर दिया जाता है.

  • अगर लागू करने की प्रोसेस इस बात की गारंटी नहीं देती है कि दूसरे पेज से टारगेट को पूरी तरह से रोक दिया गया है तो टारगेट को 'नहीं दिख रहा'' माना जाता है.

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

नीचे एक छोटा कोड सैंपल दिया गया है, जिसमें एपीआई की नई सुविधाओं के बारे में बताया गया है. अगर आपको लगता है कि आपके पास डेमो के दूसरे सेक्शन में कार्रवाई करने वाला लॉजिक (अब, कुत्ते के बच्चे का वीडियो "देखकर" देखें). पक्का करें कि आपने "ट्रिक मोड" चालू किया हो फिर से तुरंत खुद को एक अच्छे पब्लिशर में बदलो और देखें कि इंटरसेक्शन ऑब्ज़र्वर v2 कैसे रोकता है गैर-कानूनी विज्ञापन क्लिक को ट्रैक नहीं किया जा सकता. इस बार, इंटरसेक्शन ऑब्ज़र्वर v2 में हम होंगे! 🎉

इंटरसेक्शन ऑब्ज़र्वर 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 में सुविधा को लागू करने के लिए. Unस्प्लैश पर सर्गेई सेमिन की हीरो इमेज.