Viewports (Devices)

Path in Platform: Global setup > Viewports

Last edited: 2024/05/31

Viewports allow you to differentiate which ad units’ sizes are fetched based on user’s screen resolution (viewport width to be precise).

<aside> <img src="/icons/info-alternate_blue.svg" alt="/icons/info-alternate_blue.svg" width="40px" /> This feature is related to Prebid Stack or Yieldbird Platform when you are using Smart Tags based implementation and use Yieldbird Platform to control your Google Publisher Tag. If you are not using it, you can skip it.

</aside>

How does it work?

1. You define devices for your workspace. These are the minimum viewport widths that trigger the ad unit sizes.
2. In the Prebid Stack, when defining Media Types for particular ad units you can use these Devices to specify which sizes are triggered depending on User’s viewport width.
3. When a user visits your site, Yieldbird detects the viewport resolution and triggers the sizes for the widest applicable size bucket based on the viewport width. E.g. if the user’s viewport is 1200px and multiple Devices fit (e.g., size_bucket_A with a minimum width of 500px and size_bucket_B with a minimum width of 1000px), then size_bucket_B will be triggered.

<aside> <img src="/icons/link_yellow.svg" alt="/icons/link_yellow.svg" width="40px" /> Related external documentation:

• Prebid Advanced Size Mapping Module: link
• Google for developers documentation (applicable only when using Smart Tags) </aside>

Benefits of using viewports (Devices)

• fewer Prebid ad requests, resulting in reduced page latency and fewer unnecessary bids from SSPs.
• better matching of ad unit sizes with the user's device, improving ad display and experience from browsing your website

Additionally, without size mapping, you may have to define multiple allowed sizes but still allow situations when wining size is not optimal from user’s viewport size perspective and decrease overall UX of your page.

Using viewports (creating Devices)

1. Go to Inventory > Viewports > Add new or edit one of the already created Devices
2. Define:
   1. Name (e.g. Desktop or Mobile)
   2. Minimum viewport width to trigger the Size bucket
   3. Optionally:
      1. List the Banner Sizes that you want to use on the given size bucket
      2. List the Player sizes that you want to use on the given size bucket

<aside> <img src="/icons/arrow-right_green.svg" alt="/icons/arrow-right_green.svg" width="40px" /> Good practices:

• Create at least 2 Devices (e.g. and one for Mobile viewports (minimum width = 0px) and one for Desktop viewport (minimum width = 768px)
• Providing Banner sized and Player sizes on the viewport level makes it easier to later on define the Size of particular ad units </aside>

Example of usage

1. You created the following Devices:

   Device name	Minimum width	Predefined Banner Sizes	Predefined Player size
   desktop_wide	1024	300x600 750x100 930x180 930x600
   desktop	768	300x250 160x600 300x600 750x100
   mobile	0	320x100 336x280 300x100

2. In the Prebid Stack you when defining Media Types you decided to define the Sizes based on viewports and selected desktop Size bucket. The platform automatically populated Banner sizes with all 4 sizes that are defined for Size bucket desktop. You don’t want the size 750x100 on this ad unit, so you removed it and kept the sizes 300x250 160x600 300x600

3. Let’s take an example of 2 users:

   1. User A with viewport width 1200px: Yieldbird Platform will apply the sizes that are added to the size bucket desktop (because this user’s viewport is 1200px which is higher than minimum widht for this viewport - 768px). The Prebid Auction will run with sizes 300x250 160x600 300x600
   2. User B with viewport width 500px: The Prebid Auction won’t run, because for this user’s viewport width there are no sizes defined.

On this page: