Allow bids in sizeMapping for responsive designs

[kronok]

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]

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);
    }
});

[nerra0pos]

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.

[sajokj]

@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.

[kronok]

@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.

[sajokj]

@kronok, Doubt was cleared and now its working fine. thanks for the support.

[kronok]

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.

[mkendall07]

@bretg
if you have a chance, would you mind adding your proposal here?

[bretg]

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?

[kronok]

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?"

[BartVB]

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.

[benmayer]

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?