الثقة جيدة، والملاحظة أفضل: الإصدار 2 من أداة مراقبة تقاطع

يضيف الإصدار 2 من أداة مراقبة التقاطع القدرة على ليس فقط مراقبة التقاطعات في حد ذاته، ولكن أيضًا لاكتشاف ما إذا كان العنصر المتقاطع مرئيًا في وقت التقاطع.

Thomas Steiner

إنّ الإصدار 1 من Intersection Monitorer هو إحدى واجهات برمجة التطبيقات التي نالت إعجاب المستخدمين عالميًا. وبفضل ميزة Safari، يمكن استخدامها أخيرًا في جميع المتصفحات الرئيسية. لتنشيط ذاكرتك سريعًا عن واجهة برمجة التطبيقات، ننصحك بمشاهدة Supercharged Microtip من Surma على Intersection Monitorer v1 المُضمَّنة أدناه. يمكنك أيضًا قراءة المقالة المفصّلة من Surma. لقد استخدم الأشخاص الإصدار الأول من Intersection Monitorer لمجموعة واسعة من حالات الاستخدام، مثل التحميل الكسول للصور والفيديوهات وتلقّي الإشعارات عند وصول العناصر إلى position: sticky وتنشيط أحداث الإحصاءات وغير ذلك الكثير.

للحصول على التفاصيل الكاملة، يُرجى الاطّلاع على مستندات Intersection Monitorer على MDN، ولكن كتذكير مختصر، إليك ما تبدو عليه واجهة Intersection Monitorer 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 Monitorer؟

لتوضيح الأمر، الإصدار الأول من Intersection Monitorer رائع، لكنّه ليس مثاليًا. هناك بعض الحالات التي تقصر فيها واجهة برمجة التطبيقات. لِنلقِ نظرة عن قرب. واجهة برمجة التطبيقات Intersection Monitorer v1 API بإمكانها إخبارك عند تمرير عنصر إلى إطار عرض النافذة، ولكنها لا تخبرك بما إذا كان العنصر مغطى بأي محتوى آخر للصفحة (أي عند حجب العنصر) أو ما إذا تم تعديل العرض المرئي للعنصر بواسطة تأثيرات بصرية مثل transform وopacity filter وما إلى ذلك، ما يمكن أن يجعله غير مرئي بشكل فعّال.

بالنسبة إلى عنصر في مستند المستوى الأعلى، يمكن تحديد هذه المعلومات من خلال تحليل نموذج العناصر في المستند (DOM) عبر JavaScript، على سبيل المثال عبر DocumentOrShadowRoot.elementFromPoint()، ثم إجراء بحث أكثر تفصيلاً. في المقابل، لا يمكن الحصول على المعلومات نفسها إذا كان العنصر المعنيّ موجودًا في إطار iframe تابع لجهة خارجية.

لماذا يُعدّ ظهور المحتوى بشكل فعلي أمرًا مهمًا؟

للأسف، شبكة الإنترنت هي مكان يجذب جهات مسيئة ذات نوايا سيئة. على سبيل المثال، قد يتم تحفيز ناشر غامض يعرض إعلانات الدفع بالنقرة على موقع ويب على شبكة المحتوى، وذلك لخداع المستخدمين ودفعهم إلى النقر على إعلاناته من أجل زيادة عائد إعلانات الناشر (على الأقل لفترة قصيرة، إلى أن ترصدها شبكة الإعلانات). ويتم عادةً عرض هذه الإعلانات في إطارات iframe. إذا أراد الناشر الآن جذب المستخدمين للنقر على مثل هذه الإعلانات، يمكنه أن يجعل إطارات iframe للإعلانات شفافة تمامًا من خلال تطبيق قاعدة CSS iframe { opacity: 0; } وتراكب إطارات iframe على شيء جذّاب، مثل فيديو حول قطة ظريفة يريد المستخدمون النقر عليها. يسمى ذلك إخفاء النقرات. يمكنك مشاهدة هجوم تمويه النقر أثناء تنفيذه في القسم العلوي من هذا العرض التوضيحي (جرِّب "مشاهدة" فيديو القطط وفعِّل "وضع الخداع"). وستلاحظ أنّ الإعلان في إطار iframe "يعتقد" أنّه تلقّى نقرات مشروعة، حتى لو كان شفافًا تمامًا عندما نقرت عليه (تتظاهر بدون قصد).

خداع المستخدم للنقر على إعلان معيّن من خلال جعله شفافًا ووضعه فوق عنصر جذاب

كيف يمكن لأداة Intersection Monitorer الإصدار الثاني من حلّ هذه المشكلة؟

