The Advanced Size Mapping module enables configuration of responsive ad units with more flexibility than the core sizeConfig
feature. It detects the browser viewport dimensions, and based on that, applies a series of checks on the ad unit to determine:
The module can act on all three media types, banner, video, and native, and can be used to control their behavior. It can also activate/deactivate a particular bidder based on some checks.
It also has support for labels which are used to render ad units conditionally.
sizeConfig
feature will work.
Note that the Prebid Server bid adapter does not currently support the scenario where an adUnit has multiple mediaTypes, with different bidders set to different relevantMediaTypes for the same screen size.
If you’ve used sizeConfig
in Prebid.js before, read this section to learn about the differences. If you haven’t used sizeConfig before, you can skip to the next section.
The biggest change to size mapping is the introduction of AdUnit and Bidder level sizeConfig declarations. Instead of defining a global sizeConfig object configured in pbjs.setConfig
, each Ad Unit and Bidder can define and control their own set of sizeConfig rules. This process makes it easier to reason which sizes should be active for the current viewport size in complex scenarios.
A sizeConfig parameter may be specified on the AdUnit mediaType or a bidder. In these scenarios, the syntax is a little different than with the global configuration. Here’s an example for a sizeConfig object for banner media type:
Labels aren’t defined in AdUnit sizeConfig objects. Instead of funneling viewport sizes into a small number of labeled scenarios, the Advanced Size Mapping approach allows each AdUnit and Bidder to define separate size buckets. Labels are still an effective way to do other tasks such as filtering AdUnits and Bidders based on their geo location. For more details on Labels, visit Conditional Ad Units.
Likewise, mediaQuery is not used in AdUnit sizeConfig objects. Instead, an array of size buckets is defined by just the minViewPort
property. Only one size bucket activates based on viewport size.
It may be useful to compare the globally-configured sizeConfig with the AdUnit-level sizeConfig. Here is an example using global sizeConfig.
Here’s that same example using Advanced Size Mapping:
Note the tradeoff here: If you’re specifying duplicate sizeConfigs on every AdUnit, you might be better off using the global sizeConfig approach. But if the global approach isn’t flexible enough for your site design, the AdUnit-level approach is the right way to go.
WARNING: If AdUnit level sizeConfigs are found, global sizeConfig will be ignored.
I. Size Bucket (Declared using minViewPort)
As the name suggests, minViewPort signifies the minimum viewport size for the size bucket to become active. It’s declared as an array of two numbers. The first number indicates the viewport width, the second indicates viewport height. For example, if minViewPort is [750, 0]
, this size bucket will activate only when viewport width is greater than 750
. If there was any previous size bucket active for a smaller viewport, it’ll get deactivated.
NOTE: Only one size bucket in each array will be active for the current viewport size.
II. Associated Property
What happens as a result of each active size bucket changes based on the media type and whether it was defined at the AdUnit or Bidder level. This table summarizes the scenarios:
Where Defined | Available Property | Example | Description |
---|---|---|---|
mediaTypes.banner | sizes | [[300, 250],[300, 100]] or [] |
Defines banner sizes that will be sent as part of bid requests for this size range. Declaring an empty array turns off banners for this AdUnit when the viewport is in that range. |
mediaTypes.video | playerSize | [[640, 400]] or [] |
Defines the video player-size that will be sent as part of bid requests. Declaring an empty array turns off the video mediaType for this AdUnit in this size range. |
mediaTypes.native | active | true |
Indicates whether Native mediaTypes should be active or not for this size bucket in this AdUnit. |
bids.bidder | relevantMediaTypes | ['banner', 'video', 'native'] or ['none'] |
An array that defines a list of mediaTypes that a bidder will bid on for this size bucket in this AdUnit. Set to [‘none’] if no mediaType of this size bucket. |
Note that the labels are assumed to be passed in via pbjs.requestBids()
.
Here are two requests and how they would be handled in this scenario:
I. A request originating in the US, viewport size: [1400px, 800px]
[1200, 0]
gets activated. Sizes: [[970, 400], [300, 200], [300, 250]]
are active at AdUnit level.[[970, 400], [300, 200], [300, 250]]
[1200, 0]
gets activated. Sizes: [[970, 400], [300, 200], [300, 250]]
are active at AdUnit level.[1200, 0]
gets activated. Relevant media types is set to none
. This deactivates the bidder.II. A request originating in the UK, viewport size: [1700px, 900px]
[1600, 0]
gets activated. Sizes is []
, and an empty array indicates no sizes for the current viewport, which disables the Ad Unit.Here are two requests and how they would be handled in this scenario:
I. A mobile device with viewport size: [460px, 300px]
[0, 0]
activates for all three media types. Banner is deactivated due to sizes: []
. Video is deactivated since playerSize: []
. Native is deactivated since active: false
.II. A tablet with viewport size: [1100px, 980px]
[900, 0]
activates for banner media type, so the associated sizes are active. Size bucket [0, 0]
activates for video media type. Its associated property is playerSize: []
, so the video media type gets disabled. Size bucket [600, 0]
activates for native media type. Its associated property is active: true
, which keeps native media type active at the AdUnit level.[700, 0]
activates. Associated property relevantMediaTypes
is set to ['banner']
.[400, 0]
activates. Associated property relevantMediaTypes
is set to ['native', 'video']
. Since video media type is already disabled at the AdUnit level, request for video won’t be sent to the bidder.Follow the basic build instructions in the GitHub Prebid.js repo’s main README. To include the Advanced Size Mapping module, the sizeMappingV2
module must be added to the gulp build command: