Making ads served through DFP fully responsive

Question

I have modified GPT (Google Publisher Tags) so it serves on size ads for phones and tablets and the other size for computer 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>

Jewelry

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. – Putup

Answer 1

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.com/dfp_premium/answer/3423562?hl=en

Diagnosis

Hello, Ryan. Could you help me to explain this? I want to display the AD on mobile screens only and for that I use the .addSize([0, 0], [[320,50], [300, 50]]).addSize([727, 0], []). But the problem that when I use DFP console (by attaching the ?googfc into the URL, I see warning "Ad unit failed to fetch."). Is this something I should try to fix? – Morgun

Answer 2

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).

Changchangaris

Hello j0nes, ads do not show without googletag.cmd.push(function(). I assume my script should be placed into function and called on window resize. The thing is I am not sure how to do this. – Jewelry

Answer 3

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 incomplete, but jQuery Mobile has a orientationchange wrapper (that falls back to resize).

Hope some of this helps!

Irregular