diff --git a/README.md b/README.md index 7b04c37..3dc9ede 100644 --- a/README.md +++ b/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: ``` diff --git a/jest.config.js b/jest.config.js index ca90208..8244886 100644 --- a/jest.config.js +++ b/jest.config.js @@ -1,3 +1,4 @@ module.exports = { - transform: { '^.+\\.js$': '/jestPreprocess.js' } -} + transform: { '^.+\\.js$': '/jestPreprocess.js' }, + testURL: 'http://localhost/', +}; diff --git a/src/__tests__/prebid.test.js b/src/__tests__/prebid.test.js new file mode 100755 index 0000000..e9844e1 --- /dev/null +++ b/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]); + }); + }); +}); diff --git a/src/index.js b/src/index.js index fe321d1..64aa08d 100644 --- a/src/index.js +++ b/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); diff --git a/src/services/prebid.js b/src/services/prebid.js index 008ff10..8e7c8c8 100644 --- a/src/services/prebid.js +++ b/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);