DFP responsive ads

Question

I have so problem to run responsive DFP ads in my website. I read all the google specs but still cant figure it out.

<script type='text/javascript'>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
(function() {
var gads = document.createElement('script');
gads.async = true;
gads.type = 'text/javascript';
var useSSL = 'https:' == document.location.protocol;
gads.src = (useSSL ? 'https:' : 'http:') + 
'//www.googletagservices.com/tag/js/gpt.js';
var node = document.getElementsByTagName('script')[0];
node.parentNode.insertBefore(gads, node);
})();
</script>

<script type='text/javascript'>
googletag.cmd.push(function() {
  googletag.defineSlot('/4421777/Textlink', [468, 60], 'div-gpt-ad-1431019765846-0').addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.companionAds().setRefreshUnfilledSlots(true);
googletag.pubads().enableVideoAds();
googletag.enableServices();
});

and here is my mapping code :

var mapping = googletag.sizeMapping().
  addSize([1024, 768], [970, 250]).
  addSize([980, 690], [[1000, 300],[320, 50]]).
  addSize([640, 480], [[120, 60],[1000, 300],[320, 50], [468, 60]]).
  addSize([0, 0], [88, 31],).
  // Fits browsers of any size smaller than 640 x 480
  build();
adSlot.defineSizeMapping(mapping);

can you please give some clear way to make it run perfect on mobile etc? thanks

Answer 1

You can detect browser width using javascript

Full example:

  window.googletag = window.googletag || {cmd: []};
  googletag.cmd.push(function() {
    var w = Math.max(
     document.body.scrollWidth,
     document.documentElement.scrollWidth,
     document.body.offsetWidth,
     document.documentElement.offsetWidth,
     document.documentElement.clientWidth
    );
    if(w>=970) {
        googletag.defineSlot('/00000000000/ad', [[970, 90], [728, 90], [468, 60], [320, 50], [300, 100], [234, 60]], 'div-gpt-ad-00000000000000-0').addService(googletag.pubads());
    } else if(w>=728) {
        googletag.defineSlot('/00000000000/ad', [[728, 90], [468, 60], [320, 50], [300, 100], [234, 60]], 'div-gpt-ad-00000000000000-0').addService(googletag.pubads());
    } else if(w>=468) {
        googletag.defineSlot('/00000000000/ad', [[468, 60], [320, 50], [300, 100], [234, 60]], 'div-gpt-ad-00000000000000-0').addService(googletag.pubads());
    } else if(w>=320) {
        googletag.defineSlot('/00000000000/ad', [[320, 50], [300, 100], [234, 60]], 'div-gpt-ad-00000000000000-0').addService(googletag.pubads());
    } else if(w>=300) {
        googletag.defineSlot('/00000000000/ad', [[300, 100], [234, 60]], 'div-gpt-ad-00000000000000-0').addService(googletag.pubads());
    } else if(w>=234) {
        googletag.defineSlot('/00000000000/ad', [[234, 60]], 'div-gpt-ad-00000000000000-0').addService(googletag.pubads());
    } else {
        googletag.defineSlot('/00000000000/ad', [], 'div-gpt-ad-00000000000000-0').addService(googletag.pubads());
    }
    googletag.pubads().enableSingleRequest();
    googletag.pubads().collapseEmptyDivs();
    googletag.enableServices();
  });

Answer 2

here is my code now its that correct?

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

