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], ...] ], ... ]
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>
Leave A Comment?