Geek Answers Handbook

DoubleClick for publishers: specify browser and ad sizes

I am trying to load banners depending on the size of the browser. Therefore, in the place where I have a 728x90 banner, 300x250 will show whether it will be on a mobile phone.

The problem is that 728x90 is loading onto the desktop. but 300x250 is not displayed on the mobile phone.

I tried to follow the example here

<script type='text/javascript'> googletag.cmd.push(function() { // This mapping will only display ads when user is on desktop sized viewport var mapLeader = googletag.sizeMapping(). addSize([0, 0], []). addSize([768, 200], [728, 90]). build(); // This mapping will only display ads when user is on mobile or tablet sized viewport var mapLeader2 = googletag.sizeMapping(). addSize([0, 0], []). addSize([768, 200], []). // Desktop addSize([300, 200], [300, 250]). // Tablet build(); window.LeaderSlot= googletag.defineSlot('/XXXXXXX/leaderboard-1', [728, 90], 'div-gpt-ad-1455251022145-0'). defineSizeMapping(mapLeader). setCollapseEmptyDiv(true). addService(googletag.pubads()); window.LeaderSlot= googletag.defineSlot('/XXXXXXX/medium-rectangle-1', [300, 250], 'div-gpt-ad-1458546777123-0'). defineSizeMapping(mapLeader2). setCollapseEmptyDiv(true). addService(googletag.pubads()); googletag.pubads().enableSingleRequest(); googletag.pubads().enableSyncRendering(); // Start ad fetching googletag.enableServices(); }); </script>

and in my HTML

 <!-- /XXXXXX/leaderboard-1 --> <div id='div-gpt-ad-1455251022145-0' style='height:90px; width:728px;' class="center"> <script type='text/javascript'> googletag.cmd.push(function() { googletag.display('div-gpt-ad-1455251022145-0'); }); </script> </div> <!-- /XXXXXX/medium-rectangle-1 --> <div id='div-gpt-ad-1458546777123-0' style='height:250px; width:300px;'> <script type='text/javascript'> googletag.cmd.push(function() { googletag.display('div-gpt-ad-1458546777123-0'); }); </script> </div>

Do I need to put a <div> for each size in one place? How can I load a 300x250 banner? 728x90 works great. I know that I could hide / show the size of the browser using CSS. but I do not want to do this. Downloading multiple sizes in one place slows down the loading of my sites.

+7
javascript adsense google-dfp gpt
source share
2 answers

You do not need style='height:90px; width:728px;' style='height:90px; width:728px;' , since you want DFP to load the appropriate banner in accordance with the screen size.

 <!-- /XXXXXX/leaderboard-1 --> <div id='div-gpt-ad-1455251022145-0' style='height:90px; width:728px;' class="center"> <script type='text/javascript'> googletag.cmd.push(function() { googletag.display('div-gpt-ad-1455251022145-0'); }); </script> </div>

when you test it in your browser using different screen sizes, remember that banners do not change automatically. You will need to refresh the page to see the changes.

0
source share

I really did not see the opportunity to save the example you provided, so I created an example that worked fine for me. I will explain a little below.

  <html> <head> <title>Async Responsive</title> <script async src="http://www.googletagservices.com/tag/js/gpt.js"> </script> <script> googletag = window.googletag || {cmd:[]}; googletag.cmd.push(function() { var sizeMapping = googletag.sizeMapping(). addSize([1024, 768], [970, 250]). // Screens of any size smaller than infinite but bigger than 1024 x 768 addSize([980, 690], [728, 90]). // Screens of any size smaller than 1024x 768 but bigger than 980 x 690 addSize([640, 480], [120, 60]). // Screens of any size smaller than 980 x 690 but bigger than 640 x 480 addSize([0, 0], [88, 31]). // Screens of any size smaller than 640 X 480 but bigger than 0 x 0 build(); googletag.defineSlot( '/XXXXXX/ad-unit-inside-dfp/level2/level3', [320, 50], 'div-id'). defineSizeMapping(sizeMapping). addService(googletag.pubads()); googletag.enableServices(); }); </script> </head> <body> <h1>user2636556 Testpage</h1> <div id="div-id"> <script> googletag.cmd.push(function() { googletag.display('div-id') }); </script> </div> </body> </html>

First you need to call .sizeMapping () to match the sizes of the ads with the sizes of the browser, and then you need to call .defineSizeMapping () to implement the mapping.

The first dimension you specify for addSize is the screen size, and each subsequent size represents the size of the ad. For example, in the first addSize () above, [1024, 768] is the size of the browser, and [970, 250] is the size of the ad.

If there is an error in the display or the default size cannot be determined for any reason, the size specified in .defineSlot () will be used.

GPT-enabled ads do not change when the browser is resized. You can add your own code to update ad slots when resizing.

The function for this:

 googletag.pubads().refresh();

If you have any further questions, let us know.

+2
source share

More articles:


All Articles