CODEWITHSUNDEEP
javascriptadsensegoogle-dfpgoogle-ad-managergoogle-publisher-tag
user2636556
user2636556

Reputation: 1915

DoubleClick for publishers: Specify browser and ad dimensions

I'm trying to get banners to load according to the browser size. So in a location where i have a 728x90 banner, a 300x250 will show if its on mobile.

Problem is, the 728x90 loads on desktop. but on mobile the 300x250 doesn't show.

I tried following 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 have to put the <div> for each size in the same location? How do i get the 300x250 banner to load? the 728x90 works fine. I know i could hide / show according too browser size using CSS. but i don't want to do that. Loading multiple sizes in the same location slows down my sites loading.

Upvotes: 7

Views: 1203

Answers (2)

srakl
srakl

Reputation: 2619

You don't need style='height:90px; width:728px;' since you want DFP to load the proper banner according to 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 on your browser using different screen sizes, remember that the banners don't automatically resize. You will have to refresh your page to see the changes.

Upvotes: 0

AppRoyale
AppRoyale

Reputation: 403

I didn't really see a chance to save the example you provided, so I created an example, which worked perfectly for me. I will explain a little bit at the bottom.

 <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 have to call .sizeMapping() to map the ad sizes to the browser sizes 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 dimension is an ad size. For example, in the first addSize() defined above, [1024, 768] is the browser size and [970, 250] is the ad size.

If there is an error in the mapping or if the screen size can't be determined for whatever reason, the size specified in .defineSlot() will be used.

GPT responsive ads do not resize on change in the size of the browser. You can add your own custom code to refresh the ad slots on resize.

The function in order to this is this one:

googletag.pubads().refresh();

If there are any further questions, let me know please.

Upvotes: 2

Related Questions