I have modified GPT (Google Publisher Tags) so it serves on size ads for phones and tablets and the other size for puter or larger screens. It works well but sizes are determined on load and when using tablet the ads stay the same regardless if you flip from landscape to portrait view. I added the code to dynamically refresh the ads on windows resize and that works as far refreshing goes, but sizes are still determined (I assume) on load and ads sizes do not change. How can I “refresh / reload” variables (size and size2) on window resize before ads are refreshed?
This is the code:

    <script type='text/javascript'>
    googletag.cmd.push(function() {
    var width = document.documentElement.clientWidth;
    var size;
     if (width >= 320 && width < 728) 
     size = [320, 50]; // smartphones
    else 
      size = [728, 90]; // desktops and tablets
    var size2;
     if (width >= 320 && width < 728) 
     size2 = [180, 150]; // smartphones
    else 
     size2 = [160, 600]; // desktops and tablets
   var slot1=googletag.defineSlot('/XXXXXXX/tp_home_topboard', size, 'div-gpt-ad-1380075538670-3').addService(googletag.pubads());
   var slot2=googletag.defineSlot('/XXXXXXX/tp_home_skyscraper', size2, 'div-gpt-ad-1380222668349-0').addService(googletag.pubads())
   googletag.pubads().enableSingleRequest();
   googletag.enableServices();

   $(window).resize(function(){googletag.pubads().refresh([slot1, slot2])});
   });
  </script>

I have modified GPT (Google Publisher Tags) so it serves on size ads for phones and tablets and the other size for puter or larger screens. It works well but sizes are determined on load and when using tablet the ads stay the same regardless if you flip from landscape to portrait view. I added the code to dynamically refresh the ads on windows resize and that works as far refreshing goes, but sizes are still determined (I assume) on load and ads sizes do not change. How can I “refresh / reload” variables (size and size2) on window resize before ads are refreshed?
This is the code:

    <script type='text/javascript'>
    googletag.cmd.push(function() {
    var width = document.documentElement.clientWidth;
    var size;
     if (width >= 320 && width < 728) 
     size = [320, 50]; // smartphones
    else 
      size = [728, 90]; // desktops and tablets
    var size2;
     if (width >= 320 && width < 728) 
     size2 = [180, 150]; // smartphones
    else 
     size2 = [160, 600]; // desktops and tablets
   var slot1=googletag.defineSlot('/XXXXXXX/tp_home_topboard', size, 'div-gpt-ad-1380075538670-3').addService(googletag.pubads());
   var slot2=googletag.defineSlot('/XXXXXXX/tp_home_skyscraper', size2, 'div-gpt-ad-1380222668349-0').addService(googletag.pubads())
   googletag.pubads().enableSingleRequest();
   googletag.enableServices();

   $(window).resize(function(){googletag.pubads().refresh([slot1, slot2])});
   });
  </script>

• javascript
• jquery
• responsive-design
• google-dfp

• 2 Have you tried using synchronous tags instead of async? With async, DFP loads iframes as placeholders. With sync tags, the code is injected right into the page which might allow the flexibility you need. – Khan Commented Oct 3, 2013 at 17:01

3 Answers 3

You can now build responsive ads natively using DFP.

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

https://support.google./dfp_premium/answer/3423562?hl=en

You are right, the sizes are only evaluated on page load. If you want to get the new display width after rotating the device, you would have to fetch the width in the resize call (and probably redefine the adslots with these sizes).

$(window).resize(function(){
    var width = document.documentElement.clientWidth;
    var size;
     if (width >= 320 && width < 728) 
     size = [320, 50]; // smartphones
    else 
      size = [728, 90]; // desktops and tablets
    var size2;
     if (width >= 320 && width < 728) 
     size2 = [180, 150]; // smartphones
    else 
     size2 = [160, 600]; // desktops and tablets
   var slot1=googletag.defineSlot('/XXXXXXX/tp_home_topboard', size, 'div-gpt-ad-1380075538670-3').addService(googletag.pubads());
   var slot2=googletag.defineSlot('/XXXXXXX/tp_home_skyscraper', size2, 'div-gpt-ad-1380222668349-0').addService(googletag.pubads())
   googletag.pubads().enableSingleRequest();
   googletag.pubads().refresh([slot1, slot2]);
});

This is untested, but I think this should take you to the right direction. If overwriting the adslots will not work, you can also think of creating four different adslots at the beginning and only show the ones based on the current screen size (and hide the others).

Google actually have a full example of refreshing your ads arbitrarily using the setTargetting API method. Here's the crux of it:

<script>

   googletag.cmd.push(function() {

    // Define the ad slot
    var slot1 = googletag.defineSlot("/6355419/Travel", [728, 90], "leaderboard").
     setTargeting("test", "refresh").
     addService(googletag.pubads());

   // Start ad fetching
   googletag.enableServices();
   googletag.display("leaderboard");

   // Set timer to refresh slot every 30 seconds
   setInterval(function(){googletag.pubads().refresh([slot1]);}, 30000);
   });
 </script> 

And the rest of the details are here - any good?

Beyond that you just need to detect the orientation change - j0nes's method should work, there's also an orientationchange event - browser support is inplete, but jQuery Mobile has a orientationchange wrapper (that falls back to resize).

Hope some of this helps!