Bug 1833495 - Check if an ad is well above the possible viewable window - r=Standard8, a=dmeehan

Differential Revision: https://phabricator.services.mozilla.com/D181179
This commit is contained in:
James Teow 2023-06-19 14:03:16 +00:00
parent bb9d1f44f8
commit 3d9a59b5ce
3 changed files with 41 additions and 4 deletions

View File

@ -230,6 +230,7 @@ class SearchAdImpression {
let hrefToComponentMap = new Map(); let hrefToComponentMap = new Map();
let innerWindowHeight = document.ownerGlobal.innerHeight; let innerWindowHeight = document.ownerGlobal.innerHeight;
let scrollY = document.ownerGlobal.scrollY;
// Iterate over the results: // Iterate over the results:
// - If it's searchbox add event listeners. // - If it's searchbox add event listeners.
@ -278,7 +279,8 @@ class SearchAdImpression {
element, element,
data.adsLoaded, data.adsLoaded,
childElements, childElements,
innerWindowHeight innerWindowHeight,
scrollY
); );
if (componentToVisibilityMap.has(data.type)) { if (componentToVisibilityMap.has(data.type)) {
let componentInfo = componentToVisibilityMap.get(data.type); let componentInfo = componentToVisibilityMap.get(data.type);
@ -642,6 +644,8 @@ class SearchAdImpression {
* List of children belonging to element. * List of children belonging to element.
* @param {number} innerWindowHeight * @param {number} innerWindowHeight
* Current height of the window containing the elements. * Current height of the window containing the elements.
* @param {number} scrollY
* Current distance the window has been scrolled.
* @returns {object} * @returns {object}
* Contains adsVisible which is the number of ads shown for the element * Contains adsVisible which is the number of ads shown for the element
* and adsHidden, the number of ads not visible to the user. * and adsHidden, the number of ads not visible to the user.
@ -650,7 +654,8 @@ class SearchAdImpression {
element, element,
adsLoaded, adsLoaded,
childElements, childElements,
innerWindowHeight innerWindowHeight,
scrollY
) { ) {
let elementRect = let elementRect =
element.ownerGlobal.windowUtils.getBoundsWithoutFlushing(element); element.ownerGlobal.windowUtils.getBoundsWithoutFlushing(element);
@ -664,6 +669,18 @@ class SearchAdImpression {
}; };
} }
// If an ad is far above the possible visible area of a window, an
// adblocker might be doing it as a workaround for blocking the ad.
if (
elementRect.bottom < 0 &&
innerWindowHeight + scrollY + elementRect.bottom < 0
) {
return {
adsVisible: 0,
adsHidden: adsLoaded,
};
}
// Since the parent element has dimensions but no child elements we want // Since the parent element has dimensions but no child elements we want
// to inspect, check the parent itself is within the viewable area. // to inspect, check the parent itself is within the viewable area.
if (!childElements || !childElements.length) { if (!childElements || !childElements.length) {

View File

@ -268,9 +268,9 @@ add_task(async function test_ad_impressions_with_hidden_carousels() {
assertAdImpressionEvents([ assertAdImpressionEvents([
{ {
component: SearchSERPTelemetryUtils.COMPONENTS.AD_CAROUSEL, component: SearchSERPTelemetryUtils.COMPONENTS.AD_CAROUSEL,
ads_loaded: "3", ads_loaded: "4",
ads_visible: "0", ads_visible: "0",
ads_hidden: "3", ads_hidden: "4",
}, },
]); ]);

View File

@ -62,6 +62,26 @@
</div> </div>
</div> </div>
</div> </div>
<h5 test-label="true">ad_carousel that is far above the page</h5>
<div class="moz-carousel" narrow="true" style="position: absolute; top: -9999px;">
<div class="moz-carousel-card">
<a class="hidden" href="https://example.com/ad"></a>
<a href="https://example.com/some-normal-path">
<div class="moz-carousel-image">Image</div>
</a>
<div class="moz-carousel-card-inner">
<div class="moz-carousel-card-inner-content">
<a class="hidden" href="https://example.com/ad"></a>
<a href="https://example.com/normal-path">
<h3>Name of Product</h3>
</a>
<h3>$199.99</h3>
<h3>Example.com</h3>
</div>
</div>
</div>
</div>
</section> </section>
</body> </body>
</html> </html>