{: .no_toc }

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.

{: .alert.alert-info :} For ad ops setup instructions, see Google Ad Manager with Prebid Step by Step.

• TOC

{:toc}

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.

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.

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

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'
            }
        },

    ]
});

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>

• Multi-Format Example

• Google Ad Manager with Prebid Step by Step