通過DFP廣告系列投放廣告完全響應

Question

我修改了GPT（Google發布商代碼），因此它適用於手機和平板電腦的尺寸廣告，適用於計算機或大屏幕的其他尺寸。 它運作良好，但尺寸是根據負載確定的，當使用平板電腦時，廣告保持不變，無論您是從橫向視圖切換到縱向視圖。 我添加了代碼以動態刷新windows resize上的廣告，並且可以正常刷新，但尺寸仍然是在加載時確定的（我假設）並且廣告尺寸不會改變。 在刷新廣告之前，如何在窗口調整大小時“刷新/重新加載”變量（大小和大小2）？
這是代碼：

    <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

您現在可以使用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

你是對的，尺寸僅在頁面加載時評估。 如果要在旋轉設備后獲得新的顯示寬度，則必須在resize調用中獲取寬度（並且可能重新定義具有這些大小的廣告位）。

$(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]);
});

這是未經測試的，但我認為這應該會帶你走向正確的方向。 如果覆蓋adslots不起作用，您還可以考慮在開頭創建四個不同的adslots，並僅根據當前屏幕大小顯示那些（並隱藏其他的）。

Answer 3

谷歌實際上有一個完整的例子，可以使用setTargetting API方法任意刷新你的廣告。 這是它的關鍵：

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

其余的細節都在這里 - 任何好處？

除此之外，您只需要檢測方向更改 - j0nes的方法應該有效，還有一個orientationchange事件 - 瀏覽器支持不完整，但jQuery Mobile有一個orientationchange包裝器（后退到調整大小）。

希望有些幫助！