diff --git a/modules/medianetBidAdapter.js b/modules/medianetBidAdapter.js index 08232231417..4ff7bfd000e 100644 --- a/modules/medianetBidAdapter.js +++ b/modules/medianetBidAdapter.js @@ -4,6 +4,11 @@ import { config } from 'src/config'; const BIDDER_CODE = 'medianet'; const BID_URL = '//prebid.media.net/rtb/prebid'; +const SLOT_VISIBILITY = { + NOT_DETERMINED: 0, + ABOVE_THE_FOLD: 1, + BELOW_THE_FOLD: 2 +}; $$PREBID_GLOBAL$$.medianetGlobals = {}; @@ -71,6 +76,31 @@ function getSize(size) { } } +function getWindowSize() { + return { + w: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || -1, + h: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || -1 + } +} + +function getCoordinates(id) { + const element = document.getElementById(id); + if (element && element.getBoundingClientRect) { + const rect = element.getBoundingClientRect(); + let coordinates = {}; + coordinates.top_left = { + y: rect.top, + x: rect.left + }; + coordinates.bottom_right = { + y: rect.bottom, + x: rect.right + }; + return coordinates + } + return null; +} + function extParams(params, gdpr) { let ext = { customer_id: params.cid, @@ -80,6 +110,10 @@ function extParams(params, gdpr) { if (ext.gdpr_applies) { ext.gdpr_consent_string = gdpr.consentString || ''; } + let windowSize = spec.getWindowSize(); + if (windowSize.w !== -1 && windowSize.h !== -1) { + ext.screen = windowSize; + } return ext; } @@ -102,9 +136,64 @@ function slotParams(bidRequest) { if (bidFloor) { params.bidfloor = bidFloor; } + const coordinates = getCoordinates(bidRequest.adUnitCode); + if (coordinates) { + let normCoordinates = normalizeCoordinates(coordinates); + params.ext.coordinates = normCoordinates; + params.ext.viewability = getSlotVisibility(coordinates.top_left, getMinSize(params.banner)); + if (getSlotVisibility(normCoordinates.top_left, getMinSize(params.banner)) > 0.5) { + params.ext.visibility = SLOT_VISIBILITY.ABOVE_THE_FOLD; + } else { + params.ext.visibility = SLOT_VISIBILITY.BELOW_THE_FOLD; + } + } else { + params.ext.visibility = SLOT_VISIBILITY.NOT_DETERMINED; + } + return params; } +function getMinSize(sizes) { + return sizes.reduce((min, size) => size.h * size.w < min.h * min.w ? size : min); +} + +function getSlotVisibility(topLeft, size) { + let maxArea = size.w * size.h; + let windowSize = spec.getWindowSize(); + let bottomRight = { + x: topLeft.x + size.w, + y: topLeft.y + size.h + }; + if (maxArea === 0 || windowSize.w === -1 || windowSize.h === -1) { + return 0; + } + + return getOverlapArea(topLeft, bottomRight, {x: 0, y: 0}, {x: windowSize.w, y: windowSize.h}) / maxArea; +} + +// find the overlapping area between two rectangles +function getOverlapArea(topLeft1, bottomRight1, topLeft2, bottomRight2) { + // If no overlap, return 0 + if ((topLeft1.x > bottomRight2.x || bottomRight1.x < topLeft2.x) || (topLeft1.y > bottomRight2.y || bottomRight1.y < topLeft2.y)) { + return 0; + } + // return overlapping area : [ min of rightmost/bottommost co-ordinates ] - [ max of leftmost/topmost co-ordinates ] + return ((Math.min(bottomRight1.x, bottomRight2.x) - Math.max(topLeft1.x, topLeft2.x)) * (Math.min(bottomRight1.y, bottomRight2.y) - Math.max(topLeft1.y, topLeft2.y))); +} + +function normalizeCoordinates(coordinates) { + return { + top_left: { + x: coordinates.top_left.x + window.pageXOffset, + y: coordinates.top_left.y + window.pageYOffset, + }, + bottom_right: { + x: coordinates.bottom_right.x + window.pageXOffset, + y: coordinates.bottom_right.y + window.pageYOffset, + } + } +} + function generatePayload(bidRequests, bidderRequests) { return { site: siteDetails(bidRequests[0].params.site), @@ -204,6 +293,8 @@ export const spec = { if (syncOptions.pixelEnabled) { return filterUrlsByType(cookieSyncUrls, 'image'); } - } + }, + + getWindowSize, }; registerBidder(spec); diff --git a/test/spec/modules/medianetBidAdapter_spec.js b/test/spec/modules/medianetBidAdapter_spec.js index a10dcb2624d..d94cb64c145 100644 --- a/test/spec/modules/medianetBidAdapter_spec.js +++ b/test/spec/modules/medianetBidAdapter_spec.js @@ -82,12 +82,28 @@ let VALID_BID_REQUEST = [{ 'customer_id': 'customer_id', 'prebid_version': $$PREBID_GLOBAL$$.version, 'gdpr_applies': false, + 'screen': { + 'w': 1000, + 'h': 1000 + } }, 'id': 'aafabfd0-28c0-4ac0-aa09-99689e88b81d', 'imp': [{ 'id': '28f8f8130a583e', 'ext': { - 'dfp_id': 'div-gpt-ad-1460505748561-0' + 'dfp_id': 'div-gpt-ad-1460505748561-0', + 'visibility': 1, + 'viewability': 1, + 'coordinates': { + 'top_left': { + x: 50, + y: 50 + }, + 'bottom_right': { + x: 100, + y: 100 + } + } }, 'banner': [{ 'w': 300, @@ -105,7 +121,19 @@ let VALID_BID_REQUEST = [{ }, { 'id': '3f97ca71b1e5c2', 'ext': { - 'dfp_id': 'div-gpt-ad-1460505748561-123' + 'dfp_id': 'div-gpt-ad-1460505748561-123', + 'visibility': 1, + 'viewability': 1, + 'coordinates': { + 'top_left': { + x: 50, + y: 50 + }, + 'bottom_right': { + x: 100, + y: 100 + } + } }, 'banner': [{ 'w': 300, @@ -131,13 +159,29 @@ let VALID_BID_REQUEST = [{ 'ext': { 'customer_id': 'customer_id', 'prebid_version': $$PREBID_GLOBAL$$.version, - 'gdpr_applies': false + 'gdpr_applies': false, + 'screen': { + 'w': 1000, + 'h': 1000 + } }, 'id': 'aafabfd0-28c0-4ac0-aa09-99689e88b81d', 'imp': [{ 'id': '28f8f8130a583e', 'ext': { - 'dfp_id': 'div-gpt-ad-1460505748561-0' + 'dfp_id': 'div-gpt-ad-1460505748561-0', + 'visibility': 1, + 'viewability': 1, + 'coordinates': { + 'top_left': { + x: 50, + y: 50 + }, + 'bottom_right': { + x: 100, + y: 100 + } + } }, 'banner': [{ 'w': 300, @@ -154,7 +198,19 @@ let VALID_BID_REQUEST = [{ }, { 'id': '3f97ca71b1e5c2', 'ext': { - 'dfp_id': 'div-gpt-ad-1460505748561-123' + 'dfp_id': 'div-gpt-ad-1460505748561-123', + 'visibility': 1, + 'viewability': 1, + 'coordinates': { + 'top_left': { + x: 50, + y: 50 + }, + 'bottom_right': { + x: 100, + y: 100 + } + } }, 'banner': [{ 'w': 300, @@ -339,7 +395,7 @@ let VALID_BID_REQUEST = [{ 'consentString': 'consentString', 'gdprApplies': true, }, - 'timeout': 3000, + 'timeout': 3000 }, VALID_PAYLOAD_FOR_GDPR = { 'site': { @@ -352,12 +408,28 @@ let VALID_BID_REQUEST = [{ 'prebid_version': $$PREBID_GLOBAL$$.version, 'gdpr_consent_string': 'consentString', 'gdpr_applies': true, + 'screen': { + 'w': 1000, + 'h': 1000 + } }, 'id': 'aafabfd0-28c0-4ac0-aa09-99689e88b81d', 'imp': [{ 'id': '28f8f8130a583e', 'ext': { - 'dfp_id': 'div-gpt-ad-1460505748561-0' + 'dfp_id': 'div-gpt-ad-1460505748561-0', + 'visibility': 1, + 'viewability': 1, + 'coordinates': { + 'top_left': { + x: 50, + y: 50 + }, + 'bottom_right': { + x: 100, + y: 100 + } + } }, 'banner': [{ 'w': 300, @@ -374,7 +446,19 @@ let VALID_BID_REQUEST = [{ }, { 'id': '3f97ca71b1e5c2', 'ext': { - 'dfp_id': 'div-gpt-ad-1460505748561-123' + 'dfp_id': 'div-gpt-ad-1460505748561-123', + 'visibility': 1, + 'viewability': 1, + 'coordinates': { + 'top_left': { + x: 50, + y: 50 + }, + 'bottom_right': { + x: 100, + y: 100 + } + } }, 'banner': [{ 'w': 300, @@ -393,6 +477,15 @@ let VALID_BID_REQUEST = [{ }; describe('Media.net bid adapter', () => { + let sandbox; + beforeEach(() => { + sandbox = sinon.sandbox.create(); + }); + + afterEach(() => { + sandbox.restore(); + }); + describe('isBidRequestValid', () => { it('should accept valid bid params', () => { let isValid = spec.isBidRequestValid(VALID_PARAMS); @@ -416,6 +509,27 @@ describe('Media.net bid adapter', () => { }); describe('buildRequests', () => { + beforeEach(() => { + let documentStub = sandbox.stub(document, 'getElementById'); + let boundingRect = { + top: 50, + left: 50, + bottom: 100, + right: 100 + }; + documentStub.withArgs('div-gpt-ad-1460505748561-123').returns({ + getBoundingClientRect: () => boundingRect + }); + documentStub.withArgs('div-gpt-ad-1460505748561-0').returns({ + getBoundingClientRect: () => boundingRect + }); + let windowSizeStub = sandbox.stub(spec, 'getWindowSize'); + windowSizeStub.returns({ + w: 1000, + h: 1000 + }); + }); + it('should build valid payload on bid', () => { let requestObj = spec.buildRequests(VALID_BID_REQUEST, VALID_AUCTIONDATA); expect(JSON.parse(requestObj.data)).to.deep.equal(VALID_PAYLOAD); @@ -438,7 +552,6 @@ describe('Media.net bid adapter', () => { describe('build requests: when page meta-data is available', () => { it('should pass canonical, twitter and fb paramters if available', () => { - let sandbox = sinon.sandbox.create(); let documentStub = sandbox.stub(window.top.document, 'querySelector'); documentStub.withArgs('link[rel="canonical"]').returns({ href: 'http://localhost:9999/canonical-test' @@ -451,11 +564,83 @@ describe('Media.net bid adapter', () => { }); let bidReq = spec.buildRequests(VALID_BID_REQUEST, VALID_AUCTIONDATA); expect(JSON.parse(bidReq.data)).to.deep.equal(VALID_PAYLOAD_PAGE_META); - sandbox.restore(); }); }); }); + describe('slot visibility', () => { + let documentStub; + beforeEach(() => { + let windowSizeStub = sandbox.stub(spec, 'getWindowSize'); + windowSizeStub.returns({ + w: 1000, + h: 1000 + }); + documentStub = sandbox.stub(document, 'getElementById'); + }); + it('slot visibility should be 2 and ratio 0 when ad unit is BTF', () => { + let boundingRect = { + top: 1010, + left: 1010, + bottom: 1050, + right: 1050 + }; + documentStub.withArgs('div-gpt-ad-1460505748561-123').returns({ + getBoundingClientRect: () => boundingRect + }); + documentStub.withArgs('div-gpt-ad-1460505748561-0').returns({ + getBoundingClientRect: () => boundingRect + }); + + let bidReq = spec.buildRequests(VALID_BID_REQUEST, VALID_AUCTIONDATA); + let data = JSON.parse(bidReq.data); + expect(data.imp[0].ext.visibility).to.equal(2); + expect(data.imp[0].ext.viewability).to.equal(0); + }); + it('slot visibility should be 2 and ratio < 0.5 when ad unit is partially inside viewport', () => { + let boundingRect = { + top: 990, + left: 990, + bottom: 1050, + right: 1050 + }; + documentStub.withArgs('div-gpt-ad-1460505748561-123').returns({ + getBoundingClientRect: () => boundingRect + }); + documentStub.withArgs('div-gpt-ad-1460505748561-0').returns({ + getBoundingClientRect: () => boundingRect + }); + let bidReq = spec.buildRequests(VALID_BID_REQUEST, VALID_AUCTIONDATA); + let data = JSON.parse(bidReq.data); + expect(data.imp[0].ext.visibility).to.equal(2); + expect(data.imp[0].ext.viewability).to.equal(100 / 75000); + }); + it('slot visibility should be 1 and ratio > 0.5 when ad unit mostly in viewport', () => { + let boundingRect = { + top: 800, + left: 800, + bottom: 1050, + right: 1050 + }; + documentStub.withArgs('div-gpt-ad-1460505748561-123').returns({ + getBoundingClientRect: () => boundingRect + }); + documentStub.withArgs('div-gpt-ad-1460505748561-0').returns({ + getBoundingClientRect: () => boundingRect + }); + let bidReq = spec.buildRequests(VALID_BID_REQUEST, VALID_AUCTIONDATA); + let data = JSON.parse(bidReq.data); + expect(data.imp[0].ext.visibility).to.equal(1); + expect(data.imp[0].ext.viewability).to.equal(40000 / 75000); + }); + it('co-ordinates should not be sent and slot visibility should be 0 when ad unit is not present', () => { + let bidReq = spec.buildRequests(VALID_BID_REQUEST, VALID_AUCTIONDATA); + let data = JSON.parse(bidReq.data); + expect(data.imp[1].ext).to.not.have.ownPropertyDescriptor('viewability'); + expect(data.imp[1].ext.visibility).to.equal(0); + }); + }); + describe('getUserSyncs', () => { it('should exclude iframe syncs if iframe is disabled', () => { let userSyncs = spec.getUserSyncs(SYNC_OPTIONS_PIXEL_ENABLED, SERVER_CSYNC_RESPONSE); @@ -489,7 +674,7 @@ describe('Media.net bid adapter', () => { it('should not push response if no-bid', () => { let validBids = []; let bids = spec.interpretResponse(SERVER_RESPONSE_NOBID, []); - expect(bids).to.deep.equal(validBids) + expect(bids).to.deep.equal(validBids); }); }); });