Prebid.js: Question about sizeMapping Feature

[mrpbennett]

sizeMapping

The comments on the snippet mention that this will be the device width.
How can I get this to work on the viewport of the browser...or is that the same?

I have managed to implement this here and using the toggle device feature in the inspector can get it to call the different sizes depending on width. As DFP sizemapping is based on browser viewport size?!

Once this is off however, It calls the ad which is set up for the largest device so to speak.

[James328]

I was discussing this with @mrpbennett as well, and just to add: we use the DFP sizemapping to load the proper ad size based on browser viewport width, as our site is fully responsive. It looks like the prebid sizeMapping feature is based on device width rather than browser viewport width, so for us based on Paul's linked example, if you shrink your desktop browser window (not using the toggle device feature) to 400px width, prebid still thinks it needs to load a 970x250. Since our site is fully responsive, this would cause the layout to break if it loads a 970x250 in a browser viewport that is 400px wide.

[mkendall07]

Originally we had implemented using screen width but that didn't seem to work correctly with device emulation so we switched to device width. I'll have to take a look again. Viewport seems like the right approach.

[mkendall07]

@mrpbennett
Edit: Can you publish a gist of your code that was changed?

[James328]

@mkendall07 I believe he meant to link here: http://mrpben.net/sizemapping/. @mrpbennett correct me if i'm wrong

[mrpbennett]

yup thats right. Struggling to get an Ad, but you can see the size changing with the display size over the viewport

[dugwood]

@mkendall07 I've implemented in my own code, but not on device/screen/browser width, rather on the DIV where I put the iframe in. For example, I create a DIV with id leaderboard_prebid, then when I create the list of sizes, I'll check these against document.getElementById('leaderboard_prebid').offsetWidth || document.getElementById('leaderboard_prebid').clientWidth || 0. This way, in a responsive web site, depending on the size of the column and the DIV, I always show correct ad sizes (if the device isn't resized/rotated of course, but dealing with this case is painful and almost useless).

See also: https://github.com/prebid/Prebid.js/pull/837

[dugwood]

@James328 you should add overflow-x:hidden, as you'll always break the layout if the size of the screen changes. It happens a lot, for example if the page is loaded on a landscape orientation in mobile, then rotated to portrait.

[millieone]

Can someone confirm that DFP's size mapping is on browser viewport width and prebid's is on device width? If there is a mismatch I don't see the reason to implement it now.

Where do we find information like this?

The workaround we have been using to make Prebid responsive is to just put different prebid adsizes on the page using various IF statements for example:

if (jQuery(window).width() >= 960) { one set of prebid code }
else if (jQuery(window).width() >= 300) {another set of prebid code }

[mkendall07]

@millieone
It should be the same as DFP now (using viewport dimensions).