<script>
  googletag.cmd.push(function() {
      var mapping = googletag.sizeMapping().addSize([1600, 1024], [1000, 300]).addSize([980, 690], [[1000, 300],[320, 50]]).addSize([640, 480], [[120, 60],[1000, 300],[320, 50], [468, 60]]).addSize([0, 0], [88, 31],).build();

     gptAdSlots[0] =  googletag.defineSlot('/15076752/300x250_Fifth', [300, 250], 'div-gpt-ad-1476951614543-0').addService(googletag.pubads());
      gptAdSlots[1] = googletag.defineSlot('/15076752/300x250_First', [300, 250], 'div-gpt-ad-1476951614543-1').addService(googletag.pubads());
     gptAdSlots[2] =  googletag.defineSlot('/15076752/300x250_Fourth', [300, 250], 'div-gpt-ad-1476951614543-2').addService(googletag.pubads());
     gptAdSlots[3] =  googletag.defineSlot('/15076752/300x250_Second', [300, 250], 'div-gpt-ad-1476951614543-3').addService(googletag.pubads());
     gptAdSlots[4] =  googletag.defineSlot('/15076752/300x250_Third', [300, 250], 'div-gpt-ad-1476951614543-4').addService(googletag.pubads());
     gptAdSlots[5] =  googletag.defineSlot('/15076752/300x600', [300, 600], 'div-gpt-ad-1476951614543-5').addService(googletag.pubads());
     gptAdSlots[6] =  googletag.defineSlot('/15076752/728x90_Second', [728, 90], 'div-gpt-ad-1476951614543-6').addService(googletag.pubads());
     gptAdSlots[7] =  googletag.defineSlot('/15076752/BillBoard-2-1000x300', [1000, 300], 'div-gpt-ad-1476951614543-7').addService(googletag.pubads());
     gptAdSlots[8] =  googletag.defineSlot('/15076752/Billboard1000x300', [1000, 300], 'div-gpt-ad-1476951614543-8').addService(googletag.pubads());
     gptAdSlots[9] =  googletag.defineSlot('/15076752/Skin_bg', [1600, 1024], 'div-gpt-ad-1476951614543-9').addService(googletag.pubads());
     gptAdSlots[10] =  googletag.defineSlot('/15076752/Text_link', [468, 60], 'div-gpt-ad-1476951614543-10').addService(googletag.pubads());
     gptAdSlots[11] =  googletag.defineSlot('/15076752/Text_link2', [468, 60], 'div-gpt-ad-1476951614543-11').addService(googletag.pubads());
     gptAdSlots[12] =  googletag.defineSlot('/15076752/Text_link3', [468, 60], 'div-gpt-ad-1476951614543-12').addService(googletag.pubads());
     gptAdSlots[13] =  googletag.defineSlot('/15076752/Top_728x90', [728, 90], 'div-gpt-ad-1476951614543-13').addService(googletag.pubads());
  googletag.pubads().enableSingleRequest();
    googletag.companionAds().setRefreshUnfilledSlots(true); 
    googletag.pubads().enableVideoAds();    
    googletag.enableServices();
  });   
</script>

Answer 3

It look like you are still missing from each gptAdSlots[x]

.defineSizeMapping(mapping2)

Answer 4

Here is a simplified version of what you are trying to achieve (considering your size mapping is weird, as you will display a 1000x300 banner on a device with viewport of 640x480?).

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

<script type='text/javascript'>
var gptAdSlots = [];
    googletag.cmd.push(function() {
    var mapping = googletag.sizeMapping().addSize([1024, 768], [970, 250]).addSize([980, 690], [[1000, 300],[320, 50]]).addSize([640, 480], [[120, 60],[1000, 300],[320, 50], [468, 60]]).addSize([0, 0], [88, 31],).build();
    gptAdSlots[0] = googletag.defineSlot('/4421777/Textlink', [[970, 250], [1000, 300], [320, 50], [120, 60], [468, 60], [88, 31]], 'div-gpt-ad-1431019765846-0').defineSizeMapping(mapping).addService(googletag.pubads());
    googletag.pubads().enableSingleRequest();
    googletag.companionAds().setRefreshUnfilledSlots(true); 
    googletag.pubads().enableVideoAds();    
    googletag.enableServices();
  });   
</script>

Take a note that there are few minor changes: 1. An array of the ad slots is created starting with the first being 0. But if you want to call a second slot, you should add something like this after the first one (note the [1], next would be [2] and so on):

gptAdSlots[1] = googletag.defineSlot('/4421777/Textlink2', [300, 250], 'div-gpt-ad-1431019765846-1').defineSizeMapping(mapping2).addService(googletag.pubads());

