Multi-Format Ad Units

About this example:

  • A multi-format ad unit allows you to receive any combination of banner, video, or native demand
  • Any bidder that supports at least one of the listed media types can participate in the auction for that ad unit
  • For engineering setup instructions, see Show Multi-Format Ads
  • For ad ops setup instructions, see Google Ad Manager with Prebid Step by Step

Basic Prebid.js Example

div-banner-native-1

No response

div-banner-native-2

No response

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

</script>
</div>

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

    </script>
</div>

var PREBID_TIMEOUT = 1000;
var FAILSAFE_TIMEOUT = 3000;

var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];

var pbjs = pbjs || {};
pbjs.que = pbjs.que || [];

function initAdserver() {
    if (pbjs.initAdserverSet) return;

    googletag.cmd.push(function() {
        pbjs.que.push(function() {
            pbjs.setTargetingForGPTAsync();
            googletag.pubads().refresh();
        });
    });

    pbjs.initAdserverSet = true;
}

pbjs.que.push(function() {
    var adUnits = [{
            code: 'div-banner-native-1',
            mediaTypes: {
                banner: {
                    sizes: [
                        [300, 250]
                    ]
                },
                native: {
                    type: 'image'
                },
            },
            bids: [{
                bidder: 'appnexus',
                params: {
                    placementId: 13232392,
                }
            }]
        },
        {
            code: 'div-banner-native-2',
            mediaTypes: {
                banner: {
                    sizes: [
                        [300, 250]
                    ]
                },
                native: {
                    title: {
                        required: true
                    },
                    image: {
                        required: true
                    },
                    sponsoredBy: {
                        required: true
                    }
                }
            },
            bids: [{
                bidder: 'appnexus',
                params: {
                    placementId: 13232392,
                }
            }]
        }
    ];

    pbjs.setConfig({
        debug: true,
        cache: {
            url: false
        },
    });

    pbjs.addAdUnits(adUnits);
    pbjs.requestBids({
            timeout: PREBID_TIMEOUT,
        bidsBackHandler: function(bidResponses) {
            initAdserver();
        }
    });
});

// in case PBJS doesn't load
setTimeout(initAdserver, FAILSAFE_TIMEOUT);

googletag.cmd.push(function() {
    googletag
        .defineSlot(
            '/19968336/prebid_multiformat_test', [
                [300, 250],
                [360, 360]
            ],
            'div-banner-native-1'
        )
        .addService(googletag.pubads());

    googletag
        .defineSlot(
            '/19968336/prebid_multiformat_test', [
                [300, 250],
                [360, 360]
            ],
            'div-banner-native-2'
        )
        .addService(googletag.pubads());

    googletag.pubads().disableInitialLoad();
    googletag.pubads().enableSingleRequest();
    googletag.enableServices();
});

<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Multi-Format Ad Units</title>

    <!-- required scripts -->
    <script async src="//cdn.jsdelivr.net/npm/prebid.js@latest/dist/not-for-prod/prebid.js"></script>
    <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
  </head>
  <body>
  
  <!-- javascript -->
  <script>var PREBID_TIMEOUT = 1000;
var FAILSAFE_TIMEOUT = 3000;

var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];

var pbjs = pbjs || {};
pbjs.que = pbjs.que || [];

function initAdserver() {
    if (pbjs.initAdserverSet) return;

    googletag.cmd.push(function() {
        pbjs.que.push(function() {
            pbjs.setTargetingForGPTAsync();
            googletag.pubads().refresh();
        });
    });

    pbjs.initAdserverSet = true;
}

pbjs.que.push(function() {
    var adUnits = [{
            code: 'div-banner-native-1',
            mediaTypes: {
                banner: {
                    sizes: [
                        [300, 250]
                    ]
                },
                native: {
                    type: 'image'
                },
            },
            bids: [{
                bidder: 'appnexus',
                params: {
                    placementId: 13232392,
                }
            }]
        },
        {
            code: 'div-banner-native-2',
            mediaTypes: {
                banner: {
                    sizes: [
                        [300, 250]
                    ]
                },
                native: {
                    title: {
                        required: true
                    },
                    image: {
                        required: true
                    },
                    sponsoredBy: {
                        required: true
                    }
                }
            },
            bids: [{
                bidder: 'appnexus',
                params: {
                    placementId: 13232392,
                }
            }]
        }
    ];

    pbjs.setConfig({
        debug: true,
        cache: {
            url: false
        },
    });

    pbjs.addAdUnits(adUnits);
    pbjs.requestBids({
            timeout: PREBID_TIMEOUT,
        bidsBackHandler: function(bidResponses) {
            initAdserver();
        }
    });
});

// in case PBJS doesn't load
setTimeout(initAdserver, FAILSAFE_TIMEOUT);

googletag.cmd.push(function() {
    googletag
        .defineSlot(
            '/19968336/prebid_multiformat_test', [
                [300, 250],
                [360, 360]
            ],
            'div-banner-native-1'
        )
        .addService(googletag.pubads());

    googletag
        .defineSlot(
            '/19968336/prebid_multiformat_test', [
                [300, 250],
                [360, 360]
            ],
            'div-banner-native-2'
        )
        .addService(googletag.pubads());

    googletag.pubads().disableInitialLoad();
    googletag.pubads().enableSingleRequest();
    googletag.enableServices();
});
</script>

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

</script>
</div>

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

    </script>
</div>

  </body>
</html>
This example includes all available adapters and modules. Production implementations should build from source or customize the build using the Download page to make sure only the necessary bidder adapters and modules are included.

Further Reading