2016-03-21 50 views
7

我試圖根據瀏覽器大小加載橫幅。因此,在我擁有728x90橫幅的位置,300x250會顯示它是否在移動設備上。DoubleClick for publishers:指定瀏覽器和廣告尺寸

問題是,728x90在桌面上加載。但在移動300x250不顯示。

我嘗試下面的例子here

<script type='text/javascript'> 
googletag.cmd.push(function() { 
    // This mapping will only display ads when user is on desktop sized viewport 
    var mapLeader = googletag.sizeMapping(). 
     addSize([0, 0], []). 
     addSize([768, 200], [728, 90]). 
     build(); 

    // This mapping will only display ads when user is on mobile or tablet sized viewport 
    var mapLeader2 = googletag.sizeMapping(). 
     addSize([0, 0], []). 
     addSize([768, 200], []). // Desktop 
     addSize([300, 200], [300, 250]). // Tablet 
     build(); 

    window.LeaderSlot= googletag.defineSlot('/XXXXXXX/leaderboard-1', [728, 90], 'div-gpt-ad-1455251022145-0'). 
     defineSizeMapping(mapLeader). 
     setCollapseEmptyDiv(true). 
     addService(googletag.pubads()); 

    window.LeaderSlot= googletag.defineSlot('/XXXXXXX/medium-rectangle-1', [300, 250], 'div-gpt-ad-1458546777123-0'). 
     defineSizeMapping(mapLeader2). 
     setCollapseEmptyDiv(true). 
     addService(googletag.pubads()); 

    googletag.pubads().enableSingleRequest(); 
    googletag.pubads().enableSyncRendering(); 
    // Start ad fetching 
    googletag.enableServices(); 

}); 
</script> 

,並在我的HTML

<!-- /XXXXXX/leaderboard-1 --> 
<div id='div-gpt-ad-1455251022145-0' style='height:90px; width:728px;' class="center"> 
    <script type='text/javascript'> 
     googletag.cmd.push(function() { googletag.display('div-gpt-ad-1455251022145-0'); }); 
    </script> 
</div> 
<!-- /XXXXXX/medium-rectangle-1 --> 
<div id='div-gpt-ad-1458546777123-0' style='height:250px; width:300px;'> 
    <script type='text/javascript'> 
    googletag.cmd.push(function() { googletag.display('div-gpt-ad-1458546777123-0'); }); 
    </script> 
</div> 

我一定把<div>爲每個尺寸在同一個位置?我如何獲得300x250橫幅加載? 728x90工作正常。我知道我可以隱藏/顯示瀏覽器的大小,使用CSS。但我不想這樣做。在同一位置加載多個尺寸會減慢我的網站加載速度。

+0

也許它與'window.LeaderSlot'有關?在這個例子中是一個數組,在這裏你只有一個你正在替換的變量。 – jolmos

回答

0

您不需要style='height:90px; width:728px;',因爲您希望DFP根據屏幕大小加載適當的橫幅。

<!-- /XXXXXX/leaderboard-1 --> 
<div id='div-gpt-ad-1455251022145-0' style='height:90px; width:728px;' class="center"> 
    <script type='text/javascript'> 
     googletag.cmd.push(function() { googletag.display('div-gpt-ad-1455251022145-0'); }); 
    </script> 
</div> 

當你使用不同的屏幕尺寸測試您的瀏覽器,請記住,橫幅不會自動調整大小。您將不得不刷新頁面以查看更改。

2

我真的沒有機會保存你提供的例子,所以我創建了一個例子,它爲我完美工作。我會在底部稍微解釋一下。

<html> 
     <head> 
     <title>Async Responsive</title> 
     <script async src="http://www.googletagservices.com/tag/js/gpt.js"> 
     </script> 
     <script> 
      googletag = window.googletag || {cmd:[]}; 
      googletag.cmd.push(function() { 

      var sizeMapping = googletag.sizeMapping(). 
       addSize([1024, 768], [970, 250]). // Screens of any size smaller than infinite but bigger than 1024 x 768 
       addSize([980, 690], [728, 90]). // Screens of any size smaller than 1024x 768 but bigger than 980 x 690 
       addSize([640, 480], [120, 60]). // Screens of any size smaller than 980 x 690 but bigger than 640 x 480 
       addSize([0, 0],  [88, 31]). // Screens of any size smaller than 640 X 480 but bigger than 0 x 0 

       build(); 

      googletag.defineSlot(
       '/XXXXXX/ad-unit-inside-dfp/level2/level3', [320, 50], 'div-id'). 
       defineSizeMapping(sizeMapping). 
       addService(googletag.pubads()); 

      googletag.enableServices(); 
      }); 
     </script> 
     </head> 
     <body> 
     <h1>user2636556 Testpage</h1> 
     <div id="div-id"> 
      <script> 
      googletag.cmd.push(function() { googletag.display('div-id') }); 
      </script> 
     </div> 
     </body> 
</html> 

首先你必須調用.sizeMapping()的廣告尺寸映射到瀏覽器尺寸,然後你需要調用.defineSizeMapping()來實現的映射。

您爲addSize指定的第一個尺寸是屏幕尺寸,每個後續尺寸都是廣告尺寸。例如,在上面定義的第一個addSize()中,[1024,768]是瀏覽器大小,[970,250]是廣告大小。

如果映射中存在錯誤或無法確定屏幕尺寸,則會使用.defineSlot()中指定的尺寸。

GPT自適應廣告不會調整瀏覽器大小的變化。您可以添加自己的自定義代碼來刷新調整大小的廣告位。

爲了這個功能是這一個:

googletag.pubads().refresh(); 

如果有任何進一步的問題,讓我知道吧。

相關問題