Create DFP Served Ads That Fully Meet the Requirements

Question

I changed the GPT (Google Publisher Tags), so it serves for size ads for phones and tablets, and a different size for computers or large screens. It works well, but the dimensions are determined when loading, and when using a tablet, the ads remain unchanged, regardless of whether you are turning over the landscape from a portrait view. I added code to dynamically update the ads when the window is resized and it works just as well, but the sizes are still determined (I assume) when loading and the sizes of the ads do not change. How can I “update / reload” variables (size and size2) when I resize the window before updating the ads?
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> 

Answer 1

You can now create responsive ads from 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

Answer 2

You are right, the sizes are estimated only at page loading. If you want to get a new screen width after you rotate the device, you will need to get the width in the resize call (and possibly override ad slots 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 has not been verified, but I think it should lead you in the right direction. If rewriting ad slots won't work, you can also consider creating four different ad slots at the beginning and show only those based on the current screen size (and hide the rest).

Answer 3

Google really has a complete example of updating your ads arbitrarily using the setTargetting API method. Here's the gist:

 <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 here - is any good?

In addition, you just need to determine the change in orientation - the j0nes method should work, there is also a changechange event - browser support is incomplete, but jQuery Mobile has a orientationchange wrapper (returns to resize).

Hope this helps!