feat: Allow overriding prebid mediaTypes

README.md

@@ -292,7 +292,7 @@ const arcAds = new ArcAds({
 })
 ```
 
-On the advertisement registration you can then provide information about which bidding services that specific advertisement should use. You can find a list of paramters that Prebid.js accepts for each adapter on the [Prebid.js website](http://prebid.org/dev-docs/publisher-api-reference.html). Additionally you can turn on [Prebid.js debugging](http://prebid.org/dev-docs/toubleshooting-tips.html) by adding `?pbjs_debug=true` to the url.
+On the advertisement registration you can then provide information about which bidding services that specific advertisement should use. You can find a list of parameters that Prebid.js accepts for each adapter on the [Prebid.js website](http://prebid.org/dev-docs/publisher-api-reference.html). Additionally you can turn on [Prebid.js debugging](http://prebid.org/dev-docs/toubleshooting-tips.html) by adding `?pbjs_debug=true` to the url.
 
 ```javascript
 arcAds.registerAd({
@@ -320,6 +320,39 @@ arcAds.registerAd({
 })
 ```
 
+In certain scenarios you may want to define different sizes for Prebid.js than what you use in GPT. The `registerAd` method will by default use your dimensions to set these for you, but you can override this by adding a `mediaTypes` property to your bidding configuration. You can read more about media types on the [Prebid.js website](http://prebid.org/dev-docs/adunit-reference.html#adunitmediatypes).
+
+```javascript
+arcAds.registerAd({
+  id: 'div-id-123',
+  slotName: 'hp/hp-1',
+  adType: 'cube',
+  display: 'desktop',
+  dimensions: [ [[970, 250], [970, 90], [728, 90]], [[728, 90]], [[320, 100], [320, 50]] ],
+  sizemap: {
+    breakpoints: [ [1280, 0], [800, 0], [0, 0] ],
+    refresh: 'true'
+  },
+  bidding: {
+    prebid: {
+      enabled: true,
+      mediaTypes: {
+        banner: {
+          sizes: [[980, 300], [970, 250]],
+        },
+      },
+      bids: [{
+        bidder: 'appnexus',
+        labels: ['desktop', 'tablet', 'phone'],
+        params: {
+          placementId: '10433394' 
+        }
+      }]
+    }
+  }
+})
+```
+
 ### Amazon TAM/A9
 You can enable Amazon A9/TAM on the service by adding an `amazon` object to the wrapper initialization and then passing it `enabled: true`. You must also include the `apstag` script on your page with: 
 ```

jest.config.js

@@ -1,3 +1,4 @@
 module.exports = {
-  transform: { '^.+\\.js$': '<rootDir>/jestPreprocess.js' }
-}
+  transform: { '^.+\\.js$': '<rootDir>/jestPreprocess.js' },
+  testURL: 'http://localhost/',
+};

src/__tests__/prebid.test.js

@@ -0,0 +1,100 @@
+import { ArcAds } from '../index';
+import * as prebid from '../services/prebid';
+
+describe('arcads', () => {
+  const methods = {
+    addUnit: jest.spyOn(prebid, 'addUnit'),
+  };
+
+  const arcAds = new ArcAds({
+    dfp: {
+      id: '123'
+    },
+    bidding: {
+      amazon: {
+        enabled: true,
+        id: '123'
+      },
+      prebid: {
+        enabled: true
+      }
+    }
+  });
+
+  global.pbjs = {
+    addAdUnits: (slot) => { global.slot = slot; },
+    setConfig: () => global.pbjs,
+    setTargetingForGPTAsync: () => global.pbjs,
+    requestBids: () => global.pbjs,
+    que: []
+  };
+
+  describe('prebid', () => {
+    it('should push a function to the pbjs queue', () => {
+      const fn = () => 'montezuma';
+      prebid.queuePrebidCommand(fn);
+
+      expect(global.pbjs.que.length).toBe(1);
+      expect(global.pbjs.que[0]).toBe(fn);
+    });
+
+    it('should use dimensions for sizes by default', () => {
+      arcAds.registerAd({
+        id: 'div-id-123',
+        slotName: 'hp/hp-1',
+        adType: 'cube',
+        dimensions: [[300, 250], [300, 600]],
+        display: 'all',
+        targeting: {
+          section: 'weather'
+        },
+        bidding: {
+          prebid: {
+            enabled: true,
+            bids: [{
+              bidder: 'appnexus',
+              labels: ['desktop', 'tablet', 'phone'],
+              params: {
+                placementId: '10433394'
+              }
+            }]
+          }
+        }
+      });
+      expect(methods.addUnit.mock.calls.length).toBe(1);
+      expect(global.slot.mediaTypes.banner.sizes).toEqual([[300, 250], [300, 600]]);
+    });
+
+    it('should use mediaTypes for sizes if defined', () => {
+      arcAds.registerAd({
+        id: 'div-id-123',
+        slotName: 'hp/hp-1',
+        adType: 'cube',
+        dimensions: [[300, 250], [300, 600]],
+        display: 'all',
+        targeting: {
+          section: 'weather'
+        },
+        bidding: {
+          prebid: {
+            enabled: true,
+            mediaTypes: {
+              banner: {
+                sizes: [980, 300]
+              }
+            },
+            bids: [{
+              bidder: 'appnexus',
+              labels: ['desktop', 'tablet', 'phone'],
+              params: {
+                placementId: '10433394'
+              }
+            }]
+          }
+        }
+      });
+      expect(methods.addUnit.mock.calls.length).toBe(2);
+      expect(global.slot.mediaTypes.banner.sizes).toEqual([980, 300]);
+    });
+  });
+});

src/index.js

@@ -71,7 +71,7 @@ export class ArcAds {
             });
           }
           const code = this.wrapper.prebid.useSlotForAdUnit ? determineSlotName(this.dfpId, slotName) : id;
-          queuePrebidCommand.bind(this, addUnit(code, flatDimensions, bidding.prebid.bids, this.wrapper.prebid));
+          queuePrebidCommand.bind(this, addUnit(code, flatDimensions, bidding.prebid.bids, this.wrapper.prebid, bidding.prebid.mediaTypes));
         }
 
         processDisplayAd = this.displayAd.bind(this, params);

src/services/prebid.js

@@ -38,11 +38,12 @@ export function fetchPrebidBids(ad, code, timeout, info, prerender, cb = null) {
  * @param {array} sizes - An array of applicable ad sizes that are available for bidding.
  * @param {object} bids - Contains all of the applicable bid data, such as which vendors to use and their placement ids.
  * @param {object} wrapper - An object containing all enabled services on the Arc Ads.
+ * @param {object} mediaTypes - An object containing custom mediaType definitions, if for instance you have separate sizes in GPT and prebid.
  **/
-export function addUnit(code, sizes, bids, wrapper = {}) {
+export function addUnit(code, sizes, bids, wrapper = {}, mediaTypes = null) {
   // Formats the add unit for prebid..
   const slot = { code, bids };
-  slot.mediaTypes = { banner: { sizes } };
+  slot.mediaTypes = mediaTypes || { banner: { sizes } };
   const { sizeConfig, config } = wrapper;
 
   pbjs.addAdUnits(slot);