Prebid.js: Allow bids in sizeMapping for responsive designs
Type of issue
This is a feature request to help support responsive designs a lot better by only sending relevant bids, depending on the screen size.
Description
If I have a responsive design that has an ad slot that only accepts 300x250 on mobile, and only 728x90 on tablet/desktop, I'd love to be able to only request relevant 300x250 bids if their screen size is within a certain range.
As it stands now, it looks like all of my bidders seem to request bids even though they aren't even relevant. I fix this with a lot of if/else statements depending on the screen size, but I think this could be a lot easier.
Here's an example of what I think this would look like:
var adUnits = [{
code: 'ad-slot-1',
sizeMapping: [
{
minWidth : 1200,
sizes : [[970, 90], [728, 90]],
bids: [
{
bidder: 'pulsepoint',
params: {
cf: '728x90',
cp: 123456,
ct: 123456
}
},
{
bidder: 'pulsepoint',
params: {
cf: '970x90',
cp: 123456,
ct: 123456
}
},
{
bidder: 'sovrn',
params: {
tagid: '123456' // 970x90
}
},
{
bidder: 'sovrn',
params: {
tagid: '123456' // 728x90
}
},
{
bidder: 'districtmDMX',
params: {
id: 123456 // dynamic
}
}
]
},
{
minWidth : 768,
sizes : [728, 90],
bids: [
{
bidder: 'pulsepoint',
params: {
cf: '728x90',
cp: 123456,
ct: 123456
}
},
{
bidder: 'sovrn',
params: {
tagid: '123456' // 728x90
}
},
{
bidder: 'districtmDMX',
params: {
id: 123456 // dynamic
}
}
]
},
{
minWidth : 0,
sizes : [300, 250],
bids: [
{
bidder: 'pulsepoint',
params: {
cf: '300X250',
cp: 123456,
ct: 123456
}
},
{
bidder: 'sovrn',
params: {
tagid: '123456' // 300x250
}
},
{
bidder: 'districtmDMX',
params: {
id: 123456 // dynamic
}
}
]
}
]
...
Expected results
Prebid detects the screensize/viewport and chooses which ad sizes and bids should be used. Prebid sends out only the bid requests that are relevant to each sizemapping.
Actual results
All bids go out, no matter what, because they're all inside 'bids'. Sometimes returning a winning bid for a 300x250 when we didn't even send that size to them, but because that networks placement is set to 300x250 only, it accepts the bid and returns it, which means it's allowing a 300x250 ad into a space that it doesn't belong in and screws up layouts.
Platform details
Using Prebid 0.19.
kronok
All 15 comments
Here's how I've solved this in my own code. Combining my example above with this, and it works great so far.
// after adunits are defined
var vpWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
adUnits.forEach(function (adUnit) {
if (!adUnit.bids) {
var responsiveBids = adUnit.sizeMapping.find(function (sizeMapping) {
if (vpWidth > 0) {
return vpWidth > sizeMapping.minWidth;
} else {
return sizeMapping.minWidth == 0;
}
}).bids;
adUnit.bids = (responsiveBids);
}
});
Great, thanks. Will try this as the sizemapping as documented here http://prebid.org/dev-docs/examples/size-mapping.html does not work at all. We got the same problems, bids were returned for wrong sizes, which in case of price priority by Adsense kicked in, the wrong (larger) ad unit was served by DFP and breaks the site layout. Refactoring and debugging of sizemapping is recommended.
terrapop
on 26 Feb 2017
@kronok, your solution for responsive works fine, but I am getting error when I have multiple ads on the page. can you please share the code.
sajokj
on 3 Mar 2017
@sajokj not sure what to share other than pasting my entire integration. The key points are in my code above by having 'bids' in the sizeMapping area for each sizemapping.
If you paste your code, I'll take a look at it and see if I can help out.
kronok
on 3 Mar 2017
@kronok, Doubt was cleared and now its working fine. thanks for the support.
sajokj
on 6 Mar 2017
I made a pull request for some changes, along with what a valid 'adUnits' could look like in there.
It was mentioned that it may be a bit redundant to be putting the same bidder in multiple sizeMappings, and might make the adUnits pretty huge.
Here's my alternate API idea, but no code has been written to support it:
var adUnits = [{
code: 'ad-slot-1',
sizes: [[970, 90], [728, 90]]
bids: [
{
bidder: 'pulsepoint',
params: {
cf: '728x90',
cp: 123456,
ct: 123456
},
validSizes: [728, 90]
},
{
bidder: 'districtmDMX',
params: {
id: 123456 // dynamic
}
// no validSizes necessary, falls back to adUnit.sizes
}
],
sizeMapping: [
{
minWidth : 1200,
sizes : [[970, 90], [728, 90]],
},
{
minWidth : 768,
sizes : [728, 90],
}
]
}]
So if a screen size is 768 wide, it'll return all the bidders that support 728x90 and bidders with no validSizes set. A bidder with no validSizes could be considered an "all adUnit.sizes valid" bidder, such as a bidder that dynamically returns bids based on the sizes sent to it.
kronok
on 9 Mar 2017
@bretg
if you have a chance, would you mind adding your proposal here?
mkendall07
on 9 Mar 2017
We like the direction in this thread and #1038, but propose pulling the functionality out of the AdUnit. Our assumption is that the size mapping/responsive design rules are generally the same across all AdUnits, so replicating the size config across dozens of AdUnits is redundant.
Our alternate proposal is to create a new "pre-auction" bidderSettings which the platform uses to filter sizes from the AdUnit template before passing them to the adapters. Currently bidderSettings only applies to the response from the adapter, so rather than clutter that object, putting request-oriented parameters in a new global object seems reasonable. (We have other ideas for things that could go in this object, but will focus on sizeMapping for now.)
An example based on the scenario in #1038:
pbjs.bidderRequestSettings = { // new set of config applies to bids before going to the adapter
standard: {
sizeConfig: [
{ minWidth: 1200, { sizesSupported: [[970,90], [728,90], [300,250]], device: "desktop" } },
{ minWidth: 768, { sizesSupported: [[728,90]], device: "tablet" } },
{ minWidth: 0, { sizesSupported: [[300,250], [300,100]], device: "phone" } } ]
}
};
var adUnits = [{
"code": "ad-slot-1",
// these are all sizes that can be associated with the slot on the page, but adapters will only
// be passed the relevant sizes as filtered by 'sizesSupported' for the form factor
"sizes": [ [ 970,90 ], [ 728,90 ], [ 300,250 ], [ 300,100 ] ],
"bids": [ // the full set of bids, not all of which are relevant on all devices
{
"bidder": "pulsepoint",
"devices": [ "desktop", "tablet" ], // flags this bid as relevant only on these screen sizes
"params": {
"cf": "728X90",
"cp": 123456,
"ct": 123456
}
},
{
"bidder": "pulsepoint",
"devices": [ "desktop", "phone" ],
"params": {
"cf": "300x250",
"cp": 123456,
"ct": 123456
}
},
{
"bidder": "districtmDMX",
// devices not specified, so applies to all sizes
"params": {
"id": 123456
}
},
{
"bidder": "sovrn",
"devices": [ "desktop", "tablet" ],
"params": {
"tagid": "123456"
}
},
{
"bidder": "sovrn",
"devices": [ "phone" ],
"params": {
"tagid": "111111"
}
}
]
}];
Note that this is only in proposal stage at this point -- not in code yet.
Does an approach like this seem workable?
bretg
on 10 Mar 2017
I think a separate object for the sizeConfig would work great. Seems nice and DRY and it looks like it would solve the same issue.
I think my only other wish would able to define my sizes once in prebid, and use them for my gpt sizemapping as well like with a helper function pbjs.sizeMapToGpt('ad-unit-1') but maybe that's out of the scope of prebid. My first thought when setting up sizemappings for prebid and gpt was "I gotta define this stuff twice, but different?"
kronok
on 10 Mar 2017
We are looking into implementing sizeMapping but in it's current state this is not a viable option for us. Most of our bidders require different placement IDs for different sizes which makes the current implementation extremely inefficient.
Proposal by @bretg sounds great! This would enable us to remove our custom logic.
BartVB
on 19 Jul 2017
Our assumption is that the size mapping/responsive design rules are generally the same across all AdUnits
How would this handle edge cases where specific AdUnits behave differently to the rest. For example, all AdUnits would serve 300x600, 300x250 on desktop and 300x250 on mobile. However, the last AdUnit on the page should serve both 300x600 and 300x250 on mobile as it's at the bottom of the page and non-intrusive.
If I added the 300x600 to "sizesSupported" on "phone" wouldn't call it on all units?
Will there be an option to override the default?
benmayer
on 24 Jul 2017
@bretg 's suggestion looks great. Is there any way to implement this now? Would love to give it a shot as the current responsive setup is quite slow on mobile sending out all bids.
pribeh
on 19 Aug 2017
Same issue here, got 728 banners served on mobile device. Where are we at with this issue right now? Will prebid 1.0 address that issue? Thanks.
pboisso
on 24 Oct 2017
this is merged into prebid 1.0 branch. https://github.com/prebid/Prebid.js/pull/1772 Should be released to master soon.
mkendall07
on 14 Nov 2017
http://prebid.org/dev-docs/prebid-1.0-API.html#size-mapping-changes
mkendall07
on 29 Nov 2017
Related issues
matthewlane
路
8Comments
tedrand
路
4Comments
mercuryyy
路
5Comments
jaiminpanchal27
路
3Comments
mkendall07
路
5Comments
Most helpful comment
We like the direction in this thread and #1038, but propose pulling the functionality out of the AdUnit. Our assumption is that the size mapping/responsive design rules are generally the same across all AdUnits, so replicating the size config across dozens of AdUnits is redundant.
Our alternate proposal is to create a new "pre-auction" bidderSettings which the platform uses to filter sizes from the AdUnit template before passing them to the adapters. Currently bidderSettings only applies to the response from the adapter, so rather than clutter that object, putting request-oriented parameters in a new global object seems reasonable. (We have other ideas for things that could go in this object, but will focus on sizeMapping for now.)
An example based on the scenario in #1038:
Note that this is only in proposal stage at this point -- not in code yet.
Does an approach like this seem workable?