Filter Sizes Dynamically with Labels

About this example:

  • This example demonstrates dynamic filtering on ad unit sizes
  • Ad unit labels applied based on CSS media queries

Filter Sizes Dynamically with Labels

Div-1
<h5>Div-1</h5>
<div id='div-1'>
  <script type='text/javascript'>
    googletag.cmd.push(function() {
      googletag.display('div-1');
    });
  </script>
</div>

var desktopSizes = [
    [970, 250],
    [300, 600],
    [300, 250]
];
var tabletSizes = [
    [728, 90],
    [160, 600],
    [300, 250]
];
var phoneSizes = [
    [320, 100],
    [320, 50],
    [300, 250]
];
var allSizes = [
    [970, 250],
    [728,90],
    [320, 100],
    [320, 50],
    [300, 600],
    [300, 250],
    [160,600]
];
var PREBID_TIMEOUT = 1000;
var FAILSAFE_TIMEOUT = 3000;

var adUnits = [
    {
        code: '/19968336/header-bid-tag-0',
        mediaTypes: {
            banner: {
                sizes: allSizes
            }
        },
        bids: [
            {
                bidder: 'appnexus',
                params: {
                    placementId: 13144370
                }
            }
        ]
    }
];

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

var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
googletag.cmd.push(function() {
    googletag.pubads().disableInitialLoad();
});

pbjs.que.push(function() {
    pbjs.addAdUnits(adUnits);
    pbjs.setConfig({
        sizeConfig: [{
            'mediaQuery': '(min-width: 1025px)',
            'sizesSupported': desktopSizes,
            'labels': ['desktop']
        }, {
            'mediaQuery': '(min-width: 768px) and (max-width: 1024px)',
            'sizesSupported': tabletSizes,
            'labels': ['tablet']
        }, {
            'mediaQuery': '(min-width: 320px) and (max-width: 812px)',
            'sizesSupported': phoneSizes,
            'labels': ['phone']
        }]
    });
    pbjs.requestBids({
        bidsBackHandler: sendAdserverRequest,
        timeout: PREBID_TIMEOUT
    });
});

function sendAdserverRequest() {
    if (pbjs.adserverRequestSent) return;
    pbjs.adserverRequestSent = true;
    googletag.cmd.push(function() {
        pbjs.que.push(function() {
            pbjs.setTargetingForGPTAsync();
            googletag.pubads().refresh();
        });
    });
}

// in case PBJS doesn't load
setTimeout(function() {
    sendAdserverRequest();
}, FAILSAFE_TIMEOUT);

googletag.cmd.push(function() {
    googletag.defineSlot('/19968336/header-bid-tag-0', allSizes, 'div-1')
        .addService(googletag.pubads());
    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>Filter Sizes Dynamically with Labels</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 desktopSizes = [
    [970, 250],
    [300, 600],
    [300, 250]
];
var tabletSizes = [
    [728, 90],
    [160, 600],
    [300, 250]
];
var phoneSizes = [
    [320, 100],
    [320, 50],
    [300, 250]
];
var allSizes = [
    [970, 250],
    [728,90],
    [320, 100],
    [320, 50],
    [300, 600],
    [300, 250],
    [160,600]
];
var PREBID_TIMEOUT = 1000;
var FAILSAFE_TIMEOUT = 3000;

var adUnits = [
    {
        code: '/19968336/header-bid-tag-0',
        mediaTypes: {
            banner: {
                sizes: allSizes
            }
        },
        bids: [
            {
                bidder: 'appnexus',
                params: {
                    placementId: 13144370
                }
            }
        ]
    }
];

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

var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
googletag.cmd.push(function() {
    googletag.pubads().disableInitialLoad();
});

pbjs.que.push(function() {
    pbjs.addAdUnits(adUnits);
    pbjs.setConfig({
        sizeConfig: [{
            'mediaQuery': '(min-width: 1025px)',
            'sizesSupported': desktopSizes,
            'labels': ['desktop']
        }, {
            'mediaQuery': '(min-width: 768px) and (max-width: 1024px)',
            'sizesSupported': tabletSizes,
            'labels': ['tablet']
        }, {
            'mediaQuery': '(min-width: 320px) and (max-width: 812px)',
            'sizesSupported': phoneSizes,
            'labels': ['phone']
        }]
    });
    pbjs.requestBids({
        bidsBackHandler: sendAdserverRequest,
        timeout: PREBID_TIMEOUT
    });
});

function sendAdserverRequest() {
    if (pbjs.adserverRequestSent) return;
    pbjs.adserverRequestSent = true;
    googletag.cmd.push(function() {
        pbjs.que.push(function() {
            pbjs.setTargetingForGPTAsync();
            googletag.pubads().refresh();
        });
    });
}

// in case PBJS doesn't load
setTimeout(function() {
    sendAdserverRequest();
}, FAILSAFE_TIMEOUT);

googletag.cmd.push(function() {
    googletag.defineSlot('/19968336/header-bid-tag-0', allSizes, 'div-1')
        .addService(googletag.pubads());
    googletag.pubads().enableSingleRequest();
    googletag.enableServices();
});
</script>

  <!-- html -->
  <h5>Div-1</h5>
<div id='div-1'>
  <script type='text/javascript'>
    googletag.cmd.push(function() {
      googletag.display('div-1');
    });
  </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