Show Multi-Format Ads with Prebid.js

This page has instructions for showing multi-format ads using Prebid.js.

An ad unit is said to be multi-format if it supports at least two of the following media types:

  • Banner
  • Native
  • Video

Once declared, any bidder that supports at least one of the media types can participate in the auction for that ad unit.

For ad ops setup instructions, see Google Ad Manager with Prebid Step by Step.

  • TOC

How Multi-Format Ads Work

Prebid multi-format ad units allow direct competition between banner, native, and/or video bids.

At a high level, Prebid.js supports multi-format ads as follows:

  1. An ad unit may define a mediaTypes object to specify one or more supported formats and their respective properties.
  2. Each bidder specified on a given ad unit will be eligible to bid if the bidder supports at least one of the media types specified via adUnit.mediaTypes.
  3. Prebid.js sends bid requests to each eligible bidder.

The following key is added to your ad server targeting, and set to the value of the bid response’s mediaType property.

  • hb_format

The ad ops team will reference this key in the ad server to set targeting. For ad ops setup instructions, see Google Ad Manager with Prebid Step by Step.

Prerequisites

Keep the following prerequisites in mind during the implementation:

  • Make sure to work with bidders that support demand for the media types you want, particularly native and video. To see which bidders have native and/or video demand, see Bidders with Video and Native Demand.

Implementation

This section describes the implementation using code samples, but ignores some of the details that are common to all Prebid.js setups.

1. Add multi-format ad units

The ad unit below supports the banner, native, and video media types.

pbjs.addAdUnits({
    code: 'div-banner-outstream-native',
    mediaTypes: {
        banner: {
            sizes: [
                [300, 250],
                [300, 50]
            ]
        },
        native: {
            image: {
                sizes: [300, 250]
            }
        },
        video: {
            context: 'outstream',
            playerSize: [640, 480],
            mimes: ['video/mp4'],
            protocols: [1, 2, 3, 4, 5, 6, 7, 8],
            playbackmethod: [2],
            skip: 1
        },
    },
    bids: [

        {
            bidder: 'bannerBidder',
            params: {
                placementId: '481'
            }
        },

        {
            bidder: 'nativeBidder',
            params: {
                titleAsset: '516'
            }
        },

        {
            bidder: 'videoBidder',
            params: {
                vidId: '234'
            }
        },

    ]
});

2. Add your tag to the page body

Add a tag like the following to your page. Depending on who wins the auction, a banner, outstream, or native ad should serve.

<div id='div-banner-outstream-native'>
    <p>No response</p>
    <script type='text/javascript'>
        googletag.cmd.push(function () {
            googletag.display('div-banner-outstream-native');
        });
    </script>
</div>

Working Examples

Further Reading