2. You should list all the sizes defined in your size mapping in the ad unit sizes as well. Both in DFP Ad Unit setup and in the DefineSlot call (I have done it above).

Answer 5

Your code is incorrect as it doesn't link the size mapping with ad unit. Note the bold part in my code: 'div-gpt-ad-1431019765846-0').defineSizeMapping(mapping).addService(googletag Also, I think you need different size mappings for each ad slot. I am giving an example: 1. You have a big banner on the top of your website, let's say the Ad Unit (Ad Slot) is called Billboard. So, if it is desktop, you want to serve a big banner - 1000x300, if large tablet or small desktop - 728x90 and if it is a mobile device a mobile leaderboard - 320x100. 2. Than you have another ad unit, let's say it is called Rectangle. You want this to serve 300x250 or 300x600 on desktop. 300x250 on tablets and phones. 3. Then you have a third ad unit, let's say it is called Smallbanner. You want this to serve 468x60 on desktop and tablets and no banner on phones.

You will need to create a size mapping for each ad unit and then attach it when called. So in my example case, the output code will be something like this. I am adding inline comments so you can probably understand it better.

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

<script type='text/javascript'>
var gptAdSlots = [];
    googletag.cmd.push(function() {
    // Create size mapping for Billboard position. If viewport is above 1000x768 show banner 1000x300. If viewport is above 728x300 (but bellow 1000x768) show banner 728x90, if viewport is lower than 728x300 show banner 320x100
    var billboardsizes = googletag.sizeMapping().addSize([1000, 768], [1000, 300]).addSize([728, 300], [728, 90]).addSize([0, 0], [320, 100]).build();

    // Create size mapping for Rectangle position. If viewport is above 1000x768 (considered as desktop, you may lower the height) show 300x250 OR 300x600. If the viewport is smaller than 1000x768 show 300x250 only.
    var rectanglesizes = googletag.sizeMapping().addSize([1000, 768], [[300, 60], [300, 250]]).addSize([0, 0], [300, 250]).build();

    // Create size mapping for Smallbanner position. If viewport is above 468x300 (considered as desktop + bigger tablets) show 468x60. If smaller, don't show banner.
    var smallbannersizes = googletag.sizeMapping().addSize([468, 300], [468, 60]).addSize([0, 0], []).build();  

    // Now create the first slot. Please note that we add all the sizes described in the size mapping. This should be set in the DFP Ad Unit configuration as well. Please also note the part of the code: .defineSizeMapping(billboardsizes) - it tells DFP what banner to serve on what device size.
    gptAdSlots[0] = googletag.defineSlot('/4421777/billboard', [[1000, 300], [320, 100], [728, 90]], 'div-gpt-ad-1431019765846-0').defineSizeMapping(billboardsizes).addService(googletag.pubads());

    // Now create the second slot. Please note that we add all the sizes described in the size mapping. This should be set in the DFP Ad Unit configuration as well. Please also note the part of the code: .defineSizeMapping(rectanglesizes) - it tells DFP what banner to serve on what device size. We also incremented gptAdSlots[1] by one and the last number of the div id by 1.
    gptAdSlots[1] = googletag.defineSlot('/4421777/rectangle', [[300, 600], [300, 250]], 'div-gpt-ad-1431019765846-1').defineSizeMapping(rectanglesizes).addService(googletag.pubads());

    // Now create the third slot. Please note that we add all the sizes described in the size mapping. This should be set in the DFP Ad Unit configuration as well. Please also note the part of the code: .defineSizeMapping(smallbannersizes) - it tells DFP what banner to serve on what device size. We also incremented gptAdSlots[1] by one and the last number of the div id by 1.   
    gptAdSlots[2] = googletag.defineSlot('/4421777/smallbanner', [468, 60], 'div-gpt-ad-1431019765846-2').defineSizeMapping(smallbannersizes).addService(googletag.pubads());

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