根據DFP廣告管理系統中的瀏覽器寬度更改廣告尺寸

Question

在DFP廣告管理系統標准版/ DoubleClick中，我為具有三種不同尺寸的廣告單元生成了以下廣告代碼，並為每種指定尺寸生成了一個廣告素材。 因此，該廣告單元有三種不同的尺寸，當您點擊刷新時，廣告將更改為我指定的三種廣告尺寸之一。 效果不錯，但不是我想要廣告做的，

我希望廣告這樣做：

我希望廣告根據瀏覽器的寬度更改尺寸，例如，如果查看器的瀏覽器寬度大於800px，則以指定的最大尺寸顯示廣告，如果瀏覽器的寬度在600-800之間，則使用第二大的尺寸指定廣告的尺寸，最后，如果廣告小於600像素，則使用最小的廣告尺寸...根據瀏覽器寬度的變化，廣告應相應地更改尺寸。 800、600-800和小於600的不是實際尺寸，只是示例尺寸，但是無論如何，這行都指定了三種廣告尺寸：

googletag.defineSlot('/16569348/Different-Sizes-Unit-Test', [[292, 195], [310, 207], [345, 230]], 'div-gpt-ad-1363309773051-0').addService(googletag.pubads());

這是完整的代碼：

<script type='text/javascript'>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
(function() {
var gads = document.createElement('script');
 gads.async = true;
gads.type = 'text/javascript';
var useSSL = 'https:' == document.location.protocol;
gads.src = (useSSL ? 'https:' : 'http:') + 
'//www.googletagservices.com/tag/js/gpt.js';
var node = document.getElementsByTagName('script')[0];
node.parentNode.insertBefore(gads, node);
})();
</script>

 <script type='text/javascript'>
googletag.cmd.push(function() {
googletag.defineSlot('/16569348/Different-Sizes-Unit-Test', [[292, 195], [310, 207],     [345, 230]], 'div-gpt-ad-1363309773051-0').addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
</script>

<!-- Different-Sizes-Unit-Test -->
<div id='div-gpt-ad-1363309773051-0'>
<script type='text/javascript'>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1363309773051-0'); });
</script>

`

這是此代碼的jsfiddle（點擊運行或刷新以查看廣告隨機更改尺寸）：

http://jsfiddle.net/Zkm5j/

再次，我希望廣告根據瀏覽器寬度的大小/更改相應地更改大小。 如果有人可以幫助我提出實現此目標的方法，那對我來說確實意義重大！ :)

Answer 1

您應該使用DFP廣告管理系統提供的映射功能

這是在一個頁面上包含5個廣告單元的示例。 步驟1：為每個廣告單元定義所有可能的尺寸。 在DFP廣告管理系統的廣告單元設置中定義這些尺寸。 第2步：確定哪個廣告單元將在哪個視口上使用哪種尺寸。 如下面的代碼所示，使用變量megaboardsize firstsize創建尺寸映射，依此類推。 步驟3：如下所示，定義插槽和適當的定義映射。

在示例中，尺寸將按以下方式在廣告單元中投放： 廣告單元-example-megaboard ：在視口寬度大於970像素的設備上：970x90,970x250,728x90。 在視口寬度大於728像素的設備上：728x90。 在所有視口較小的設備上：320x100,320x50 廣告單元-/ XXX / example-300x250-1st ：在視口寬度大於920px的設備上：300x250,300x600。 在視口寬度大於300px的設備上：300x250。 在所有視口較小的設備上：無廣告。

等等...

<script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script>
<script>
  var googletag = googletag || {};
  googletag.cmd = googletag.cmd || [];
</script>

<script>
var gptAdSlots = [];
googletag.cmd.push(function() {

    var megaboardsize = googletag.sizeMapping().addSize([970, 0], [[970,90],[970,250],[728,90]]).addSize([728, 0], [728, 90]).addSize([0, 0], [[320, 100],[320,50]]).build();
    var firstsize = googletag.sizeMapping().addSize([920, 0], [[300,250],[300,600]]).addSize([300, 0],[300,250]).addSize([0, 0], []).build();
    var secondsize = googletag.sizeMapping().addSize([920, 0], [300,250]).addSize([0, 0],[]).build();  
    var thirdsize = googletag.sizeMapping().addSize([920, 0], [300,250]).build();  
    var fourthsize = googletag.sizeMapping().addSize([690, 0], [300,250]).addSize([0, 0],[]).build();

    gptAdSlots[0] = googletag.defineSlot('/XXX/example-megaboard', [[970, 90], [320, 100], [320, 50], [728, 90], [970, 250]], 'gpt-megaboard').defineSizeMapping(megaboardsize).addService(googletag.pubads());

    gptAdSlots[1] = googletag.defineSlot('/XXX/example-300x250-1st', [[300, 600], [300, 250]], 'gpt-1st').defineSizeMapping(firstsize).addService(googletag.pubads());

    gptAdSlots[2] = googletag.defineSlot('/XXX/example-300x250-2nd', [300, 250], 'gpt-2nd').defineSizeMapping(secondsize).addService(googletag.pubads());

    gptAdSlots[3] = googletag.defineSlot('/XXX/example-300x250-3rd', [300, 250], 'gpt-3rd').defineSizeMapping(thirdsize).addService(googletag.pubads());

    gptAdSlots[4] = googletag.defineSlot('/XXX/example-300x250-4th', [300, 250], 'gpt-4th').defineSizeMapping(fourthsize).addService(googletag.pubads());

    googletag.pubads().enableSingleRequest();
    googletag.pubads().collapseEmptyDivs();
    googletag.enableServices();
  });
</script>

Answer 2

您不能真正根據dfp配置直接根據用戶的設備寬度/高度來控制要提供給用戶的訂單項的寬度。

您可以做的是-。 觸發廣告時，請根據設備的寬度/高度指定尺寸。 例如，如果設備的寬度小於600像素，則僅使用最小的廣告尺寸進行觸發。 例如

 if(window.innerWidth < 800){
     googletag.defineSlot('ADID', [[292, 195]], 'domid')
  }

檢查這兩個演示鏈接，它們會觸發大小不同的同一個廣告單元。

320x50- http://tinyurl.com/q2x3562

300x250- http://tinyurl.com/o3vx4qk

Answer 3

對我來說，這篇文章總結了最佳選擇： http : //exisweb.net/how-to-use-google-adsense-on-a-sensitive-website

我制作了一個基於＃3的WordPress插件： https : //wordpress.org/plugins/sensitive-ad-shortcodes/