通過DFP充分響應DFP提供的廣告

Question

我修改了GPT（Google發佈商標記），以便用於手機和平板電腦的尺寸廣告以及用於計算機或更大屏幕的其他尺寸廣告。它的效果很好，但尺寸取決於負載，當使用平板電腦時，無論您從橫向翻轉到縱向視圖，廣告都保持不變。我添加了代碼來動態刷新窗口大小上的廣告，並且儘可能地讓人耳目一新，但尺寸仍然是確定的（我假設）在加載和廣告尺寸不變。在刷新廣告之前，如何在窗口調整大小時「刷新/重新加載」變量（大小和大小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

你說得對，大小僅在頁面加載評估。如果要在旋轉設備後獲得新的顯示寬度，則必須獲取resize調用的寬度（並可能重新定義具有這些大小的adslots）。

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

這是未經測試，但我認爲這應該帶你到正確的方向。如果覆蓋廣告位不起作用，您也可以考慮在開頭創建四個不同的廣告位，並僅根據當前屏幕尺寸顯示這些廣告位（並隱藏其他廣告位）。

Answer 2

Google實際上有一個使用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> 

和細節其餘here - 有什麼好處？

除此之外，你只需要檢測取向變化 - j0nes的方法應該工作，有也是一個orientationChange事件 - 瀏覽器支持是不完整的，但jQuery Mobile的有orientationchange包裝（即回落到調整）。

希望這有助於一些！

Answer 3

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