FPD Enrichment: Replace device values w and h with screen size; add ext.vpw and ext.vph (#12108)

Author: BohdanVV

src/fpd/enrichment.js

@@ -99,15 +99,24 @@ const ENRICHMENTS = {
   },
   device() {
     return winFallback((win) => {
-      const w = win.innerWidth || win.document.documentElement.clientWidth || win.document.body.clientWidth;
-      const h = win.innerHeight || win.document.documentElement.clientHeight || win.document.body.clientHeight;
+      // screen.width and screen.height are the physical dimensions of the screen
+      const w = win.screen.width;
+      const h = win.screen.height;
+
+      // vpw and vph are the viewport dimensions of the browser window
+      const vpw = win.innerWidth || win.document.documentElement.clientWidth || win.document.body.clientWidth;
+      const vph = win.innerHeight || win.document.documentElement.clientHeight || win.document.body.clientHeight;
 
       const device = {
         w,
         h,
         dnt: getDNT() ? 1 : 0,
         ua: win.navigator.userAgent,
         language: win.navigator.language.split('-').shift(),
+        ext: {
+          vpw,
+          vph,
+        },
       };
 
       if (win.navigator?.webdriver) {

test/spec/fpd/enrichment_spec.js

@@ -34,7 +34,11 @@ describe('FPD enrichment', () => {
       },
       document: {
         querySelector: sinon.stub()
-      }
+      },
+      screen: {
+        width: 1,
+        height: 1,
+      },
     };
   }
 
@@ -156,8 +160,8 @@ describe('FPD enrichment', () => {
     });
     testWindows(() => win, () => {
       it('sets w/h', () => {
-        win.innerHeight = 123;
-        win.innerWidth = 321;
+        win.screen.width = 321;
+        win.screen.height = 123;
         return fpd().then(ortb2 => {
           sinon.assert.match(ortb2.device, {
             w: 321,
@@ -166,6 +170,17 @@ describe('FPD enrichment', () => {
         });
       });
 
+      it('sets ext.vpw/vph', () => {
+        win.innerWidth = 12;
+        win.innerHeight = 21;
+        return fpd().then(ortb2 => {
+          sinon.assert.match(ortb2.device.ext, {
+            vpw: 12,
+            vph: 21,
+          });
+        });
+      });
+
       describe('ext.webdriver', () => {
         it('when navigator.webdriver is available', () => {
           win.navigator.webdriver = true;

test/spec/modules/asoBidAdapter_spec.js

@@ -200,8 +200,8 @@ describe('Adserver.Online bidding adapter', function () {
       expect(payload.site.page).to.equal('https://example.com/page.html');
 
       expect(payload.device).to.exist;
-      expect(payload.device.w).to.equal(window.innerWidth);
-      expect(payload.device.h).to.equal(window.innerHeight);
+      expect(payload.device.w).to.equal(window.screen.width);
+      expect(payload.device.h).to.equal(window.screen.height);
 
       expect(payload.imp).to.have.lengthOf(1);
 
@@ -229,8 +229,8 @@ describe('Adserver.Online bidding adapter', function () {
         expect(payload.site.page).to.equal('https://example.com/page.html');
 
         expect(payload.device).to.exist;
-        expect(payload.device.w).to.equal(window.innerWidth);
-        expect(payload.device.h).to.equal(window.innerHeight);
+        expect(payload.device.w).to.equal(window.screen.width);
+        expect(payload.device.h).to.equal(window.screen.height);
 
         expect(payload.imp).to.have.lengthOf(1);
 
@@ -258,8 +258,8 @@ describe('Adserver.Online bidding adapter', function () {
         expect(payload.site.page).to.equal('https://example.com/page.html');
 
         expect(payload.device).to.exist;
-        expect(payload.device.w).to.equal(window.innerWidth);
-        expect(payload.device.h).to.equal(window.innerHeight);
+        expect(payload.device.w).to.equal(window.screen.width);
+        expect(payload.device.h).to.equal(window.screen.height);
 
         expect(payload.imp).to.have.lengthOf(1);
 

test/spec/modules/prebidServerBidAdapter_spec.js

@@ -1088,8 +1088,8 @@ describe('S2S Adapter', function () {
       const requestBid = JSON.parse(server.requests[0].requestBody);
       sinon.assert.match(requestBid.device, {
         ifa: '6D92078A-8246-4BA4-AE5B-76104861E7DC',
-        w: window.innerWidth,
-        h: window.innerHeight
+        w: window.screen.width,
+        h: window.screen.height,
       })
       sinon.assert.match(requestBid.app, {
         bundle: 'com.test.app',
@@ -1120,8 +1120,8 @@ describe('S2S Adapter', function () {
       const requestBid = JSON.parse(server.requests[0].requestBody);
       sinon.assert.match(requestBid.device, {
         ifa: '6D92078A-8246-4BA4-AE5B-76104861E7DC',
-        w: window.innerWidth,
-        h: window.innerHeight
+        w: window.screen.width,
+        h: window.screen.height,
       })
       sinon.assert.match(requestBid.app, {
         bundle: 'com.test.app',
@@ -1480,8 +1480,8 @@ describe('S2S Adapter', function () {
           adapter.callBids(addFpdEnrichmentsToS2SRequest(REQUEST, BID_REQUESTS), BID_REQUESTS, addBidResponse, done, ajax);
           const requestBid = JSON.parse(server.requests[0].requestBody);
           sinon.assert.match(requestBid.device, {
-            w: window.innerWidth,
-            h: window.innerHeight
+            w: window.screen.width,
+            h: window.screen.height,
           })
           expect(requestBid.imp[0].native.ver).to.equal('1.2');
         });