يقدّم الإصدار الثاني من أداة مراقبة التقاطع مفهوم تتبُّع "الرؤية" الفعلية للعنصر المستهدف عندما يحدّده الشخص. من خلال ضبط خيار في الدالة الإنشائية IntersectionObserver، ستحتوي المثيلات IntersectionObserverEntry بعد ذلك على حقل منطقي جديد يُسمى isVisible. إنّ القيمة true للسمة isVisible هي ضمان قوي من التنفيذ الأساسي أنّ العنصر المستهدَف غير محظور تمامًا من خلال محتوى آخر، وأنّه ليس له تأثيرات مرئية من شأنها أن تغيّر أو تشوّه عرضه على الشاشة. في المقابل، تعني القيمة false أنّ التنفيذ لا يمكن أن يضمن ذلك.

من التفاصيل المهمة حول spec أنّ عملية التنفيذ مسموح بها للإبلاغ عن سلبيات خاطئة (أي ضبط isVisible على false حتى عندما يكون العنصر الهدف مرئيًا تمامًا وغير معدَّل). تقتصر المتصفّحات على العمل باستخدام مربّعات الحدود والهندسة المستقيمة الخطية لأسباب تتعلق بالأداء أو غيرها من الأسباب، ولا تحاول تحقيق نتائج مثالية باستخدام وحدات بكسل للتعديلات مثل border-radius.

ومع ذلك، لا يُسمح باستخدام النتائج الموجبة الخاطئة تحت أي ظرف من الظروف (أي ضبط isVisible على true عندما لا يكون العنصر الهدف مرئيًا تمامًا وغير معدّل).

كيف يبدو الرمز الجديد عمليًا؟

تستخدم الدالة الإنشائية IntersectionObserver الآن خاصيتَي ضبط إضافيتين: delay وtrackVisibility. delay هو رقم يشير إلى الحدّ الأدنى للمللي ثانية بين الإشعارات الواردة من المراقب لهدف معيّن. trackVisibility هي قيمة منطقية تشير إلى ما إذا كان المراقب سيتتبّع التغييرات في مستوى رؤية الهدف.

من المهم الإشارة هنا إلى أنّه عندما تكون قيمة trackVisibility هي true، يجب ضبط delay على 100 على الأقل (أي يجب ألّا يقلّ عن إشعار واحد كل 100 ملي ثانية). كما ذكرنا سابقًا، يكون حساب مستوى الرؤية مكلفًا، وهذا المطلب هو إجراء احترازي لمنع تدهور الأداء واستهلاك البطارية. سيستخدم المطوّر المسؤول أكبر قيمة مقبولة للتأخير.

وفقًا spec الحالية، يتم احتساب مستوى الرؤية على النحو التالي:

  • إذا كانت سمة trackVisibility للمراقب هي false، سيصبح الهدف مرئيًا. ويتوافق هذا الأمر مع سلوك الإصدار 1 الحالي.

  • وإذا كان الهدف يحتوي على مصفوفة تحويل فعالة غير الترجمة الثنائية الأبعاد أو القياس النسبي الثنائي الأبعاد، سيتم اعتبار الهدف غير مرئي.

  • إذا كان الهدف أو أي عنصر في سلسلة الكتل التي تحتوي عليها ذات تعتيم فعّال بخلاف 1.0، سيُعتبر الهدف غير مرئي.

  • إذا تم تطبيق أي فلاتر على الهدف أو أي عنصر في سلسلة الكتل التي تتضمنه، سيُعتبر الهدف غير مرئي.

  • وإذا لم يضمن التنفيذ أنّ المحتوى المستهدف غير مغلق تمامًا في صفحة أخرى، يعتبر الهدف غير مرئي.

وهذا يعني أنّ طرق التنفيذ الحالية متحفظة جدًا وتضمن مستوى الظهور. على سبيل المثال، سيؤدي تطبيق فلتر تدرّج رمادي غير ملاحظ تقريبًا، مثل filter: grayscale(0.01%)، أو ضبط شفافية غير مرئية تقريبًا باستخدام opacity: 0.99، إلى عرض العنصر غير مرئي.

في ما يلي نموذج رمز قصير يوضّح الميزات الجديدة لواجهة برمجة التطبيقات. يمكنك رؤية منطق تتبُّع النقرات أثناء التنفيذ في القسم الثاني من العرض التوضيحي (ولكن الآن، جرِّب "مشاهدة" الفيديو الخاص بالجرو). احرِص على تفعيل "وضع الخدعة" مرة أخرى لتحويل نفسك فورًا إلى ناشر غامض والتعرّف على الطريقة التي يمنع بها الإصدار الثاني من "منصة مراقبة التقاطع" تتبُّع النقرات غير المشروعة على الإعلانات. هذه المرة، الإصدار الثاني من مراقبة التقاطع 🎉

الإصدار 2 من أداة مراقبة التقاطع لمنع النقرة غير المقصودة على أحد الإعلانات

<!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سبلاش