Google AdManager Hints

Responsive Ads

var adSlot = googletag
    .defineSlot('/6355419/Travel/Europe', [[300, 250], [728, 90], [750, 200]], 'multi-size-ad')
    .addService(googletag.pubads());

var mapping = googletag.sizeMapping()
  .addSize([1024, 768], [[750, 200], [728, 90]])
  .addSize([640, 480], [300, 250])
  .addSize([0, 0], [])
  .build();

adSlot.defineSizeMapping(mapping);

In this example, the mapping specifies:

    • When viewport >= 1024×768, ads sized  750×200 or  728×90 may serve.
    • When  1024×768 > viewport >=  640×480, ads sized  300×250 may serve.
    • When viewport <640×480, no ads may serve.

GPT will detect the size of the viewport of the browser making the request and use the largest mapping that fits. To determine the largest mapping GPT first considers width, then height (i.e., [100, 10] > [10, 100] ). In the event of an error in the mapping or if the viewport size can’t be determined, the sizes specified in
defineSlot() will be used.

[
  [
    [viewport-width-1, viewport-height-1],
    [[ad-width-1, ad-height-1], [ad-width-2, ad-height-2], ...]
  ],
  [
    [viewport-width-2, viewport-height-2],
    [[ad-width-3, ad-height-3], [ad-width-4, ad-height-4], ...]
  ],
  ...
]

Guides -> ad-sizes

GPT ref

DFP

 

Building Responsive Google Ads

 

<script async=’async’ src=’https://www.googletagservices.com/tag/js/gpt.js’></script>
<script>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
</script></code>

<script type=’text/javascript’>
var gptAdSlots = [];
googletag.cmd.push(function() {

var bottomAdSizes = googletag.sizeMapping().addSize([1280, 768], [1168, 150]).addSize([728, 300], [728, 90]).addSize([0, 0], [300, 250]).build();

gptAdSlots[0] = googletag.defineSlot(‘/21695176275/My-Bottom-Ad’, [[1168, 150], [728, 90], [300, 250]], ‘div-gpt-ad-1535019422815-0’).defineSizeMapping(bottomAdSizes).addService(googletag.pubads());

googletag.pubads().enableSingleRequest();
googletag.companionAds().setRefreshUnfilledSlots(true);
googletag.pubads().enableVideoAds();
googletag.enableServices();
});
</script>

Was this article helpful?

Leave A Comment?