Dynamic Size Filtering in Prebid.js: Using Labels for Responsive Ads

Modern digital publishers operate in a landscape where users access content from a multitude of devices—desktops, tablets, and smartphones—with varying screen sizes and ad real estate. If you serve the wrong ad size for a given device, you risk subpar user experience, wasted impressions, or missed revenue.

This is where dynamic size filtering in Prebid.js comes into play. By using sizeConfig with labels and media queries, publishers can ensure that only the most appropriate ad sizes are eligible in header bidding auctions, matched to the user’s device and screen size. Understanding this setup is crucial for optimizing both fill and yield without manual intervention.

How Prebid.js Handles Ad Sizes Dynamically

Prebid.js offers a built-in feature, sizeConfig, that allows you to filter eligible creative sizes for each ad unit using JavaScript-based media queries and labels. This enables programmatic control over which ad sizes compete in the auction based on the user’s device or viewport—without duplicating ad unit definitions or relying purely on front-end logic.

Real-World Example: Desktop, Tablet, and Mobile

Imagine you have an ad slot at the top of your page. On desktop, you want large leaderboards like 970×250 but on mobile, such sizes would be unusable. With sizeConfig, you define:
– Media queries for desktop, tablet, and phone breakpoints (e.g., min-width:1025px for desktop)
– A set of banner sizes that are eligible per breakpoint (e.g., [970×250, 300×600, 300×250] for desktop; [320×100, 320×50, 300×250] for phone)
– Labels (like ‘desktop’, ‘tablet’, ‘phone’) to reference these configurations
Prebid.js then automatically filters and requests bids only for the sizes that are valid for the user’s current device, streamlining your header bidding logic and reducing bidder load.

Integration with Google Ad Manager (GAM) and Ad Rendering

Prebid.js works side-by-side with Google Ad Manager (GAM), which expects ad slots to be defined with a set of possible sizes. For dynamic filtering to work correctly, both Prebid.js and GAM need to be tightly synchronized so the sizes available for bids match what GAM expects to render.

Ensuring Alignment Between Prebid.js and GAM

You should define the union of all potential sizes for the slot in GAM, then let Prebid.js sizeConfig handle device-level filtering. This means GAM is ready to render any valid size received from the auction, preventing empty or mismatched ad calls. For example, define all expected creative sizes for a given slot in your Googletag code (like [970×250, 728×90, 320×50]), then rely on Prebid.js and labels to send only the appropriate ones according to device.

Avoiding Common Publisher Pitfalls

Dynamic filtering with sizeConfig is powerful but must be implemented thoughtfully. There are several common mistakes publishers should avoid to ensure smooth operations and maximize performance.

Pitfall 1: Incomplete Size Declarations

If you define only some sizes in your ad server or header bidding stack, you risk creatives not rendering or auctions failing to transact for certain devices. Always make sure the full set of possible sizes is accounted for in your ad server setup.

Pitfall 2: Overlapping or Incorrect Media Queries

Improper media query logic can result in gaps, where no size is eligible, or overlaps, where unintended sizes are allowed. Carefully segment your breakpoints and test them across both common and edge-case device widths.

Optimizing for Revenue and Performance

When done right, dynamic size filtering through Prebid.js labels enables publishers to:
– Increase yield by ensuring larger, higher-paying units are exposed where possible
– Improve viewability by serving right-sized ads for every device
– Reduce wasted impressions and page latency, since unfit creative sizes aren’t even called for on the wrong device

What this means for publishers

Dynamic filtering empowers publishers to automate size management and serve more valuable ads tailored to real user devices without bloated ad definitions. This approach sharpens monetization strategy, reduces troubleshooting complexity, and ensures ad ops teams can swiftly adapt to layout changes and new device profiles. The result: more targeted auctions, less wasted ad inventory, and the elimination of manual errors in device-ad size mapping.

Practical takeaway

If you’re not already taking advantage of Prebid.js’s sizeConfig with labels, now is the time to modernize your setup. Review your breakpoints, inventory the creative sizes used on each, and implement granular media queries in your Prebid.js configuration. Be sure your GAM slot definitions include the union of all possible sizes to guarantee compatibility.

Test across multiple devices and viewport widths to confirm size filtering is working as intended and that no ad slots are left empty. When in doubt, use browser tools to emulate devices and inspect both Prebid.js requests and GAM slot rendering. Ad ops teams should periodically review sizeConfig logic as layouts or business priorities evolve to sustain optimal monetization.